chowa
Version:
UI component library based on React
113 lines (112 loc) • 4.09 kB
JavaScript
/**
* @license chowa v1.1.3
*
* Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
;
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const PropTypes = require("prop-types");
const classnames_1 = require("classnames");
const utils_1 = require("../utils");
const grid_1 = require("../grid");
class Skeleton extends React.PureComponent {
renderLoadingBlock(key = 0) {
return (React.createElement("div", { key: key, className: utils_1.preClass('skeleton-loading-block'), style: { animationDelay: `${Math.random().toFixed(2)}s` } }));
}
renderRandomsRow() {
const cols = [];
const rows = [];
let colsAmount = 0;
for (let i = 0; i < 6; i++) {
const span = Math.ceil(Math.random() * 12);
if (span + colsAmount > 24) {
break;
}
colsAmount += span;
cols.push(span);
}
cols.forEach((span, index) => {
rows.push((React.createElement(grid_1.default.Col, { key: index, span: span }, this.renderLoadingBlock())));
});
return rows;
}
renderParagraph() {
const { paragraphRows, fragmentable } = this.props;
const nodes = [];
if (fragmentable) {
for (let i = 0; i < paragraphRows; i++) {
nodes.push((React.createElement(grid_1.default.Row, { gutter: 10, key: i }, this.renderRandomsRow())));
}
}
else {
for (let i = 0; i < paragraphRows; i++) {
nodes.push(this.renderLoadingBlock(i));
}
}
return nodes;
}
renderAvatar() {
const { avatarShape } = this.props;
const avatarClass = classnames_1.default({
[utils_1.preClass('skeleton-avatar')]: true,
[utils_1.preClass(`skeleton-avatar-${avatarShape}`)]: avatarShape
});
return (React.createElement("span", { className: avatarClass }));
}
renderTitle() {
const { titleWidth } = this.props;
return (React.createElement("div", { style: { width: titleWidth }, className: utils_1.preClass('skeleton-title') }));
}
renderSkeleton() {
const { avatar, title, paragraph, animation } = this.props;
const containerClass = classnames_1.default({
[utils_1.preClass('skeleton')]: true,
[utils_1.preClass('skeleton-with-avatar')]: avatar,
[utils_1.preClass('skeleton-with-animation')]: animation
});
return (React.createElement("div", { className: containerClass },
avatar && this.renderAvatar(),
React.createElement("div", { className: utils_1.preClass('skeleton-content') },
title && this.renderTitle(),
paragraph && this.renderParagraph())));
}
render() {
const { loading, children, className, style } = this.props;
const wrapperClass = classnames_1.default({
[utils_1.preClass('skeleton-wrapper')]: true,
[className]: utils_1.isExist(className)
});
return (React.createElement("div", { className: wrapperClass, style: style },
!loading && children,
loading && this.renderSkeleton()));
}
}
Skeleton.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
loading: PropTypes.bool,
animation: PropTypes.bool,
avatar: PropTypes.bool,
avatarShape: PropTypes.oneOf(['circle', 'rect']),
title: PropTypes.bool,
titleWidth: PropTypes.string,
paragraph: PropTypes.bool,
paragraphRows: PropTypes.number,
fragmentable: PropTypes.bool
};
Skeleton.defaultProps = {
loading: false,
animation: true,
avatar: false,
avatarShape: 'circle',
title: false,
titleWidth: '60%',
paragraph: true,
paragraphRows: 4,
fragmentable: false
};
exports.default = Skeleton;