Buckets:
| 'use client'; | |
| import _extends from "@babel/runtime/helpers/esm/extends"; | |
| import * as React from 'react'; | |
| import { unstable_ownerDocument as ownerDocument, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback, unstable_createChainedFunction as createChainedFunction } from '@mui/utils'; | |
| import extractEventHandlers from '@mui/utils/extractEventHandlers'; | |
| import { ModalManager, ariaHidden } from './ModalManager'; | |
| function getContainer(container) { | |
| return typeof container === 'function' ? container() : container; | |
| } | |
| function getHasTransition(children) { | |
| return children ? children.props.hasOwnProperty('in') : false; | |
| } | |
| // A modal manager used to track and manage the state of open Modals. | |
| // Modals don't open on the server so this won't conflict with concurrent requests. | |
| const defaultManager = new ModalManager(); | |
| /** | |
| * | |
| * Demos: | |
| * | |
| * - [Modal](https://mui.com/base-ui/react-modal/#hook) | |
| * | |
| * API: | |
| * | |
| * - [useModal API](https://mui.com/base-ui/react-modal/hooks-api/#use-modal) | |
| */ | |
| function useModal(parameters) { | |
| const { | |
| container, | |
| disableEscapeKeyDown = false, | |
| disableScrollLock = false, | |
| // @ts-ignore internal logic - Base UI supports the manager as a prop too | |
| manager = defaultManager, | |
| closeAfterTransition = false, | |
| onTransitionEnter, | |
| onTransitionExited, | |
| children, | |
| onClose, | |
| open, | |
| rootRef | |
| } = parameters; | |
| // @ts-ignore internal logic | |
| const modal = React.useRef({}); | |
| const mountNodeRef = React.useRef(null); | |
| const modalRef = React.useRef(null); | |
| const handleRef = useForkRef(modalRef, rootRef); | |
| const [exited, setExited] = React.useState(!open); | |
| const hasTransition = getHasTransition(children); | |
| let ariaHiddenProp = true; | |
| if (parameters['aria-hidden'] === 'false' || parameters['aria-hidden'] === false) { | |
| ariaHiddenProp = false; | |
| } | |
| const getDoc = () => ownerDocument(mountNodeRef.current); | |
| const getModal = () => { | |
| modal.current.modalRef = modalRef.current; | |
| modal.current.mount = mountNodeRef.current; | |
| return modal.current; | |
| }; | |
| const handleMounted = () => { | |
| manager.mount(getModal(), { | |
| disableScrollLock | |
| }); | |
| // Fix a bug on Chrome where the scroll isn't initially 0. | |
| if (modalRef.current) { | |
| modalRef.current.scrollTop = 0; | |
| } | |
| }; | |
| const handleOpen = useEventCallback(() => { | |
| const resolvedContainer = getContainer(container) || getDoc().body; | |
| manager.add(getModal(), resolvedContainer); | |
| // The element was already mounted. | |
| if (modalRef.current) { | |
| handleMounted(); | |
| } | |
| }); | |
| const isTopModal = React.useCallback(() => manager.isTopModal(getModal()), [manager]); | |
| const handlePortalRef = useEventCallback(node => { | |
| mountNodeRef.current = node; | |
| if (!node) { | |
| return; | |
| } | |
| if (open && isTopModal()) { | |
| handleMounted(); | |
| } else if (modalRef.current) { | |
| ariaHidden(modalRef.current, ariaHiddenProp); | |
| } | |
| }); | |
| const handleClose = React.useCallback(() => { | |
| manager.remove(getModal(), ariaHiddenProp); | |
| }, [ariaHiddenProp, manager]); | |
| React.useEffect(() => { | |
| return () => { | |
| handleClose(); | |
| }; | |
| }, [handleClose]); | |
| React.useEffect(() => { | |
| if (open) { | |
| handleOpen(); | |
| } else if (!hasTransition || !closeAfterTransition) { | |
| handleClose(); | |
| } | |
| }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]); | |
| const createHandleKeyDown = otherHandlers => event => { | |
| var _otherHandlers$onKeyD; | |
| (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event); | |
| // The handler doesn't take event.defaultPrevented into account: | |
| // | |
| // event.preventDefault() is meant to stop default behaviors like | |
| // clicking a checkbox to check it, hitting a button to submit a form, | |
| // and hitting left arrow to move the cursor in a text input etc. | |
| // Only special HTML elements have these default behaviors. | |
| if (event.key !== 'Escape' || event.which === 229 || | |
| // Wait until IME is settled. | |
| !isTopModal()) { | |
| return; | |
| } | |
| if (!disableEscapeKeyDown) { | |
| // Swallow the event, in case someone is listening for the escape key on the body. | |
| event.stopPropagation(); | |
| if (onClose) { | |
| onClose(event, 'escapeKeyDown'); | |
| } | |
| } | |
| }; | |
| const createHandleBackdropClick = otherHandlers => event => { | |
| var _otherHandlers$onClic; | |
| (_otherHandlers$onClic = otherHandlers.onClick) == null || _otherHandlers$onClic.call(otherHandlers, event); | |
| if (event.target !== event.currentTarget) { | |
| return; | |
| } | |
| if (onClose) { | |
| onClose(event, 'backdropClick'); | |
| } | |
| }; | |
| const getRootProps = (otherHandlers = {}) => { | |
| const propsEventHandlers = extractEventHandlers(parameters); | |
| // The custom event handlers shouldn't be spread on the root element | |
| delete propsEventHandlers.onTransitionEnter; | |
| delete propsEventHandlers.onTransitionExited; | |
| const externalEventHandlers = _extends({}, propsEventHandlers, otherHandlers); | |
| return _extends({ | |
| role: 'presentation' | |
| }, externalEventHandlers, { | |
| onKeyDown: createHandleKeyDown(externalEventHandlers), | |
| ref: handleRef | |
| }); | |
| }; | |
| const getBackdropProps = (otherHandlers = {}) => { | |
| const externalEventHandlers = otherHandlers; | |
| return _extends({ | |
| 'aria-hidden': true | |
| }, externalEventHandlers, { | |
| onClick: createHandleBackdropClick(externalEventHandlers), | |
| open | |
| }); | |
| }; | |
| const getTransitionProps = () => { | |
| const handleEnter = () => { | |
| setExited(false); | |
| if (onTransitionEnter) { | |
| onTransitionEnter(); | |
| } | |
| }; | |
| const handleExited = () => { | |
| setExited(true); | |
| if (onTransitionExited) { | |
| onTransitionExited(); | |
| } | |
| if (closeAfterTransition) { | |
| handleClose(); | |
| } | |
| }; | |
| return { | |
| onEnter: createChainedFunction(handleEnter, children == null ? void 0 : children.props.onEnter), | |
| onExited: createChainedFunction(handleExited, children == null ? void 0 : children.props.onExited) | |
| }; | |
| }; | |
| return { | |
| getRootProps, | |
| getBackdropProps, | |
| getTransitionProps, | |
| rootRef: handleRef, | |
| portalRef: handlePortalRef, | |
| isTopModal, | |
| exited, | |
| hasTransition | |
| }; | |
| } | |
| export default useModal; |
Xet Storage Details
- Size:
- 6.28 kB
- Xet hash:
- 600f0efbd02baa7838ffd01aa60da2bd1841ce76133dd95c9b830f764209d7a8
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.