@wix/design-system
Version:
@wix/design-system
22 lines • 1.13 kB
JavaScript
import React from 'react';
import { st, classes } from './Skeleton.st.css.js';
import { dataHooks } from './constants';
/**
* Skeleton is a “placeholder” component.
* Used for filling up screen usually for when some async operation is ongoing.
*/
class Skeleton extends React.PureComponent {
render() {
const { dataHook, content, alignment, spacing, className } = this.props;
return (React.createElement("div", { "data-hook": dataHook, "data-alignment": alignment, "data-spacing": spacing, className: st(classes.root, { alignment, spacing }, className) }, content.map(({ type, size }, key) => (React.createElement("div", { key: key, "data-hook": dataHooks.line, className: st(classes.line, { alignment, spacing }) },
React.createElement("div", { "data-hook": dataHooks.chunk, "data-type": type, "data-size": size, className: st(classes.chunk, { size }) }))))));
}
}
Skeleton.displayName = 'Skeleton';
Skeleton.defaultProps = {
alignment: 'start',
spacing: 'medium',
content: [{ type: 'line', size: 'small' }],
};
export default Skeleton;
//# sourceMappingURL=Skeleton.js.map