@zohodesk/layout/es/Flex/css/cssJSLogic.js

Unified Component Library - Layout

import compileClassNames from '@zohodesk/utils/es/compileClassNames';
import mergeStyle from '@zohodesk/utils/es/mergeStyle';
import style from "./Flex.module.css";
import { DISPLAY, SCROLL, SIZE, GROW, SHRINK, BASIS } from "../constants";
/**
 * container classname based on js state
 * @param {object} props flex props
 * @returns {string} classnames string with space separate
 */

export default function ({
  props
}) {
  const {
    customStyle,
    $ui_displayMode,
    $ui_direction,
    $flag_flexible,
    $flag_shrink,
    $ui_alignItems,
    $ui_justifyContent,
    $ui_alignContent,
    $ui_alignSelf,
    $ui_basisMode,
    $ui_scroll,
    $ui_wrapMode,
    $flag_fullsize,
    $ui_className
  } = props;
  const mergedStyle = mergeStyle(style, customStyle);
  const alignItemsClassname = `alignItems_${$ui_alignItems}`;
  const justifyContentClassname = `justifyContent_${$ui_justifyContent}`;
  const alignContentClassname = `alignContent_${$ui_alignContent}`;
  const alignSelfClassname = `alignSelf_${$ui_alignSelf}`;
  const basisClassname = `basis_${$ui_basisMode}`;
  const overFlow = `scroll_${$ui_scroll}`;
  const flexClass = compileClassNames({
    [mergedStyle.flex]: $ui_displayMode === 'flex',
    [mergedStyle.inlineFlex]: $ui_displayMode === 'inline',
    [mergedStyle[$ui_direction]]: !!$ui_direction && !!$ui_displayMode,
    [mergedStyle[alignItemsClassname]]: !!$ui_alignItems && !!$ui_displayMode,
    [mergedStyle[justifyContentClassname]]: !!$ui_justifyContent && !!$ui_displayMode,
    [mergedStyle[alignContentClassname]]: !!$ui_alignContent && !!$ui_displayMode,
    [mergedStyle[$ui_wrapMode]]: !!$ui_wrapMode && !!$ui_displayMode,
    [mergedStyle.flexible]: $flag_flexible,
    [mergedStyle[alignSelfClassname]]: !!$ui_alignSelf,
    [mergedStyle.basis_zero]: $ui_basisMode === undefined && $flag_flexible,
    [mergedStyle[basisClassname]]: !!$ui_basisMode,
    [mergedStyle.noShrink]: $flag_shrink === false,
    [mergedStyle.shrink]: $flag_shrink === true || $flag_shrink === undefined && $flag_flexible,
    [mergedStyle[overFlow]]: !!$ui_scroll && $ui_scroll !== SCROLL.NONE,
    [mergedStyle.fullSize]: $flag_fullsize,
    [$ui_className]: !!$ui_className
  });
  return {
    flexClass
  };
}
export function flexContainerCssJSLogic({
  props
}) {
  const {
    display,
    direction,
    alignItems,
    justifyContent,
    alignContent,
    scroll,
    wrap,
    size,
    gap,
    columnGap,
    rowGap,
    customClass
  } = props;
  const flexContainerClass = compileClassNames({
    [style.flex]: display === DISPLAY.FLEX,
    [style.inlineFlex]: display === DISPLAY.INLINE_FLEX,
    [style[direction]]: !!direction,
    [style[`alignItems_${alignItems}`]]: !!alignItems,
    [style[`justifyContent_${justifyContent}`]]: !!justifyContent,
    [style[`alignContent_${alignContent}`]]: !!alignContent,
    [style[wrap]]: !!wrap,
    [style[`scroll_${scroll}`]]: !!scroll && scroll !== SCROLL.NONE,
    [style.fullSize]: size === SIZE.COVER,
    [style[`gap_${gap}`]]: !!gap,
    [style[`columnGap_${columnGap}`]]: !!columnGap,
    [style[`rowGap_${rowGap}`]]: !!rowGap,
    [customClass]: !!customClass
  });
  return {
    flexContainerClass
  };
}
export function flexItemCssJSLogic({
  props
}) {
  const {
    grow,
    shrink,
    alignSelf,
    scroll,
    basis,
    customClass
  } = props;
  const flexItemClass = compileClassNames({
    [style.flexible]: grow == GROW.GROW,
    [style.noShrink]: shrink == SHRINK.NO_SHRINK,
    [style.shrink]: shrink == SHRINK.SHRINK || shrink === undefined && grow == GROW.GROW,
    [style[`alignSelf_${alignSelf}`]]: !!alignSelf,
    [style[`scroll_${scroll}`]]: !!scroll && scroll !== SCROLL.NONE,
    [style.basis_auto]: basis === BASIS.AUTO,
    [style.basis_zero]: basis == BASIS.ZERO || basis === undefined && grow == GROW.GROW,
    [customClass]: !!customClass
  });
  return {
    flexItemClass
  };
}