@zohodesk/components/es/DropBox/DropBoxElement/DropBoxElement.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

/* eslint-disable react/no-unknown-property */
import React, { useRef, useCallback } from 'react';
import useDropboxPosCalc from "./useDropboxPosCalc";
import cssJSLogic from "./css/cssJSLogic";
import { positionMapping } from '@zohodesk/dotkit/es/react/components/Popup/utils/positioning';
import { DropBoxElementDefaultProps } from "./props/defaultProps";
import { DropBoxElementPropTypes } from "./props/propTypes";
import { mergeStyle } from '@zohodesk/utils';
import style from "./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,
    getSubContainerRef,
    customStyle,
    animationStyle
  } = props;
  let isAbsolute = isAbsolutePositioningNeeded;
  const internalSubContainerRef = useRef(null);

  const FireOnAnimationEnd = () => {
    let eleClassList = internalSubContainerRef.current && internalSubContainerRef.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;
    }
  };

  const setSubContainerRef = useCallback(ele => {
    internalSubContainerRef.current = ele; // Backward compatability: legacy `subContainerRef`.

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

    getSubContainerRef && getSubContainerRef(ele);
  }, [subContainerRef, getSubContainerRef]);

  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,
    "data-box-direction": boxDirection,
    "data-arrow-position": arrowPosition,
    id: htmlId,
    role: role,
    "aria-multiselectable": ariaMultiselectable,
    "aria-labelledby": ariaLabelledby,
    tabIndex: tabIndex,
    onAnimationEnd: isAnimate && FireOnAnimationEnd,
    "data-a11y-focus-main-area": true,
    "dot-ui-element": "dropbox"
  }, /*#__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: setSubContainerRef
  }, 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;