@dnb/eufemia/components/flex/Item.js

DNB Eufemia Design System UI Library

import React from 'react';
import clsx from 'clsx';
import Space from "../space/Space.js";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx } from "react/jsx-runtime";
function FlexItem(props) {
  const {
    element = 'div',
    className,
    grow,
    shrink,
    alignSelf,
    span,
    style,
    children,
    ...rest
  } = props;
  const cn = clsx('dnb-flex-item', grow && 'dnb-flex-item--grow', shrink && 'dnb-flex-item--shrink', alignSelf && `dnb-flex-item--align-self-${alignSelf}`, span && 'dnb-flex-item--responsive');
  const isValidSpan = React.useCallback(span => {
    return typeof span === 'number' || span === 'auto';
  }, []);
  const spaceStyles = {};
  if (span) {
    if (isValidSpan(span)) {
      spaceStyles['--span--default'] = span;
    } else {
      const spans = span;
      for (const key in spans) {
        if (isValidSpan(span[key])) {
          spaceStyles[`--${key}`] = span[key];
        }
      }
    }
  }
  if (Object.keys(spaceStyles).length) {
    return _jsx(Space, {
      element: element,
      className: cn,
      style: spaceStyles,
      children: _jsx(Space, {
        className: clsx('dnb-flex-item__spacer', className),
        style: style,
        ...rest,
        children: children
      })
    });
  }
  return _jsx(Space, {
    element: element,
    className: clsx(cn, className),
    style: style,
    ...rest,
    children: children
  });
}
withComponentMarkers(FlexItem, {
  _supportsSpacingProps: true
});
export default FlexItem;
//# sourceMappingURL=Item.js.map