@zohodesk/components/es/DropBox/DropBoxElement/css/cssJSLogic.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

import { useContext } from 'react';
import LibraryContext from "../../../Provider/LibraryContextInit";
import { compileClassNames } from '@zohodesk/utils';
export default function cssJSLogic({
  props,
  style,
  customState
}) {
  const DropBoxElementContext = useContext(LibraryContext);
  const {
    boxPosition,
    boxDirection,
    boxstyle,
    needBoxStyle,
    isAbsolute
  } = customState;
  const {
    isReducedMotion
  } = DropBoxElementContext || {};
  const {
    isAnimate,
    isArrow,
    size,
    isRadius,
    animationStyle,
    isActive,
    isModel,
    isBoxPaddingNeed,
    isPadding,
    customClass,
    positionsOffset,
    targetOffset,
    zIndexStyle,
    customInlineStyle
  } = props;
  const {
    customDropBox = '',
    customMobileDropBox = '',
    customDropBoxWrap = '',
    customMobileDropBoxWrap = ''
  } = customClass;
  const animationValue = animationStyle === 'default' ? 'fadeInScale' : animationStyle; // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)

  let boxClassName = compileClassNames({
    [style.main]: true,
    [style.hidden]: !isActive,
    [style.responsive]: !!isModel,
    [style.container]: isAbsolute && !isModel,
    [style[boxPosition]]: isAbsolute && !isModel,
    [style.fixedContainer]: !isAbsolute && !isModel,
    [style[size]]: size && !isModel,
    [style.boxDirection]: !isModel && isActive && isArrow,
    [style.arrow]: !isModel && isActive && isArrow && isAbsolute,
    [style.paddingSpace]: !isModel && isActive && !isArrow && isPadding,
    [customMobileDropBoxWrap]: !!isModel,
    [customDropBoxWrap]: !isModel
  });
  let subContainerClass = compileClassNames({
    [style.subContainer]: true,
    [style.mobRadius]: !!isModel,
    [style.slideUp]: !!isModel && isActive,
    [style.shadow]: !isModel,
    [style.boxPadding]: !isModel && isBoxPaddingNeed,
    [style.radius]: !isModel && isRadius,
    [style[animationValue]]: !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle,
    [customMobileDropBox]: !!isModel,
    [customDropBox]: !isModel
  });
  let inlineStyle = !isModel ? isAbsolute ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};

  if (zIndexStyle) {
    inlineStyle = Object.assign({}, inlineStyle, zIndexStyle);
  }

  if (!isModel && !isAbsolute && size === 'default' && targetOffset && isActive) {
    inlineStyle = Object.assign({}, inlineStyle, {
      width: targetOffset.width
    });
  }

  if (customInlineStyle) {
    inlineStyle = Object.assign({}, inlineStyle, customInlineStyle);
  }

  return {
    boxClassName,
    subContainerClass,
    inlineStyle
  };
}