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

DNB Eufemia Design System UI Library

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import React from 'react';
import classnames from 'classnames';
import Space from "../space/Space.js";
function FlexItem(props) {
  const {
    element = 'div',
    className,
    grow,
    shrink,
    alignSelf,
    size,
    style,
    children,
    ...rest
  } = props;
  const cn = classnames('dnb-flex-item', grow && 'dnb-flex-item--grow', shrink && 'dnb-flex-item--shrink', alignSelf && `dnb-flex-item--align-self-${alignSelf}`, size && 'dnb-flex-item--responsive');
  const isValidSize = React.useCallback(size => {
    return typeof size === 'number' || size === 'auto';
  }, []);
  const spaceStyles = {};
  if (size) {
    if (isValidSize(size)) {
      spaceStyles['--size--default'] = size;
    } else {
      const sizes = size;
      for (const key in sizes) {
        if (isValidSize(size[key])) {
          spaceStyles[`--${key}`] = size[key];
        }
      }
    }
  }
  if (Object.keys(spaceStyles).length) {
    return React.createElement(Space, {
      element: element,
      className: cn,
      style: spaceStyles
    }, React.createElement(Space, _extends({
      className: classnames('dnb-flex-item__spacer', className),
      style: style
    }, rest), children));
  }
  return React.createElement(Space, _extends({
    element: element,
    className: classnames(cn, className),
    style: style
  }, rest), children);
}
FlexItem._supportsSpacingProps = true;
export default FlexItem;
//# sourceMappingURL=Item.js.map