@spark-web/stack
Version:
--- title: Stack storybookPath: page-layout-stack--default isExperimentalPackage: false ---
59 lines (51 loc) • 1.91 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var box = require('@spark-web/box');
var divider = require('@spark-web/divider');
var ts = require('@spark-web/utils/ts');
var react = require('react');
var theme = require('@spark-web/theme');
var jsxRuntime = require('@emotion/react/jsx-runtime');
var alignLookup = {
left: 'start',
center: 'center',
right: 'end',
stretch: 'stretch'
};
var alignToAlignItems = theme.createResponsiveMapFn(alignLookup);
var _excluded = ["align", "children", "data", "dividers"];
var Stack = ts.forwardRefWithAs(function (_ref, forwardedRef) {
var _ref$align = _ref.align,
align = _ref$align === void 0 ? 'stretch' : _ref$align,
children = _ref.children,
data = _ref.data,
dividers = _ref.dividers,
props = _objectWithoutProperties(_ref, _excluded);
var alignItems = alignToAlignItems(align);
var rootProps = _objectSpread({
ref: forwardedRef,
alignItems: alignItems,
data: data,
display: 'flex',
flexDirection: 'column'
}, props);
// bail early w/o dividers to avoid unnecessary map
if (!dividers) {
return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, rootProps), {}, {
children: children
}));
}
// map over children to insert dividers
// remove falsy values before mapping, keeps the index in sync
var childArray = react.Children.toArray(children);
return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, rootProps), {}, {
children: childArray.map(function (child, idx) {
return jsxRuntime.jsxs(react.Fragment, {
children: [dividers && idx ? jsxRuntime.jsx(divider.Divider, {}) : null, child]
}, child.key || idx);
})
}));
});
exports.Stack = Stack;