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