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