wix-style-react
Version:
wix-style-react
111 lines (110 loc) • 4.71 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 _SkeletonRectangleSt = require("./SkeletonRectangle.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/SkeletonRectangle/SkeletonRectangle.js";
/** SkeletonRectangle */
class SkeletonRectangle extends _react.default.PureComponent {
constructor() {
super(...arguments);
this.state = {};
}
render() {
var {
dataHook,
className,
height,
width,
margin,
marginLeft,
marginRight,
marginTop,
marginBottom
} = this.props;
return /*#__PURE__*/_react.default.createElement(_SkeletonGroup.SkeletonGroupContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 7
}
}, context => {
var skin = context && context.skin || _constants2.DEFAULT_SKIN;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: className,
"data-height": height,
"data-width": width,
"data-skin": skin,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
height: height,
width: width,
margin: margin,
marginLeft: marginLeft,
marginRight: marginRight,
marginTop: marginTop,
marginBottom: marginBottom,
backgroundColor: _constants2.SKIN_COLOR[skin],
className: (0, _SkeletonRectangleSt.st)(_SkeletonRectangleSt.classes.root, {
skin
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 15
}
}));
});
}
}
SkeletonRectangle.displayName = 'SkeletonRectangle';
SkeletonRectangle.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 width of the box (pixels) */
width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets the height of the box (pixels) */
height: _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])
};
SkeletonRectangle.defaultProps = {
height: _constants.DEFAULT_HEIGHT,
width: _constants.DEFAULT_WIDTH
};
var _default = exports.default = SkeletonRectangle;
//# sourceMappingURL=SkeletonRectangle.js.map