wix-style-react
Version:
291 lines (245 loc) • 13.5 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
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 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) { _defineProperty(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; }
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { st, classes, vars } from './Box.st.css';
import { stVars as spacingStVars } from '../Foundation/stylable/spacing.st.css';
import { stVars as colorsStVars } from '../Foundation/stylable/colors.st.css';
import { filterObject } from '../utils/filterObject';
import { directions, horizontalAlignmentValues, spacingValues, verticalAlignmentValues } from './constants';
/** 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")
* */
export var formatSingleSpacingValue = function formatSingleSpacingValue(value) {
if (value !== undefined) {
return formatSpacingValue(value);
}
};
export var formatComplexSpacingValue = function formatComplexSpacingValue(value) {
if (value !== undefined) {
return value.toString().split(' ').map(function (size) {
return formatSpacingValue(size);
}).join(' ');
}
};
var formatSpacingValue = function formatSpacingValue(value) {
if (isFinite(value)) {
return "".concat(value * parseInt(spacingStVars.Spacing), "px");
}
return spacingStVars[value] || 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 = _objectWithoutProperties(_ref, _excluded);
var complexSpacingValues = useMemo(function () {
return Object.entries({
padding: padding,
margin: margin
}).reduce(function (accu, _ref2) {
var _ref3 = _slicedToArray(_ref2, 2),
key = _ref3[0],
value = _ref3[1];
return _objectSpread(_objectSpread({}, accu), {}, _defineProperty({}, key, formatComplexSpacingValue(value)));
}, {});
}, [padding, margin]);
var singleSpacingValues = 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 = _slicedToArray(_ref4, 2),
key = _ref5[0],
value = _ref5[1];
return _objectSpread(_objectSpread({}, accu), {}, _defineProperty({}, key, formatSingleSpacingValue(value)));
}, {});
}, [paddingTop, paddingRight, paddingBottom, paddingLeft, marginTop, marginRight, marginBottom, marginLeft]);
var sizeValues = useMemo(function () {
return Object.entries({
minWidth: minWidth,
maxWidth: maxWidth,
width: width,
minHeight: minHeight,
maxHeight: maxHeight,
height: height
}).reduce(function (accu, _ref6) {
var _ref7 = _slicedToArray(_ref6, 2),
key = _ref7[0],
value = _ref7[1];
return _objectSpread(_objectSpread({}, accu), {}, _defineProperty({}, key, formatSizeValue(value)));
}, {});
}, [minWidth, maxWidth, width, minHeight, maxHeight, height]);
var rootClassNames = st(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: colorsStVars[color] || color,
backgroundColor: colorsStVars[backgroundColor] || backgroundColor,
border: border
}, borderColor && {
borderColor: colorsStVars[borderColor] || borderColor
}), borderTopColor && {
borderTopColor: colorsStVars[borderTopColor] || borderTopColor
}), borderRightColor && {
borderRightColor: colorsStVars[borderRightColor] || borderRightColor
}), borderBottomColor && {
borderBottomColor: colorsStVars[borderBottomColor] || borderBottomColor
}), borderLeftColor && {
borderLeftColor: colorsStVars[borderLeftColor] || borderLeftColor
}), nativeStyles), {}, _defineProperty({}, vars['gap'], formatSingleSpacingValue(gap) || 0)); // Filter undefined values
var rootStylesFiltered = filterObject(rootStyles, function (key, value) {
return typeof value !== 'undefined';
});
return /*#__PURE__*/React.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.node,
/** Define styles through a classname */
className: PropTypes.string,
/** Defines if the box behaves as an inline element */
inline: PropTypes.bool,
/** Defines how the children are ordered (horizontally or vertically) */
direction: PropTypes.oneOf(Object.keys(directions)),
/** Defines how the children are aligned according to the X axis */
align: PropTypes.oneOf(Object.keys(horizontalAlignmentValues)),
/** Defines how the children are aligned according to the Y axis */
verticalAlign: PropTypes.oneOf(Object.keys(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.oneOfType([PropTypes.string, PropTypes.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.oneOfType([PropTypes.string, PropTypes.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.oneOfType([PropTypes.string, PropTypes.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.oneOfType([PropTypes.string, PropTypes.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.oneOfType([PropTypes.string, PropTypes.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.oneOfType([PropTypes.string, PropTypes.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.oneOfType([PropTypes.string, PropTypes.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.oneOfType([PropTypes.string, PropTypes.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.oneOfType([PropTypes.string, PropTypes.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.oneOfType([PropTypes.string, PropTypes.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.oneOfType([PropTypes.string, PropTypes.number]),
/** Sets the minimum width of the box in pixels */
minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Sets the maximum width of the box in pixels */
maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Sets the width of the box in pixels */
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Sets the minimum height of the box in pixels */
minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Sets the maximum height of the box in pixels */
maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Sets the height of the box in pixels */
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Sets a text color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
color: PropTypes.string,
/** Sets a background color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
backgroundColor: PropTypes.string,
/** Sets a border color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderColor: PropTypes.string,
/** Sets a border top color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderTopColor: PropTypes.string,
/** Sets a border right color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderRightColor: PropTypes.string,
/** Sets a border bottom color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderBottomColor: PropTypes.string,
/** Sets a border left color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderLeftColor: PropTypes.string,
/** Accepts HTML attributes that can be used in the tests */
dataHook: PropTypes.string
};
Box.defaultProps = {
direction: 'horizontal',
inline: false
};
export default Box;