@zohodesk/components/es/v1/DropBox/DropBoxElement/DropBoxElement.js

In this Package, we Provide Some Basic Components to Build Web App

import React from 'react';
import useDropboxPosCalc from "../../../DropBox/DropBoxElement/useDropboxPosCalc";
import cssJSLogic from "../../../DropBox/DropBoxElement/css/cssJSLogic";
import { positionMapping } from "../../../DropBox/DropBoxPositionMapping.js";
import { DropBoxElementDefaultProps } from "./props/defaultProps";
import { DropBoxElementPropTypes } from "./props/propTypes";
import { mergeStyle } from '@zohodesk/utils';
import style from "../../../DropBox/DropBoxElement/css/DropBoxElement.module.css";
export default function DropBoxElement(props) {
  let {
    children,
    isAnimate,
    isArrow,
    arrowPosition,
    boxPosition,
    size,
    onClick,
    isActive,
    dataId,
    dataSelectorId,
    isModel,
    isAbsolutePositioningNeeded,
    tourId,
    htmlId,
    a11y,
    tabIndex,
    palette,
    subContainerRef,
    customStyle,
    animationStyle
  } = props;
  let isAbsolute = isAbsolutePositioningNeeded;

  const FireOnAnimationEnd = () => {
    let eleClassList = subContainerRef && subContainerRef.current.classList;
    let animationStyles = animationStyle == 'default' ? style.fadeInScale : style[animationStyle];
    animationStyles.split(' ').map(rmStyle => {
      if (eleClassList && eleClassList.contains(rmStyle)) {
        eleClassList.remove(rmStyle);
      }
    });
  };

  const getRef = ele => {
    const {
      getRef,
      forwardRef
    } = props;
    getRef && getRef(ele);

    if (forwardRef) {
      forwardRef.current = ele;
    }
  };

  if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
    isAbsolute = true;
  }

  const {
    role,
    ariaMultiselectable,
    ariaLabelledby
  } = a11y;
  boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
  const boxDirection = positionMapping[boxPosition].direction;

  if (isAbsolute) {
    arrowPosition = arrowPosition ? arrowPosition : positionMapping[boxPosition].arrowPosition;
    boxPosition = positionMapping[boxPosition].positionStyle;
  } else {
    arrowPosition = positionMapping[boxPosition].arrowPosition;
  }

  const {
    arrowstyle,
    boxstyle,
    needBoxStyle
  } = useDropboxPosCalc(props);
  const mergedStyle = mergeStyle(style, customStyle);
  const {
    boxClassName,
    subContainerClass,
    inlineStyle
  } = cssJSLogic({
    props,
    style: mergedStyle,
    customState: {
      boxPosition,
      boxDirection,
      boxstyle,
      needBoxStyle,
      isAbsolute
    }
  });
  return /*#__PURE__*/React.createElement("div", {
    className: boxClassName,
    "data-id": `${dataId}`,
    "data-test-id": `${dataId}`,
    "data-selector-id": dataSelectorId,
    ref: getRef,
    style: inlineStyle,
    "data-tour": tourId,
    "data-position": boxPosition,
    id: htmlId,
    role: role,
    "aria-multiselectable": ariaMultiselectable,
    "aria-labelledby": ariaLabelledby,
    tabIndex: tabIndex,
    onAnimationEnd: isAnimate && FireOnAnimationEnd,
    "data-a11y-focus-main-area": true
  }, /*#__PURE__*/React.createElement("div", {
    tabIndex: "-1",
    className: `${subContainerClass} ${style[`${palette}Palette`]}`,
    onClick: onClick,
    "data-id": `${dataId}_subcontainer`,
    "data-test-id": `${dataId}_subcontainer`,
    "data-selector-id": `${dataSelectorId}_subcontainer`,
    ref: subContainerRef
  }, isModel ? /*#__PURE__*/React.createElement("div", {
    className: style.closeBar
  }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
    className: style[arrowPosition],
    style: arrowstyle,
    "data-id": `${dataId}_arrow`,
    "data-test-id": `${dataId}_arrow`,
    "data-selector-id": `${dataSelectorId}_arrow`
  }, /*#__PURE__*/React.createElement("div", {
    className: style.arrowShape
  })), children));
}
DropBoxElement.propTypes = DropBoxElementPropTypes;
DropBoxElement.defaultProps = DropBoxElementDefaultProps;