wix-style-react
Version:
wix-style-react
102 lines (101 loc) • 4.41 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _SkeletonCircleSt = require("./SkeletonCircle.st.css");
var _constants = require("./constants");
var _constants2 = require("../SkeletonGroup/constants");
var _Box = _interopRequireDefault(require("../Box"));
var _SkeletonGroup = require("../SkeletonGroup");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/SkeletonCircle/SkeletonCircle.js";
/** SkeletonCircle */
class SkeletonCircle extends _react.default.PureComponent {
render() {
var {
dataHook,
className,
diameter,
margin,
marginLeft,
marginRight,
marginTop,
marginBottom
} = this.props;
return /*#__PURE__*/_react.default.createElement(_SkeletonGroup.SkeletonGroupContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 7
}
}, context => {
var skin = context && context.skin || _constants2.DEFAULT_SKIN;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: className,
"data-diameter": diameter,
"data-skin": skin,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
width: diameter,
height: diameter,
margin: margin,
marginLeft: marginLeft,
marginRight: marginRight,
marginTop: marginTop,
marginBottom: marginBottom,
backgroundColor: _constants2.SKIN_COLOR[skin],
className: (0, _SkeletonCircleSt.st)(_SkeletonCircleSt.classes.root, {
skin
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 15
}
}));
});
}
}
SkeletonCircle.displayName = 'SkeletonCircle';
SkeletonCircle.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes.default.string,
/** A css class to be applied to the component's root element */
className: _propTypes.default.string,
/** Sets the diameter of the box (pixels) */
diameter: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets margin on all sides.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px") */
margin: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets margin on the top.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px") */
marginTop: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets margin on the right.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px") */
marginRight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets margin on the bottom.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px") */
marginBottom: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets margin on the left.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px") */
marginLeft: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
};
SkeletonCircle.defaultProps = {
diameter: _constants.DEFAULT_DIAMETER
};
var _default = exports.default = SkeletonCircle;
//# sourceMappingURL=SkeletonCircle.js.map