@dnb/eufemia/components/grid/Container.js

DNB Eufemia Design System UI Library

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import _pushInstanceProperty from "core-js-pure/stable/instance/push.js";
import React from 'react';
import classnames from 'classnames';
import Space from "../space/Space.js";
function GridContainer(props) {
  const {
    columns,
    rowGap,
    columnGap,
    style,
    className,
    children,
    element = 'div',
    ...rest
  } = props;
  const styleObj = {
    ...compute(columns),
    ...style
  };
  const n = 'dnb-grid-container';
  const unsetClasses = [];
  for (const prop in styleObj) {
    if (styleObj[prop] === 'unset') {
      const disableClass = `${n}__disabled--${prop.replace(/--([a-z]+)-.*/, '$1')}`;
      _pushInstanceProperty(unsetClasses).call(unsetClasses, disableClass);
    }
  }
  const cn = classnames(n, className, unsetClasses, columnGap && `${n}--column-gap-${columnGap === true ? 'small' : columnGap}`, rowGap && `${n}--row-gap-${rowGap === true ? 'small' : rowGap}`);
  return React.createElement(Space, _extends({
    element: element,
    className: cn,
    style: styleObj
  }, rest), children);
}
GridContainer._supportsSpacingProps = true;
export default GridContainer;
function compute(columns) {
  if (!columns) {
    return null;
  }
  const result = {};
  if (typeof columns === 'number') {
    columns = {
      small: columns,
      medium: columns,
      large: columns
    };
  }
  for (const media in columns) {
    var _columns;
    const value = (_columns = columns) === null || _columns === void 0 ? void 0 : _columns[media];
    result[`--${media}-columns`] = value || 'unset';
  }
  return result;
}
//# sourceMappingURL=Container.js.map