Skip to content

Commit

Permalink
Fixed #1725 - New Component: Skeleton
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcandu
mcandu committed Dec 17, 2020
1 parent c652aa6 commit ef75067
Show file tree
Hide file tree
Showing 12 changed files with 868 additions and 1 deletion.
1 change: 1 addition & 0 deletions exports/skeleton.d.ts
View file
@@ -0,0 +1 @@
export * from './components/skeleton/Skeleton';
3 changes: 3 additions & 0 deletions exports/skeleton.js
View file
@@ -0,0 +1,3 @@
'use strict';

module.exports = require('./components/skeleton/Skeleton');
8 changes: 8 additions & 0 deletions public/showcase/menu/menu.json
View file
Expand Up @@ -1271,6 +1271,14 @@
"inplace"
]
},
{
"name": "Skeleton",
"to": "/skeleton",
"meta": [
"skeleton"
],
"badge": "new"
},
{
"name": "ProgressBar",
"to": "/progressbar",
Expand Down
5 changes: 5 additions & 0 deletions src/AppRouter.js
View file
Expand Up @@ -156,6 +156,8 @@ import { RippleDemo } from './showcase/ripple/RippleDemo';
import { TimelineDemo } from './showcase/timeline/TimelineDemo';
import { AvatarDemo } from './showcase/avatar/AvatarDemo';
import { TagDemo } from './showcase/tag/TagDemo';
import { SkeletonDemo } from './showcase/skeleton/SkeletonDemo';


class AppRouter extends Component {

Expand Down Expand Up @@ -337,6 +339,9 @@ class AppRouter extends Component {
<Route path="/avatar" component={AvatarDemo} />
<Route path="/badge" component={BadgeDemo} />
<Route path="/tag" component={TagDemo} />
<Route path="/skeleton" component={SkeletonDemo} />


</>
);
}
Expand Down
2 changes: 2 additions & 0 deletions src/assets/style/primereact.css
View file
Expand Up @@ -64,3 +64,5 @@
@import '../../components/avatar/Avatar.css';
@import '../../components/avatargroup/AvatarGroup.css';
@import '../../components/tag/Tag.css';
@import '../../components/skeleton/Skeleton.css';

33 changes: 33 additions & 0 deletions src/components/skeleton/Skeleton.css
View file
@@ -0,0 +1,33 @@
.p-skeleton {
position: relative;
overflow: hidden;
}

.p-skeleton::after {
content: "";
animation: p-skeleton-animation 1.2s infinite;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
transform: translateX(-100%);
z-index: 1;
}

.p-skeleton-circle {
border-radius: 50%;
}

.p-skeleton-none::after {
animation: none;
}

@keyframes p-skeleton-animation {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
14 changes: 14 additions & 0 deletions src/components/skeleton/Skeleton.d.ts
View file
@@ -0,0 +1,14 @@
import * as React from 'react';

interface Skeleton {
shape: string,
size: string,
width: string,
height: string,
borderRadius: string,
animation: string,
style: object,
className: string
}

export class Skeleton extends React.Component<Skeleton, any> { }
49 changes: 49 additions & 0 deletions src/components/skeleton/Skeleton.js
View file
@@ -0,0 +1,49 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { classNames } from '../utils/ClassNames';

export class Skeleton extends Component {

static defaultProps = {
shape: 'rectangle',
size: null,
width: '100%',
height: '1rem',
borderRadius: null,
animation: 'wave',
style: null,
className: null
}

static propTypes = {
shape: PropTypes.string,
size: PropTypes.string,
width: PropTypes.string,
height: PropTypes.string,
borderRadius: PropTypes.string,
animation: PropTypes.string,
style: PropTypes.object,
className: PropTypes.string
};

skeletonStyle() {
if (this.props.size)
return { width: this.props.size, height: this.props.size, borderRadius: this.props.borderRadius };
else
return { width: this.props.width, height: this.props.height, borderRadius: this.props.borderRadius };
}

render() {

const style = this.skeletonStyle();

const skeletonClassName = classNames('p-skeleton p-component', {
'p-skeleton-circle': this.props.shape === 'circle',
'p-skeleton-animation-none': this.props.animation === 'none'
}, this.props.className);

return (
<div style={style} className={skeletonClassName}></div>
);
}
}
147 changes: 147 additions & 0 deletions src/showcase/skeleton/SkeletonDemo.js
View file
@@ -0,0 +1,147 @@
import React, { Component } from "react";
import { Skeleton } from '../../components/skeleton/Skeleton';
import { DataTable } from '../../components/datatable/DataTable';
import { Column } from '../../components/column/Column';
import { SkeletonDoc } from './SkeletonDoc';
import './SkeletonDemo.scss';

export class SkeletonDemo extends Component {

products = new Array(5);

bodyTemplate = () => {
return <Skeleton></Skeleton>
}

render() {

return (
<div>
<div className="content-section introduction">
<div className="feature-intro">
<h1>Skeleton</h1>
<p>Skeleton is a placeholder to display instead of the actual content.</p>
</div>
</div>

<div className="content-section implementation">
<div className="card">
<div className="p-grid p-formgrid">
<div className="p-field p-col-12 p-md-6">
<h5>Rectangle</h5>
<Skeleton className="p-mb-2"></Skeleton>
<Skeleton width="10rem" className="p-mb-2"></Skeleton>
<Skeleton width="5rem" className="p-mb-2"></Skeleton>
<Skeleton height="2rem" className="p-mb-2"></Skeleton>
<Skeleton width="10rem" height="4rem"></Skeleton>
</div>
<div className="p-field p-col-12 p-md-6">
<h5>Rounded</h5>
<Skeleton className="p-mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" className="p-mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="5rem" borderRadius="16px" className="p-mb-2"></Skeleton>
<Skeleton height="2rem" className="p-mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
</div>
<div className="p-field p-col-12 p-md-6">
<h5 className="p-mt-3">Square</h5>
<div className="p-d-flex p-ai-end">
<Skeleton size="2rem" className="p-mr-2"></Skeleton>
<Skeleton size="3rem" className="p-mr-2"></Skeleton>
<Skeleton size="4rem" className="p-mr-2"></Skeleton>
<Skeleton size="5rem"></Skeleton>
</div>
</div>
<div className="p-field p-col-12 p-md-6">
<h5 className="p-mt-3">Circle</h5>
<div className="p-d-flex p-ai-end">
<Skeleton shape="circle" size="2rem" className="p-mr-2"></Skeleton>
<Skeleton shape="circle" size="3rem" className="p-mr-2"></Skeleton>
<Skeleton shape="circle" size="4rem" className="p-mr-2"></Skeleton>
<Skeleton shape="circle" size="5rem"></Skeleton>
</div>
</div>
</div>
</div>

<div className="card">
<div className="p-grid p-formgrid">
<div className="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
<h5>Card</h5>
<div className="custom-skeleton p-p-4">
<div className="p-d-flex p-mb-3">
<Skeleton shape="circle" size="4rem" className="p-mr-2"></Skeleton>
<div>
<Skeleton width="10rem" className="p-mb-2"></Skeleton>
<Skeleton width="5rem" className="p-mb-2"></Skeleton>
<Skeleton height=".5rem"></Skeleton>
</div>
</div>
<Skeleton width="100%" height="150px"></Skeleton>
<div className="p-d-flex p-jc-between p-mt-3">
<Skeleton width="4rem" height="2rem"></Skeleton>
<Skeleton width="4rem" height="2rem"></Skeleton>
</div>
</div>
</div>

<div className="p-field p-col-12 p-md-6">
<h5>List</h5>
<div className="custom-skeleton p-p-4">
<ul className="p-m-0 p-p-0">
<li className="p-mb-3">
<div className="p-d-flex">
<Skeleton shape="circle" size="4rem" className="p-mr-2"></Skeleton>
<div style={{ flex: '1' }}>
<Skeleton width="100%" className="p-mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li className="p-mb-3">
<div className="p-d-flex">
<Skeleton shape="circle" size="4rem" className="p-mr-2"></Skeleton>
<div style={{ flex: '1' }}>
<Skeleton width="100%" className="p-mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li className="p-mb-3">
<div className="p-d-flex">
<Skeleton shape="circle" size="4rem" className="p-mr-2"></Skeleton>
<div style={{ flex: '1' }}>
<Skeleton width="100%" className="p-mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li>
<div className="p-d-flex">
<Skeleton shape="circle" size="4rem" className="p-mr-2"></Skeleton>
<div style={{ flex: '1' }}>
<Skeleton width="100%" className="p-mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>

<h5>DataTable</h5>
<DataTable value={this.products} className="p-datatable-striped">
<Column field="code" header="Code" body={this.bodyTemplate}></Column>
<Column field="name" header="Name" body={this.bodyTemplate}></Column>
<Column field="category" header="Category" body={this.bodyTemplate}></Column>
<Column field="quantity" header="Quantity" body={this.bodyTemplate}></Column>
</DataTable>
</div>

</div>
<SkeletonDoc />
</div >
);
}
}
8 changes: 8 additions & 0 deletions src/showcase/skeleton/SkeletonDemo.scss
View file
@@ -0,0 +1,8 @@
.custom-skeleton {
border: 1px solid var(--surface-d);
border-borderRadius: 4px;

ul {
list-style: none;
}
}

0 comments on commit ef75067

Please sign in to comment.