@zohodesk/layout/es/Flex/Box.js

Unified Component Library - Layout

import React from 'react';
import { BoxProps as propTypes } from "./props/propTypes";
import { BoxDefaultProps as defaultProps } from "./props/defaultProps";
/* eslint css-modules/no-unused-class: 0 */

import { createProps, setProps } from "./utils";
import style from "./css/Flex.module.css";
import styleLegacy from "./css/Layout.module.css";
/* eslint-disable  react/no-unused-prop-types*/

function getBoxClassNames(props) {
  const {
    hidden,
    className,
    flexible,
    adjust,
    isFirst,
    isLast,
    shrink,
    column,
    align,
    scroll,
    preventParentScroll
  } = props;
  const modificators = [];

  if (flexible && !adjust) {
    modificators.push(style['flexible']);
    modificators.push(style['basis_zero']);
  } else if (flexible && adjust) {
    modificators.push(style['flexible']);
  }

  if (isFirst) {
    modificators.push(styleLegacy['first']);
  }

  if (isLast) {
    modificators.push(styleLegacy['last']);
  }

  if (adjust) {
    modificators.push(style['basis_auto']);
  }

  if (shrink) {
    modificators.push(style['shrink']);
  } else {
    modificators.push(style['noShrink']);
  }

  if (hidden) {
    hidden.forEach(key => {
      modificators.push(styleLegacy[`hidden-screen-${key}`]);
    });
  }

  if (column) {
    modificators.push(styleLegacy[`col-${column}`]);
  }

  if (align) {
    let alignClassMapping = {
      start: 'alignSelf_start',
      end: 'alignSelf_end',
      center: 'alignSelf_center'
    };
    let alignClass = alignClassMapping[align];
    modificators.push(style[alignClass]);
  }

  if (scroll) {
    let scrollClassMapping = {
      horizontal: 'scroll_horizontal',
      vertical: 'scroll_vertical',
      both: 'scroll_both',
      none: 'scroll_hidden'
    };
    let scrollClass = scrollClassMapping[scroll];
    modificators.push(style[scrollClass]);
  }

  if (preventParentScroll) {
    let ParentScrollClassMapping = {
      horizontal: 'preventScrollBubbleX',
      vertical: 'preventScrollBubbleY',
      both: 'preventScrollBubbleBoth'
    };
    let parentScrollClass = ParentScrollClassMapping[preventParentScroll];
    modificators.push(styleLegacy[parentScrollClass]);
  }

  if (className) {
    modificators.push(className);
  }

  return modificators;
}

function getBoxProps(props) {
  return createProps(propTypes, props, getBoxClassNames(props));
}

export default function Box(props) {
  let {
    tagName
  } = props;
  let componentProps = setProps({ ...getBoxProps(props)
  }, props, {
    isScrollAttribute: 'data-scroll',
    eleRef: 'ref',
    dataId: 'data-id',
    testId: 'data-test-id',
    tourId: 'data-tour',
    dataSelectorId: 'data-selector-id'
  });
  return /*#__PURE__*/React.createElement(tagName, componentProps);
}
Box.propTypes = propTypes;
Box.defaultProps = defaultProps;