wix-style-react
Version:
wix-style-react
245 lines (216 loc) • 12.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.spacingUnit = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _colors = require('../colors.scss');
var _colors2 = _interopRequireDefault(_colors);
var _Box = require('./Box.scss');
var _Box2 = _interopRequireDefault(_Box);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
/** Defined according to the design system */
var spacingUnit = exports.spacingUnit = 6;
var directions = {
horizontal: _Box2.default.horizontal,
vertical: _Box2.default.vertical
};
var horizontalAlignmentValues = {
left: _Box2.default.left,
center: _Box2.default.center,
right: _Box2.default.right,
'space-between': _Box2.default.spaceBetween
};
var verticalAlignmentValues = {
top: _Box2.default.top,
middle: _Box2.default.middle,
bottom: _Box2.default.bottom,
'space-between': _Box2.default.spaceBetween
};
var spacingValues = {
tiny: spacingUnit + 'px',
small: spacingUnit * 2 + 'px',
medium: spacingUnit * 3 + 'px',
large: spacingUnit * 4 + 'px'
};
/** In case the value is a number, it's multiplied by the defined spacing unit.
* Otherwise - there're two options:
* 1. A predefined spacing value with semantic name (tiny, small, etc.)
* 2. Space-separated values that are represented by a string (for example: "3px 3px")
* */
var formatSpacingValue = function formatSpacingValue(value) {
return isFinite(value) ? value * spacingUnit : spacingValues[value] || '' + value;
};
var Box = function Box(_ref) {
var _classNames;
var dataHook = _ref.dataHook,
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, ['dataHook', '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 rootClassNames = (0, _classnames2.default)(_Box2.default.root, className, (_classNames = {}, _defineProperty(_classNames, _Box2.default.inline, inline), _defineProperty(_classNames, directions[direction], direction), _defineProperty(_classNames, horizontalAlignmentValues[align], align), _defineProperty(_classNames, verticalAlignmentValues[verticalAlign], verticalAlign), _classNames));
var rootStyles = _extends({}, style, {
// Spacing
padding: formatSpacingValue(padding),
paddingTop: formatSpacingValue(paddingTop),
paddingRight: formatSpacingValue(paddingRight),
paddingBottom: formatSpacingValue(paddingBottom),
paddingLeft: formatSpacingValue(paddingLeft),
margin: formatSpacingValue(margin),
marginTop: formatSpacingValue(marginTop),
marginRight: formatSpacingValue(marginRight),
marginBottom: formatSpacingValue(marginBottom),
marginLeft: formatSpacingValue(marginLeft),
// Sizing
minWidth: '' + minWidth,
maxWidth: '' + maxWidth,
width: '' + width,
minHeight: '' + minHeight,
maxHeight: '' + maxHeight,
height: '' + height,
// Styling
color: _colors2.default[color] || color,
backgroundColor: _colors2.default[backgroundColor] || backgroundColor,
border: border }, borderColor && {
borderColor: _colors2.default[borderColor] || borderColor
}, borderTopColor && {
borderTopColor: _colors2.default[borderTopColor] || borderTopColor
}, borderRightColor && {
borderRightColor: _colors2.default[borderRightColor] || borderRightColor
}, borderBottomColor && {
borderBottomColor: _colors2.default[borderBottomColor] || borderBottomColor
}, borderLeftColor && {
borderLeftColor: _colors2.default[borderLeftColor] || borderLeftColor
}, nativeStyles);
return _react2.default.createElement(
'div',
{ 'data-hook': dataHook, className: rootClassNames, style: rootStyles },
children
);
};
Box.displayName = 'Box';
Box.propTypes = {
/** Any element to be rendered inside */
children: _propTypes2.default.node.isRequired,
/** Defines if the box behaves as an inline element */
inline: _propTypes2.default.bool,
/** Defines how the children are ordered (horizontally or vertically) */
direction: _propTypes2.default.oneOf(Object.keys(directions)),
/** Defines how the children are aligned according to the X axis */
align: _propTypes2.default.oneOf(Object.keys(horizontalAlignmentValues)),
/** Defines how the children are aligned according to the Y axis */
verticalAlign: _propTypes2.default.oneOf(Object.keys(verticalAlignmentValues)),
/** Sets padding on all sides.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* or a string of space-separated values ("3px 3px") */
padding: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/** Sets padding on the top.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* or a string of space-separated values ("3px 3px") */
paddingTop: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/** Sets padding on the right.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* or a string of space-separated values ("3px 3px") */
paddingRight: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/** Sets padding on the bottom.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* or a string of space-separated values ("3px 3px") */
paddingBottom: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/** Sets padding on the left.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* or a string of space-separated values ("3px 3px") */
paddingLeft: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/** Sets margin on all sides.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* or a string of space-separated values ("3px 3px") */
margin: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/** Sets margin on the top.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* or a string of space-separated values ("3px 3px") */
marginTop: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/** Sets margin on the right.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* or a string of space-separated values ("3px 3px") */
marginRight: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/** Sets margin on the bottom.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* or a string of space-separated values ("3px 3px") */
marginBottom: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/** Sets margin on the left.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* or a string of space-separated values ("3px 3px") */
marginLeft: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/** Sets the minimum width of the box (pixels) */
minWidth: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/** Sets the maximum width of the box (pixels) */
maxWidth: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/** Sets the width of the box (pixels) */
width: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/** Sets the minimum height of the box (pixels) */
minHeight: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/** Sets the maximum height of the box (pixels) */
maxHeight: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/** Sets the height of the box (pixels) */
height: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/** Sets a text color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
color: _propTypes2.default.string,
/** Sets a background color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
backgroundColor: _propTypes2.default.string,
/** Sets a border color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderColor: _propTypes2.default.string,
/** Sets a border top color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderTopColor: _propTypes2.default.string,
/** Sets a border right color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderRightColor: _propTypes2.default.string,
/** Sets a border bottom color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderBottomColor: _propTypes2.default.string,
/** Sets a border left color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderLeftColor: _propTypes2.default.string,
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes2.default.string
};
Box.defaultProps = {
direction: 'horizontal',
inline: false
};
exports.default = Box;