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

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Space = _interopRequireDefault(require("../space/Space.js"));
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 = (0, _clsx.default)('dnb-grid-item', className);
  return (0, _jsxRuntime.jsx)(_Space.default, {
    element: element,
    className: cn,
    style: styleObj,
    ...rest,
    children: children
  });
}
(0, _withComponentMarkers.default)(GridItem, {
  _supportsSpacingProps: true
});
var _default = exports.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 === null || span === void 0 ? void 0 : 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