@dnb/eufemia/es/components/grid/Item.js

DNB Eufemia Design System UI Library

import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import classnames from 'classnames';
import Space from "../space/Space.js";
const media = ['small', 'medium', 'large'];
function GridItem(props) {
  const {
    element = 'div',
    span,
    className,
    style,
    children,
    ...rest
  } = props;
  const styleObj = {
    ...compute(span, 'c'),
    ...style
  };
  const cn = classnames('dnb-grid-item', className);
  return React.createElement(Space, _extends({
    element: element,
    className: cn,
    style: styleObj
  }, rest), children);
}
GridItem._supportsSpacingProps = true;
export default GridItem;
function compute(span, modifier) {
  if (!span) {
    return null;
  }
  const result = {};
  const collect = (media, values) => {
    values.forEach((value, i) => {
      const pos = i === 0 ? 's' : 'e';
      if (i === 1 && value > 0) {
        value += 1;
      }
      if (value === 'end') {
        value = '-1';
      }
      result[makeStyle(media, pos)] = value;
    });
  };
  if (Array.isArray(span)) {
    media.forEach(media => {
      collect(media, span);
    });
  } else {
    for (const media in span) {
      const values = span?.[media];
      if (values === 'full') {
        result[makeStyle(media, 's')] = '1';
        result[makeStyle(media, 'e')] = '-1';
      } else if (Array.isArray(values)) {
        collect(media, values);
      }
    }
  }
  return result;
  function makeStyle(media, pos) {
    return `--${media}-${modifier}-${pos}`;
  }
}
//# sourceMappingURL=Item.js.map