wix-style-react
Version:
320 lines (257 loc) • 16.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.formatComplexSpacingValue = exports.formatSingleSpacingValue = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
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"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
/** 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 = function formatSingleSpacingValue(value) {
if (value !== undefined) {
return formatSpacingValue(value);
}
};
exports.formatSingleSpacingValue = formatSingleSpacingValue;
var formatComplexSpacingValue = function formatComplexSpacingValue(value) {
if (value !== undefined) {
return value.toString().split(' ').map(function (size) {
return formatSpacingValue(size);
}).join(' ');
}
};
exports.formatComplexSpacingValue = formatComplexSpacingValue;
var formatSpacingValue = function formatSpacingValue(value) {
if (isFinite(value)) {
return "".concat(value * parseInt(_spacingSt.stVars.Spacing), "px");
}
return _spacingSt.stVars[value] || _constants.spacingValues[value] || "".concat(value);
};
var formatSizeValue = function formatSizeValue(value) {
if (typeof value !== 'undefined') return isFinite(value) ? "".concat(value, "px") : "".concat(value);
};
var Box = function Box(_ref) {
var dataHook = _ref.dataHook,
gap = _ref.gap,
children = _ref.children,
className = _ref.className,
style = _ref.style,
inline = _ref.inline,
direction = _ref.direction,
align = _ref.align,
verticalAlign = _ref.verticalAlign,
padding = _ref.padding,
paddingTop = _ref.paddingTop,
paddingRight = _ref.paddingRight,
paddingBottom = _ref.paddingBottom,
paddingLeft = _ref.paddingLeft,
margin = _ref.margin,
marginTop = _ref.marginTop,
marginRight = _ref.marginRight,
marginBottom = _ref.marginBottom,
marginLeft = _ref.marginLeft,
minWidth = _ref.minWidth,
maxWidth = _ref.maxWidth,
width = _ref.width,
minHeight = _ref.minHeight,
maxHeight = _ref.maxHeight,
height = _ref.height,
color = _ref.color,
backgroundColor = _ref.backgroundColor,
border = _ref.border,
borderColor = _ref.borderColor,
borderTopColor = _ref.borderTopColor,
borderRightColor = _ref.borderRightColor,
borderBottomColor = _ref.borderBottomColor,
borderLeftColor = _ref.borderLeftColor,
dataHookByKebabCase = _ref['data-hook'],
flexDirection = _ref.flexDirection,
justifyContent = _ref.justifyContent,
alignItems = _ref.alignItems,
nativeStyles = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
var complexSpacingValues = (0, _react.useMemo)(function () {
return Object.entries({
padding: padding,
margin: margin
}).reduce(function (accu, _ref2) {
var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
key = _ref3[0],
value = _ref3[1];
return _objectSpread(_objectSpread({}, accu), {}, (0, _defineProperty2["default"])({}, key, formatComplexSpacingValue(value)));
}, {});
}, [padding, margin]);
var singleSpacingValues = (0, _react.useMemo)(function () {
return Object.entries({
paddingTop: paddingTop,
paddingRight: paddingRight,
paddingBottom: paddingBottom,
paddingLeft: paddingLeft,
marginTop: marginTop,
marginRight: marginRight,
marginBottom: marginBottom,
marginLeft: marginLeft
}).reduce(function (accu, _ref4) {
var _ref5 = (0, _slicedToArray2["default"])(_ref4, 2),
key = _ref5[0],
value = _ref5[1];
return _objectSpread(_objectSpread({}, accu), {}, (0, _defineProperty2["default"])({}, key, formatSingleSpacingValue(value)));
}, {});
}, [paddingTop, paddingRight, paddingBottom, paddingLeft, marginTop, marginRight, marginBottom, marginLeft]);
var sizeValues = (0, _react.useMemo)(function () {
return Object.entries({
minWidth: minWidth,
maxWidth: maxWidth,
width: width,
minHeight: minHeight,
maxHeight: maxHeight,
height: height
}).reduce(function (accu, _ref6) {
var _ref7 = (0, _slicedToArray2["default"])(_ref6, 2),
key = _ref7[0],
value = _ref7[1];
return _objectSpread(_objectSpread({}, accu), {}, (0, _defineProperty2["default"])({}, key, formatSizeValue(value)));
}, {});
}, [minWidth, maxWidth, width, minHeight, maxHeight, height]);
var rootClassNames = (0, _BoxSt.st)(_BoxSt.classes.root, {
inline: inline,
direction: 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: 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), {}, (0, _defineProperty2["default"])({}, _BoxSt.vars['gap'], formatSingleSpacingValue(gap) || 0)); // Filter undefined values
var rootStylesFiltered = (0, _filterObject.filterObject)(rootStyles, function (key, value) {
return typeof value !== 'undefined';
});
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
className: rootClassNames,
style: rootStylesFiltered
}, 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
};
Box.defaultProps = {
direction: 'horizontal',
inline: false
};
var _default = Box;
exports["default"] = _default;