@zohodesk/components
Version:
In this Package, we Provide Some Basic Components to Build Web App
80 lines (79 loc) • 2.81 kB
JavaScript
import React, { useRef, useContext } from 'react';
import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
import Modal from "../Modal/Modal"; // 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
} = props;
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, {
onClose: onClose,
elementRef: dropBoxRef,
needAutoFocus: needAutoFocus,
needRestoreFocus: needRestoreFocus,
needListNavigation: needListNavigation,
needFocusLoop: needFocusLoop,
needEnterAction: needEnterAction,
...focusScopeProps
}, /*#__PURE__*/React.createElement(DropBoxElement, {
isModel: isModel,
direction: direction,
...props,
zIndexStyle: zIndexStyle,
subContainerRef: dropBoxRef
})) : /*#__PURE__*/React.createElement(DropBoxElement, {
isModel: isModel,
subContainerRef: dropBoxRef,
direction: direction,
...props,
zIndexStyle: zIndexStyle
});
return isModel && isActive ? /*#__PURE__*/React.createElement(Modal, {
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(Modal, {
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;