wix-style-react
Version:
wix-style-react
254 lines (252 loc) • 13.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.formatSingleSpacingValue = exports.formatComplexSpacingValue = exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _BoxSt = require("./Box.st.css");
var _spacingSt = require("../Foundation/stylable/spacing.st.css");
var _colorsSt = require("../Foundation/stylable/colors.st.css");
var _filterObject = require("../utils/filterObject");
var _constants = require("./constants");
var _excluded = ["dataHook", "gap", "children", "className", "style", "inline", "direction", "align", "verticalAlign", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "minWidth", "maxWidth", "width", "minHeight", "maxHeight", "height", "color", "backgroundColor", "border", "borderColor", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor", "data-hook", "flexDirection", "justifyContent", "alignItems"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Box/Box.js";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/** In case the value is a number, it's multiplied by the defined spacing unit.
* Otherwise - there are three options:
* 1. A Spacing Token - SP1, SP2, etc. - where the number is multiplied by the spacing unit.
* 2. A predefined spacing value with semantic name (tiny, small, etc.)
* 3. Space-separated values that are represented by a string (for example: "3px 3px")
* */
var formatSingleSpacingValue = value => {
if (value !== undefined) {
return formatSpacingValue(value);
}
};
exports.formatSingleSpacingValue = formatSingleSpacingValue;
var formatComplexSpacingValue = value => {
if (value !== undefined) {
return value.toString().split(' ').map(size => formatSpacingValue(size)).join(' ');
}
};
exports.formatComplexSpacingValue = formatComplexSpacingValue;
var formatSpacingValue = value => {
if (isFinite(value)) {
return "".concat(value * parseInt(_spacingSt.stVars.Spacing), "px");
}
return _spacingSt.stVars[value] || _constants.spacingValues[value] || "".concat(value);
};
var formatSizeValue = value => {
if (typeof value !== 'undefined') return isFinite(value) ? "".concat(value, "px") : "".concat(value);
};
var Box = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
var {
dataHook,
gap,
children,
className,
style,
inline = false,
direction = 'horizontal',
align,
verticalAlign,
padding,
paddingTop,
paddingRight,
paddingBottom,
paddingLeft,
margin,
marginTop,
marginRight,
marginBottom,
marginLeft,
minWidth,
maxWidth,
width,
minHeight,
maxHeight,
height,
color,
backgroundColor,
border,
borderColor,
borderTopColor,
borderRightColor,
borderBottomColor,
borderLeftColor,
// Excluded props (which are handled above and should not be spread into `style`)
'data-hook': dataHookByKebabCase,
flexDirection,
justifyContent,
alignItems
} = _ref,
nativeStyles = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var complexSpacingValues = (0, _react.useMemo)(() => Object.entries({
padding,
margin
}).reduce((accu, _ref2) => {
var [key, value] = _ref2;
return _objectSpread(_objectSpread({}, accu), {}, {
[key]: formatComplexSpacingValue(value)
});
}, {}), [padding, margin]);
var singleSpacingValues = (0, _react.useMemo)(() => Object.entries({
paddingTop,
paddingRight,
paddingBottom,
paddingLeft,
marginTop,
marginRight,
marginBottom,
marginLeft
}).reduce((accu, _ref3) => {
var [key, value] = _ref3;
return _objectSpread(_objectSpread({}, accu), {}, {
[key]: formatSingleSpacingValue(value)
});
}, {}), [paddingTop, paddingRight, paddingBottom, paddingLeft, marginTop, marginRight, marginBottom, marginLeft]);
var sizeValues = (0, _react.useMemo)(() => Object.entries({
minWidth,
maxWidth,
width,
minHeight,
maxHeight,
height
}).reduce((accu, _ref4) => {
var [key, value] = _ref4;
return _objectSpread(_objectSpread({}, accu), {}, {
[key]: formatSizeValue(value)
});
}, {}), [minWidth, maxWidth, width, minHeight, maxHeight, height]);
var rootClassNames = (0, _BoxSt.st)(_BoxSt.classes.root, {
inline,
direction,
alignItems: align,
justifyContent: verticalAlign
}, className);
var rootStyles = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), singleSpacingValues), complexSpacingValues), sizeValues), {}, {
// Styling
color: _colorsSt.stVars[color] || color,
backgroundColor: _colorsSt.stVars[backgroundColor] || backgroundColor,
border
}, borderColor && {
borderColor: _colorsSt.stVars[borderColor] || borderColor
}), borderTopColor && {
borderTopColor: _colorsSt.stVars[borderTopColor] || borderTopColor
}), borderRightColor && {
borderRightColor: _colorsSt.stVars[borderRightColor] || borderRightColor
}), borderBottomColor && {
borderBottomColor: _colorsSt.stVars[borderBottomColor] || borderBottomColor
}), borderLeftColor && {
borderLeftColor: _colorsSt.stVars[borderLeftColor] || borderLeftColor
}), nativeStyles), {}, {
[_BoxSt.vars['gap']]: formatSingleSpacingValue(gap) || 0
});
// Filter undefined values
var rootStylesFiltered = (0, _filterObject.filterObject)(rootStyles, (key, value) => typeof value !== 'undefined');
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: rootClassNames,
style: rootStylesFiltered,
ref: ref,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 210,
columnNumber: 7
}
}, children);
});
Box.displayName = 'Box';
Box.propTypes = {
/** Allows to render any component as a child item */
children: _propTypes.default.node,
/** Define styles through a classname */
className: _propTypes.default.string,
/** Defines if the box behaves as an inline element */
inline: _propTypes.default.bool,
/** Defines how the children are ordered (horizontally or vertically) */
direction: _propTypes.default.oneOf(Object.keys(_constants.directions)),
/** Defines how the children are aligned according to the X axis */
align: _propTypes.default.oneOf(Object.keys(_constants.horizontalAlignmentValues)),
/** Defines how the children are aligned according to the Y axis */
verticalAlign: _propTypes.default.oneOf(Object.keys(_constants.verticalAlignmentValues)),
/** Sets the gaps/gutters between flex items.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* a spacing token (SP1, SP2, etc.) */
gap: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets padding 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") */
padding: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets padding 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 value in pixels */
paddingTop: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets padding 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 value in pixels */
paddingRight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets padding 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 value in pixels */
paddingBottom: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets padding 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 value in pixels */
paddingLeft: _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 value in pixels */
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 value in pixels */
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 value in pixels */
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 value in pixels */
marginLeft: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets the minimum width of the box in pixels */
minWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets the maximum width of the box in pixels */
maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets the width of the box in pixels */
width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets the minimum height of the box in pixels */
minHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets the maximum height of the box in pixels */
maxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets the height of the box in pixels */
height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets a text color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
color: _propTypes.default.string,
/** Sets a background color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
backgroundColor: _propTypes.default.string,
/** Sets a border color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderColor: _propTypes.default.string,
/** Sets a border top color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderTopColor: _propTypes.default.string,
/** Sets a border right color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderRightColor: _propTypes.default.string,
/** Sets a border bottom color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderBottomColor: _propTypes.default.string,
/** Sets a border left color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderLeftColor: _propTypes.default.string,
/** Accepts HTML attributes that can be used in the tests */
dataHook: _propTypes.default.string
};
var _default = exports.default = Box;
//# sourceMappingURL=Box.js.map