UNPKG

@spark-web/stack

Version:

--- title: Stack storybookPath: page-layout-stack--default isExperimentalPackage: false ---

61 lines (49 loc) 1.96 kB
'use strict'; 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('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 /*#__PURE__*/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 /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, rootProps), {}, { children: childArray.map(function (child, idx) { return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, { children: [dividers && idx ? /*#__PURE__*/jsxRuntime.jsx(divider.Divider, {}) : null, child] }, child.key || idx); }) })); }); exports.Stack = Stack;