@dnb/eufemia/cjs/components/flex/Container.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
exports.pickFlexContainerProps = pickFlexContainerProps;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Space = _interopRequireDefault(require("../space/Space"));
var _elements = require("../../elements");
var _useMedia = _interopRequireDefault(require("../../shared/useMedia"));
var _utils = require("./utils");
const _excluded = ["spacing", "gap", "rowGap"],
  _excluded2 = ["className", "style", "children", "element", "direction", "wrap", "sizeCount", "rowGap", "justify", "align", "alignSelf", "divider", "gap", "breakpoints", "queries"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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], -1 === t.indexOf(o) && {}.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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
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; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
const propNames = ['direction', 'wrap', 'justify', 'align', 'divider', 'spacing', 'gap'];
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 = (0, _react.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 (0, _utils.isHeadingElement)(child) || i > 0 && (0, _utils.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
  } = (0, _useMedia.default)({
    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 && (0, _utils.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 = (0, _utils.getSpaceValue)(end, previousChild)) !== null && _getSpaceValue !== void 0 ? _getSpaceValue : spacing;
      startSpacing = (_getSpaceValue2 = (0, _utils.getSpaceValue)(start, child)) !== null && _getSpaceValue2 !== void 0 ? _getSpaceValue2 : spacing;
      return _react.default.createElement(_react.default.Fragment, {
        key: `element-${i}`
      }, _react.default.createElement(_elements.Hr, {
        top: !isFirst ? spaceAboveLine : 0,
        space: 0,
        className: "dnb-flex-container__hr"
      }), (0, _utils.renderWithSpacing)(child, {
        space: {
          [start]: startSpacing,
          [end]: endSpacing
        }
      }), divider === 'line-framed' && isLast && _react.default.createElement(_elements.Hr, {
        top: spaceAboveLine,
        space: 0,
        className: "dnb-flex-container__hr"
      }));
    }
    if (isFirst && direction !== 'horizontal') {
      startSpacing = 0;
    } else {
      var _ref4, _getSpaceValue3;
      startSpacing = (_ref4 = (_getSpaceValue3 = (0, _utils.getSpaceValue)(start, child)) !== null && _getSpaceValue3 !== void 0 ? _getSpaceValue3 : (0, _utils.getSpaceValue)(end, previousChild)) !== null && _ref4 !== void 0 ? _ref4 : spacing;
    }
    if (_react.default.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 (0, _utils.renderWithSpacing)(child, {
      key: (child === null || child === void 0 ? void 0 : child['key']) || `element-${i}`,
      space
    });
  });
  const n = 'dnb-flex-container';
  const rowGapClass = (0, _react.useMemo)(() => {
    if (rowGap !== false && direction === 'horizontal') {
      return `${n}--row-gap-${rowGap !== null && rowGap !== void 0 ? rowGap : 'small'}`;
    }
    return undefined;
  }, [direction, rowGap]);
  const cn = (0, _classnames.default)('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.default.createElement(_Space.default, _extends({
    element: element,
    className: cn,
    "data-media-key": mediaKey,
    style: hasSizeProp ? _objectSpread({
      '--sizeCount': sizeCount
    }, style) : style
  }, rest), content);
}
function wrapChildren(props, children) {
  return _react.default.Children.toArray(children).map(child => {
    if (_react.default.isValidElement(child) && child.type['_supportsSpacingProps'] === 'children') {
      return _react.default.cloneElement(child, child.props, _react.default.createElement(FlexContainer, props, child.props.children));
    }
    return child;
  });
}
function replaceRootFragment(children) {
  const firstChild = children[0];
  if (_react.default.Children.count(children) === 1 && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.type) === _react.Fragment) {
    var _firstChild$props;
    return _react.default.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;
var _default = exports.default = FlexContainer;
//# sourceMappingURL=Container.js.map