@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
165 lines (164 loc) • 8.01 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
const _excluded = ["spacing", "gap", "rowGap"],
_excluded2 = ["className", "style", "children", "element", "direction", "wrap", "sizeCount", "rowGap", "justify", "align", "alignSelf", "divider", "gap", "breakpoints", "queries"];
import "core-js/modules/web.dom-collections.iterator.js";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { Fragment, useMemo } from 'react';
import classnames from 'classnames';
import Space from '../space/Space';
import { Hr } from '../../elements';
import useMedia from '../../shared/useMedia';
import { getSpaceValue, isHeadingElement, renderWithSpacing } from './utils';
const propNames = ['direction', 'wrap', 'justify', 'align', 'divider', 'spacing', 'gap'];
export function pickFlexContainerProps(props) {
let defaults = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
let skip = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
return _objectSpread(_objectSpread({}, defaults), Object.fromEntries(Object.entries(props !== null && props !== void 0 ? props : {}).filter(_ref => {
let [key] = _ref;
return propNames.includes(key) && !skip.includes(key);
})));
}
function handleDeprecatedProps(_ref2) {
let {
spacing,
gap,
rowGap
} = _ref2,
rest = _objectWithoutProperties(_ref2, _excluded);
return _objectSpread(_objectSpread({}, rest), {}, {
rowGap: rowGap === true ? undefined : rowGap,
gap: spacing !== null && spacing !== void 0 ? spacing : gap
});
}
function FlexContainer(props) {
const _handleDeprecatedProp = handleDeprecatedProps(props),
{
className,
style,
children,
element = 'div',
direction = 'horizontal',
wrap = true,
sizeCount = 12,
rowGap,
justify = 'flex-start',
align = 'flex-start',
alignSelf,
divider = 'space',
gap = 'small',
breakpoints,
queries
} = _handleDeprecatedProp,
rest = _objectWithoutProperties(_handleDeprecatedProp, _excluded2);
const spacing = useMemo(() => {
var _ref3;
return (_ref3 = direction === 'vertical' ? rowGap : undefined) !== null && _ref3 !== void 0 ? _ref3 : gap;
}, [direction, gap, rowGap]);
const childrenArray = replaceRootFragment(wrapChildren(props, children));
const hasHeading = childrenArray.some((child, i) => {
const previousChild = childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray[i - 1];
return isHeadingElement(child) || i > 0 && isHeadingElement(previousChild);
});
const hasSizeProp = !hasHeading && direction === 'horizontal' && childrenArray.some(child => {
var _child$props;
return (_child$props = child['props']) === null || _child$props === void 0 ? void 0 : _child$props.size;
});
const {
key: mediaKey
} = useMedia({
disabled: !hasSizeProp,
breakpoints,
queries
});
const content = childrenArray.map((child, i) => {
var _previousChild$type;
const isFirst = i === 0;
const isLast = i >= childrenArray.length - 1;
const previousChild = childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray[i - 1];
const isHeading = hasHeading && isHeadingElement(previousChild);
const start = direction === 'horizontal' ? 'left' : 'top';
const end = direction === 'horizontal' ? 'right' : 'bottom';
const endSpacing = 0;
let startSpacing = null;
if (!isHeading && (divider === 'line' && !isFirst || divider === 'line-framed')) {
var _getSpaceValue, _getSpaceValue2;
const spaceAboveLine = (_getSpaceValue = getSpaceValue(end, previousChild)) !== null && _getSpaceValue !== void 0 ? _getSpaceValue : spacing;
startSpacing = (_getSpaceValue2 = getSpaceValue(start, child)) !== null && _getSpaceValue2 !== void 0 ? _getSpaceValue2 : spacing;
return React.createElement(React.Fragment, {
key: `element-${i}`
}, React.createElement(Hr, {
top: !isFirst ? spaceAboveLine : 0,
space: 0,
className: "dnb-flex-container__hr"
}), renderWithSpacing(child, {
space: {
[start]: startSpacing,
[end]: endSpacing
}
}), divider === 'line-framed' && isLast && React.createElement(Hr, {
top: spaceAboveLine,
space: 0,
className: "dnb-flex-container__hr"
}));
}
if (isFirst && direction !== 'horizontal') {
startSpacing = 0;
} else {
var _ref4, _getSpaceValue3;
startSpacing = (_ref4 = (_getSpaceValue3 = getSpaceValue(start, child)) !== null && _getSpaceValue3 !== void 0 ? _getSpaceValue3 : getSpaceValue(end, previousChild)) !== null && _ref4 !== void 0 ? _ref4 : spacing;
}
if (React.isValidElement(previousChild) && (previousChild === null || previousChild === void 0 ? void 0 : (_previousChild$type = previousChild.type) === null || _previousChild$type === void 0 ? void 0 : _previousChild$type['_supportsSpacingProps']) === false) {
startSpacing = 0;
}
const space = direction === 'horizontal' ? {
[start]: endSpacing,
[end]: startSpacing
} : {
[start]: startSpacing,
[end]: endSpacing
};
return renderWithSpacing(child, {
key: (child === null || child === void 0 ? void 0 : child['key']) || `element-${i}`,
space
});
});
const n = 'dnb-flex-container';
const rowGapClass = useMemo(() => {
if (rowGap !== false && direction === 'horizontal') {
return `${n}--row-gap-${rowGap !== null && rowGap !== void 0 ? rowGap : 'small'}`;
}
return undefined;
}, [direction, rowGap]);
const cn = classnames('dnb-flex-container', rowGapClass, className, direction && `${n}--direction-${direction}`, justify && `${n}--justify-${justify}`, align && `${n}--align-${align}`, alignSelf && `${n}--align-self-${alignSelf}`, spacing && `${n}--spacing-${spacing}`, wrap && `${n}--wrap`, hasSizeProp && `${n}--has-size`, divider && `${n}--divider-${divider}`);
return React.createElement(Space, _extends({
element: element,
className: cn,
"data-media-key": mediaKey,
style: hasSizeProp ? _objectSpread({
'--sizeCount': sizeCount
}, style) : style
}, rest), content);
}
function wrapChildren(props, children) {
return React.Children.toArray(children).map(child => {
if (React.isValidElement(child) && child.type['_supportsSpacingProps'] === 'children') {
return React.cloneElement(child, child.props, React.createElement(FlexContainer, props, child.props.children));
}
return child;
});
}
function replaceRootFragment(children) {
const firstChild = children[0];
if (React.Children.count(children) === 1 && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.type) === Fragment) {
var _firstChild$props;
return React.Children.toArray(firstChild === null || firstChild === void 0 ? void 0 : (_firstChild$props = firstChild.props) === null || _firstChild$props === void 0 ? void 0 : _firstChild$props.children);
}
return children;
}
FlexContainer._supportsSpacingProps = true;
export default FlexContainer;
//# sourceMappingURL=Container.js.map