@wix/design-system
Version:
@wix/design-system
28 lines • 1.68 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './SkeletonCircle.st.css.js';
import { DEFAULT_DIAMETER } from './SkeletonCircle.constants';
import { DEFAULT_SKIN } from '../SkeletonGroup/SkeletonGroup.constants';
import Box from '../Box';
import { SkeletonGroupContext } from '../SkeletonGroup';
/** SkeletonCircle */
function SkeletonCircle({ dataHook, className, diameter = DEFAULT_DIAMETER, margin, marginLeft, marginRight, marginTop, marginBottom, }) {
return (React.createElement(SkeletonGroupContext.Consumer, null, context => {
const skin = context?.skin || DEFAULT_SKIN;
return (React.createElement("div", { "data-hook": dataHook, className: className, "data-diameter": diameter, "data-skin": skin },
React.createElement(Box, { width: diameter, height: diameter, margin: margin, marginLeft: marginLeft, marginRight: marginRight, marginTop: marginTop, marginBottom: marginBottom, className: st(classes.root, { skin }) })));
}));
}
SkeletonCircle.displayName = 'SkeletonCircle';
SkeletonCircle.propTypes = {
dataHook: PropTypes.string,
className: PropTypes.string,
diameter: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
margin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
marginTop: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
marginRight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
marginBottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
marginLeft: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};
export default SkeletonCircle;
//# sourceMappingURL=SkeletonCircle.js.map