brandeur-primitives
Version:
Primitive components for brandeur
128 lines • 6.56 kB
JavaScript
var _excluded = ["style", "bg", "backgroundColor", "gap", "position", "overflow", "overflowX", "overflowY", "padding", "paddingLeft", "paddingRight", "paddingBottom", "paddingTop", "paddingX", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "paddingY", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "margin", "marginLeft", "marginRight", "marginBottom", "marginTop", "marginX", "marginInline", "marginInlineStart", "marginInlineEnd", "marginY", "marginBlock", "marginBlockStart", "marginBlockEnd", "height", "width", "minWidth", "maxWidth", "minHeight", "maxHeight", "order", "alignContent", "justifyContent", "alignItems", "alignSelf", "flex", "grow", "shrink", "basis", "direction", "display", "wrap"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
import React, { forwardRef } from 'react';
import applyMultiplier from '../utils/applyMultiplier.js';
export default function createBox(_ref) {
var El = _ref.El,
_ref$baselineGrid = _ref.baselineGrid,
baselineGrid = _ref$baselineGrid === void 0 ? 1 : _ref$baselineGrid;
return /*#__PURE__*/forwardRef(function Box(_ref2, ref) {
var style = _ref2.style,
bg = _ref2.bg,
_ref2$backgroundColor = _ref2.backgroundColor,
backgroundColor = _ref2$backgroundColor === void 0 ? bg : _ref2$backgroundColor,
gap = _ref2.gap,
position = _ref2.position,
overflow = _ref2.overflow,
overflowX = _ref2.overflowX,
overflowY = _ref2.overflowY,
padding = _ref2.padding,
paddingLeft = _ref2.paddingLeft,
paddingRight = _ref2.paddingRight,
paddingBottom = _ref2.paddingBottom,
paddingTop = _ref2.paddingTop,
paddingX = _ref2.paddingX,
_ref2$paddingInline = _ref2.paddingInline,
paddingInline = _ref2$paddingInline === void 0 ? paddingX : _ref2$paddingInline,
paddingInlineStart = _ref2.paddingInlineStart,
paddingInlineEnd = _ref2.paddingInlineEnd,
paddingY = _ref2.paddingY,
_ref2$paddingBlock = _ref2.paddingBlock,
paddingBlock = _ref2$paddingBlock === void 0 ? paddingY : _ref2$paddingBlock,
paddingBlockStart = _ref2.paddingBlockStart,
paddingBlockEnd = _ref2.paddingBlockEnd,
margin = _ref2.margin,
marginLeft = _ref2.marginLeft,
marginRight = _ref2.marginRight,
marginBottom = _ref2.marginBottom,
marginTop = _ref2.marginTop,
marginX = _ref2.marginX,
_ref2$marginInline = _ref2.marginInline,
marginInline = _ref2$marginInline === void 0 ? marginX : _ref2$marginInline,
marginInlineStart = _ref2.marginInlineStart,
marginInlineEnd = _ref2.marginInlineEnd,
marginY = _ref2.marginY,
_ref2$marginBlock = _ref2.marginBlock,
marginBlock = _ref2$marginBlock === void 0 ? marginY : _ref2$marginBlock,
marginBlockStart = _ref2.marginBlockStart,
marginBlockEnd = _ref2.marginBlockEnd,
height = _ref2.height,
width = _ref2.width,
minWidth = _ref2.minWidth,
maxWidth = _ref2.maxWidth,
minHeight = _ref2.minHeight,
maxHeight = _ref2.maxHeight,
order = _ref2.order,
alignContent = _ref2.alignContent,
justifyContent = _ref2.justifyContent,
_ref2$alignItems = _ref2.alignItems,
alignItems = _ref2$alignItems === void 0 ? 'stretch' : _ref2$alignItems,
alignSelf = _ref2.alignSelf,
flex = _ref2.flex,
grow = _ref2.grow,
shrink = _ref2.shrink,
_ref2$basis = _ref2.basis,
basis = _ref2$basis === void 0 ? 'auto' : _ref2$basis,
_ref2$direction = _ref2.direction,
direction = _ref2$direction === void 0 ? 'column' : _ref2$direction,
_ref2$display = _ref2.display,
display = _ref2$display === void 0 ? 'flex' : _ref2$display,
wrap = _ref2.wrap,
props = _objectWithoutProperties(_ref2, _excluded);
var multiplier = applyMultiplier(baselineGrid);
return /*#__PURE__*/React.createElement(El, _extends({}, props, {
ref: ref,
style: [{
boxSizing: 'border-box',
backgroundColor: backgroundColor,
flexDirection: direction,
flexWrap: wrap,
flexGrow: grow,
flexShrink: shrink,
flexBasis: basis,
flex: flex,
justifyContent: justifyContent,
alignContent: alignContent,
alignItems: alignItems,
alignSelf: alignSelf,
order: order,
display: display,
maxWidth: maxWidth,
minWidth: minWidth,
width: width,
maxHeight: maxHeight,
minHeight: minHeight,
height: height,
position: position,
overflow: overflow,
overflowX: overflowX,
overflowY: overflowY,
gap: multiplier(gap),
padding: multiplier(padding),
paddingLeft: multiplier(paddingLeft),
paddingRight: multiplier(paddingRight),
paddingBottom: multiplier(paddingBottom),
paddingTop: multiplier(paddingTop),
paddingInline: multiplier(paddingInline),
paddingInlineStart: multiplier(paddingInlineStart),
paddingInlineEnd: multiplier(paddingInlineEnd),
paddingBlock: multiplier(paddingBlock),
paddingBlockStart: multiplier(paddingBlockStart),
paddingBlockEnd: multiplier(paddingBlockEnd),
margin: multiplier(margin),
marginLeft: multiplier(marginLeft),
marginRight: multiplier(marginRight),
marginBottom: multiplier(marginBottom),
marginTop: multiplier(marginTop),
marginInline: multiplier(marginInline),
marginInlineStart: multiplier(marginInlineStart),
marginInlineEnd: multiplier(marginInlineEnd),
marginBlock: multiplier(marginBlock),
marginBlockStart: multiplier(marginBlockStart),
marginBlockEnd: multiplier(marginBlockEnd)
}, style]
}));
});
}