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

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useRef, useContext } from 'react';
import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
import Portal from "../Modal/Portal/Portal"; // import { getLibraryConfig } from '../Provider/Config';

import LibraryContext from "../Provider/LibraryContextInit";
import cssJSLogic from "./css/cssJSLogic";
import DropBoxElement from "./DropBoxElement/DropBoxElement";
import { DropBoxDefaultProps } from "./props/defaultProps";
import { DropBoxPropTypes } from "./props/propTypes";
import { stopPropagation } from "./../utils/Common";
import isMobilePopover from "./utils/isMobilePopover";
import style from "./css/DropBox.module.css";
export default function DropBox(props) {
  const dropBoxRef = useRef(null);
  const DropBoxContext = useContext(LibraryContext);
  const {
    needResponsive,
    portalId,
    isActive,
    isAbsolutePositioningNeeded,
    isRestrictScroll,
    needFocusScope,
    onClose,
    customProps,
    getSubContainerRef
  } = props;

  const setDropBoxRef = ele => {
    getSubContainerRef && getSubContainerRef(ele);
    dropBoxRef.current = ele;
  };

  const {
    focusScopeProps = {}
  } = customProps;
  const {
    needAutoFocus = true,
    needRestoreFocus = true,
    needListNavigation = true,
    needFocusLoop = false,
    needEnterAction = true
  } = focusScopeProps;
  const {
    direction
  } = DropBoxContext || {};
  let isModel = isMobilePopover(needResponsive);
  const {
    zIndexStyle
  } = cssJSLogic(props);
  const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, _extends({
    onClose: onClose,
    elementRef: dropBoxRef,
    needAutoFocus: needAutoFocus,
    needRestoreFocus: needRestoreFocus,
    needListNavigation: needListNavigation,
    needFocusLoop: needFocusLoop,
    needEnterAction: needEnterAction
  }, focusScopeProps), /*#__PURE__*/React.createElement(DropBoxElement, _extends({
    isModel: isModel,
    direction: direction
  }, props, {
    zIndexStyle: zIndexStyle,
    getSubContainerRef: setDropBoxRef
  }))) : /*#__PURE__*/React.createElement(DropBoxElement, _extends({
    isModel: isModel,
    getSubContainerRef: setDropBoxRef,
    direction: direction
  }, props, {
    zIndexStyle: zIndexStyle
  }));
  return isModel && isActive ? /*#__PURE__*/React.createElement(Portal, {
    portalId: portalId
  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: `${style.freezeLayer} ${style.freeze}`,
    style: zIndexStyle,
    onClick: stopPropagation
  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Portal, {
    portalId: portalId
  }, /*#__PURE__*/React.createElement(React.Fragment, null, isRestrictScroll ? /*#__PURE__*/React.createElement("div", {
    className: style.freezeLayer,
    style: zIndexStyle,
    onClick: stopPropagation
  }) : null, dropBoxEle)) : dropBoxEle;
}
DropBox.propTypes = DropBoxPropTypes;
DropBox.defaultProps = DropBoxDefaultProps;