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

Unified Component Library - Layout

import React from 'react';
import { ContainerProps as propTypes } from "./props/propTypes";
import { ContainerDefaultProps 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 getContainerClassNames(props) {
  const {
    hidden,
    className,
    isInline,
    isCover,
    alignBox,
    alignContent,
    wrap,
    align,
    scroll,
    preventParentScroll
  } = props;
  const modificators = [];

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

  if (isInline) {
    modificators.push(style['inlineFlex']);
  } else {
    modificators.push(style['flex']);
  }

  if (isCover) {
    modificators.push(style['fullSize']);
  }

  let alignBoxClassMapping = {
    row: 'row',
    column: 'column',
    'row-reverse': 'rowReverse',
    'column-reverse': 'columnReverse'
  };
  let alignClass = alignBoxClassMapping[alignBox];
  modificators.push(style[alignClass]);

  if (alignContent) {
    let alignContentClassMapping = {
      start: 'alignContent_start',
      end: 'alignContent_end',
      center: 'alignContent_center',
      around: 'alignContent_spaceAround',
      between: 'alignContent_spaceBetween'
    };
    let alignContentClass = alignContentClassMapping[alignContent];
    modificators.push(style[alignContentClass]);
  }

  if (wrap) {
    let wrapClassMapping = {
      wrap: 'wrap',
      'wrap-reverse': 'wrapReverse'
    };
    let wrapClass = wrapClassMapping[wrap];
    modificators.push(style[wrapClass]);
  }

  if (align) {
    let alignClassMapping = {
      horizontal: style['justifyContent_center'],
      vertical: style['alignItems_center'],
      both: `${style['alignItems_center']} ${style['justifyContent_center']}`,
      between: style['justifyContent_spaceBetween'],
      around: style['justifyContent_spaceAround'],
      right: style['justifyContent_end'],
      left: style['justifyContent_start'],
      top: style['alignItems_start'],
      bottom: style['alignItems_end'],
      baseline: style['alignItems_baseline']
    };
    let alignClass = alignClassMapping[align];
    modificators.push(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 getContainerProps(props) {
  return createProps(propTypes, props, getContainerClassNames(props));
}

export default function Container(props) {
  let {
    tagName
  } = props;
  let componentProps = setProps({ ...getContainerProps(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);
}
Container.propTypes = propTypes;
Container.defaultProps = defaultProps;