1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | import * as React from 'react';
|
4 | import * as ReactDOM from 'react-dom';
|
5 | import PropTypes from 'prop-types';
|
6 | import { getThemeProps, useTheme } from '@material-ui/styles';
|
7 | import { elementAcceptingRef, HTMLElementType } from '@material-ui/utils';
|
8 | import deprecatedPropType from '../utils/deprecatedPropType';
|
9 | import ownerDocument from '../utils/ownerDocument';
|
10 | import Portal from '../Portal';
|
11 | import createChainedFunction from '../utils/createChainedFunction';
|
12 | import useForkRef from '../utils/useForkRef';
|
13 | import useEventCallback from '../utils/useEventCallback';
|
14 | import zIndex from '../styles/zIndex';
|
15 | import ModalManager, { ariaHidden } from './ModalManager';
|
16 | import TrapFocus from '../Unstable_TrapFocus';
|
17 | import SimpleBackdrop from './SimpleBackdrop';
|
18 |
|
19 | function getContainer(container) {
|
20 | container = typeof container === 'function' ? container() : container;
|
21 | return ReactDOM.findDOMNode(container);
|
22 | }
|
23 |
|
24 | function getHasTransition(props) {
|
25 | return props.children ? props.children.props.hasOwnProperty('in') : false;
|
26 | }
|
27 |
|
28 |
|
29 |
|
30 | const defaultManager = new ModalManager();
|
31 | export const styles = theme => ({
|
32 |
|
33 | root: {
|
34 | position: 'fixed',
|
35 | zIndex: theme.zIndex.modal,
|
36 | right: 0,
|
37 | bottom: 0,
|
38 | top: 0,
|
39 | left: 0
|
40 | },
|
41 |
|
42 |
|
43 | hidden: {
|
44 | visibility: 'hidden'
|
45 | }
|
46 | });
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 |
|
60 |
|
61 | const Modal = React.forwardRef(function Modal(inProps, ref) {
|
62 | const theme = useTheme();
|
63 | const props = getThemeProps({
|
64 | name: 'MuiModal',
|
65 | props: _extends({}, inProps),
|
66 | theme
|
67 | });
|
68 |
|
69 | const {
|
70 | BackdropComponent = SimpleBackdrop,
|
71 | BackdropProps,
|
72 | children,
|
73 | closeAfterTransition = false,
|
74 | container,
|
75 | disableAutoFocus = false,
|
76 | disableBackdropClick = false,
|
77 | disableEnforceFocus = false,
|
78 | disableEscapeKeyDown = false,
|
79 | disablePortal = false,
|
80 | disableRestoreFocus = false,
|
81 | disableScrollLock = false,
|
82 | hideBackdrop = false,
|
83 | keepMounted = false,
|
84 | manager = defaultManager,
|
85 | onBackdropClick,
|
86 | onClose,
|
87 | onEscapeKeyDown,
|
88 | onRendered,
|
89 | open
|
90 | } = props,
|
91 | other = _objectWithoutPropertiesLoose(props, ["BackdropComponent", "BackdropProps", "children", "closeAfterTransition", "container", "disableAutoFocus", "disableBackdropClick", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onEscapeKeyDown", "onRendered", "open"]);
|
92 |
|
93 | const [exited, setExited] = React.useState(true);
|
94 | const modal = React.useRef({});
|
95 | const mountNodeRef = React.useRef(null);
|
96 | const modalRef = React.useRef(null);
|
97 | const handleRef = useForkRef(modalRef, ref);
|
98 | const hasTransition = getHasTransition(props);
|
99 |
|
100 | const getDoc = () => ownerDocument(mountNodeRef.current);
|
101 |
|
102 | const getModal = () => {
|
103 | modal.current.modalRef = modalRef.current;
|
104 | modal.current.mountNode = mountNodeRef.current;
|
105 | return modal.current;
|
106 | };
|
107 |
|
108 | const handleMounted = () => {
|
109 | manager.mount(getModal(), {
|
110 | disableScrollLock
|
111 | });
|
112 |
|
113 | modalRef.current.scrollTop = 0;
|
114 | };
|
115 |
|
116 | const handleOpen = useEventCallback(() => {
|
117 | const resolvedContainer = getContainer(container) || getDoc().body;
|
118 | manager.add(getModal(), resolvedContainer);
|
119 |
|
120 | if (modalRef.current) {
|
121 | handleMounted();
|
122 | }
|
123 | });
|
124 | const isTopModal = React.useCallback(() => manager.isTopModal(getModal()), [manager]);
|
125 | const handlePortalRef = useEventCallback(node => {
|
126 | mountNodeRef.current = node;
|
127 |
|
128 | if (!node) {
|
129 | return;
|
130 | }
|
131 |
|
132 | if (onRendered) {
|
133 | onRendered();
|
134 | }
|
135 |
|
136 | if (open && isTopModal()) {
|
137 | handleMounted();
|
138 | } else {
|
139 | ariaHidden(modalRef.current, true);
|
140 | }
|
141 | });
|
142 | const handleClose = React.useCallback(() => {
|
143 | manager.remove(getModal());
|
144 | }, [manager]);
|
145 | React.useEffect(() => {
|
146 | return () => {
|
147 | handleClose();
|
148 | };
|
149 | }, [handleClose]);
|
150 | React.useEffect(() => {
|
151 | if (open) {
|
152 | handleOpen();
|
153 | } else if (!hasTransition || !closeAfterTransition) {
|
154 | handleClose();
|
155 | }
|
156 | }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
|
157 |
|
158 | if (!keepMounted && !open && (!hasTransition || exited)) {
|
159 | return null;
|
160 | }
|
161 |
|
162 | const handleEnter = () => {
|
163 | setExited(false);
|
164 | };
|
165 |
|
166 | const handleExited = () => {
|
167 | setExited(true);
|
168 |
|
169 | if (closeAfterTransition) {
|
170 | handleClose();
|
171 | }
|
172 | };
|
173 |
|
174 | const handleBackdropClick = event => {
|
175 | if (event.target !== event.currentTarget) {
|
176 | return;
|
177 | }
|
178 |
|
179 | if (onBackdropClick) {
|
180 | onBackdropClick(event);
|
181 | }
|
182 |
|
183 | if (!disableBackdropClick && onClose) {
|
184 | onClose(event, 'backdropClick');
|
185 | }
|
186 | };
|
187 |
|
188 | const handleKeyDown = event => {
|
189 |
|
190 |
|
191 |
|
192 |
|
193 |
|
194 |
|
195 | if (event.key !== 'Escape' || !isTopModal()) {
|
196 | return;
|
197 | }
|
198 |
|
199 | if (onEscapeKeyDown) {
|
200 | onEscapeKeyDown(event);
|
201 | }
|
202 |
|
203 | if (!disableEscapeKeyDown) {
|
204 |
|
205 | event.stopPropagation();
|
206 |
|
207 | if (onClose) {
|
208 | onClose(event, 'escapeKeyDown');
|
209 | }
|
210 | }
|
211 | };
|
212 |
|
213 | const inlineStyle = styles(theme || {
|
214 | zIndex
|
215 | });
|
216 | const childProps = {};
|
217 |
|
218 | if (children.props.tabIndex === undefined) {
|
219 | childProps.tabIndex = children.props.tabIndex || '-1';
|
220 | }
|
221 |
|
222 |
|
223 | if (hasTransition) {
|
224 | childProps.onEnter = createChainedFunction(handleEnter, children.props.onEnter);
|
225 | childProps.onExited = createChainedFunction(handleExited, children.props.onExited);
|
226 | }
|
227 |
|
228 | return React.createElement(Portal, {
|
229 | ref: handlePortalRef,
|
230 | container: container,
|
231 | disablePortal: disablePortal
|
232 | }, React.createElement("div", _extends({
|
233 | ref: handleRef,
|
234 | onKeyDown: handleKeyDown,
|
235 | role: "presentation"
|
236 | }, other, {
|
237 | style: _extends({}, inlineStyle.root, !open && exited ? inlineStyle.hidden : {}, other.style)
|
238 | }), hideBackdrop ? null : React.createElement(BackdropComponent, _extends({
|
239 | open: open,
|
240 | onClick: handleBackdropClick
|
241 | }, BackdropProps)), React.createElement(TrapFocus, {
|
242 | disableEnforceFocus: disableEnforceFocus,
|
243 | disableAutoFocus: disableAutoFocus,
|
244 | disableRestoreFocus: disableRestoreFocus,
|
245 | getDoc: getDoc,
|
246 | isEnabled: isTopModal,
|
247 | open: open
|
248 | }, React.cloneElement(children, childProps))));
|
249 | });
|
250 | process.env.NODE_ENV !== "production" ? Modal.propTypes = {
|
251 | |
252 |
|
253 |
|
254 | BackdropComponent: PropTypes.elementType,
|
255 |
|
256 | |
257 |
|
258 |
|
259 | BackdropProps: PropTypes.object,
|
260 |
|
261 | |
262 |
|
263 |
|
264 | children: elementAcceptingRef.isRequired,
|
265 |
|
266 | |
267 |
|
268 |
|
269 | closeAfterTransition: PropTypes.bool,
|
270 |
|
271 | |
272 |
|
273 |
|
274 |
|
275 |
|
276 |
|
277 |
|
278 | container: PropTypes
|
279 |
|
280 | .oneOfType([HTMLElementType, PropTypes.instanceOf(React.Component), PropTypes.func]),
|
281 |
|
282 | |
283 |
|
284 |
|
285 |
|
286 |
|
287 |
|
288 |
|
289 |
|
290 | disableAutoFocus: PropTypes.bool,
|
291 |
|
292 | |
293 |
|
294 |
|
295 | disableBackdropClick: deprecatedPropType(PropTypes.bool, 'Use the onClose prop with the `reason` argument to filter the `backdropClick` events.'),
|
296 |
|
297 | |
298 |
|
299 |
|
300 |
|
301 |
|
302 |
|
303 | disableEnforceFocus: PropTypes.bool,
|
304 |
|
305 | |
306 |
|
307 |
|
308 | disableEscapeKeyDown: PropTypes.bool,
|
309 |
|
310 | |
311 |
|
312 |
|
313 |
|
314 | disablePortal: PropTypes.bool,
|
315 |
|
316 | |
317 |
|
318 |
|
319 |
|
320 | disableRestoreFocus: PropTypes.bool,
|
321 |
|
322 | |
323 |
|
324 |
|
325 | disableScrollLock: PropTypes.bool,
|
326 |
|
327 | |
328 |
|
329 |
|
330 | hideBackdrop: PropTypes.bool,
|
331 |
|
332 | |
333 |
|
334 |
|
335 |
|
336 |
|
337 | keepMounted: PropTypes.bool,
|
338 |
|
339 | |
340 |
|
341 |
|
342 | manager: PropTypes.object,
|
343 |
|
344 | |
345 |
|
346 |
|
347 | onBackdropClick: deprecatedPropType(PropTypes.func, 'Use the onClose prop with the `reason` argument to handle the `backdropClick` events.'),
|
348 |
|
349 | |
350 |
|
351 |
|
352 |
|
353 |
|
354 |
|
355 |
|
356 | onClose: PropTypes.func,
|
357 |
|
358 | |
359 |
|
360 |
|
361 |
|
362 | onEscapeKeyDown: deprecatedPropType(PropTypes.func, 'Use the onClose prop with the `reason` argument to handle the `escapeKeyDown` events.'),
|
363 |
|
364 | |
365 |
|
366 |
|
367 |
|
368 |
|
369 |
|
370 | onRendered: deprecatedPropType(PropTypes.func, 'Use the ref instead.'),
|
371 |
|
372 | |
373 |
|
374 |
|
375 | open: PropTypes.bool.isRequired
|
376 | } : void 0;
|
377 | export default Modal; |
\ | No newline at end of file |