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 = _interopRequireDefault(require("react"));
|
17 |
|
18 | var _reactDom = _interopRequireDefault(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 _TrapFocus = _interopRequireDefault(require("./TrapFocus"));
|
41 |
|
42 | var _SimpleBackdrop = _interopRequireDefault(require("./SimpleBackdrop"));
|
43 |
|
44 | function getContainer(container) {
|
45 | container = typeof container === 'function' ? container() : container;
|
46 | return _reactDom.default.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 |
|
92 | var Modal = _react.default.forwardRef(function Modal(inProps, ref) {
|
93 | var theme = (0, _styles.useTheme)();
|
94 | var props = (0, _styles.getThemeProps)({
|
95 | name: 'MuiModal',
|
96 | props: (0, _extends2.default)({}, inProps),
|
97 | theme: theme
|
98 | });
|
99 | var _props$BackdropCompon = props.BackdropComponent,
|
100 | BackdropComponent = _props$BackdropCompon === void 0 ? _SimpleBackdrop.default : _props$BackdropCompon,
|
101 | BackdropProps = props.BackdropProps,
|
102 | children = props.children,
|
103 | _props$closeAfterTran = props.closeAfterTransition,
|
104 | closeAfterTransition = _props$closeAfterTran === void 0 ? false : _props$closeAfterTran,
|
105 | container = props.container,
|
106 | _props$disableAutoFoc = props.disableAutoFocus,
|
107 | disableAutoFocus = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,
|
108 | _props$disableBackdro = props.disableBackdropClick,
|
109 | disableBackdropClick = _props$disableBackdro === void 0 ? false : _props$disableBackdro,
|
110 | _props$disableEnforce = props.disableEnforceFocus,
|
111 | disableEnforceFocus = _props$disableEnforce === void 0 ? false : _props$disableEnforce,
|
112 | _props$disableEscapeK = props.disableEscapeKeyDown,
|
113 | disableEscapeKeyDown = _props$disableEscapeK === void 0 ? false : _props$disableEscapeK,
|
114 | _props$disablePortal = props.disablePortal,
|
115 | disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
|
116 | _props$disableRestore = props.disableRestoreFocus,
|
117 | disableRestoreFocus = _props$disableRestore === void 0 ? false : _props$disableRestore,
|
118 | _props$disableScrollL = props.disableScrollLock,
|
119 | disableScrollLock = _props$disableScrollL === void 0 ? false : _props$disableScrollL,
|
120 | _props$hideBackdrop = props.hideBackdrop,
|
121 | hideBackdrop = _props$hideBackdrop === void 0 ? false : _props$hideBackdrop,
|
122 | _props$keepMounted = props.keepMounted,
|
123 | keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
|
124 | _props$manager = props.manager,
|
125 | manager = _props$manager === void 0 ? defaultManager : _props$manager,
|
126 | onBackdropClick = props.onBackdropClick,
|
127 | onClose = props.onClose,
|
128 | onEscapeKeyDown = props.onEscapeKeyDown,
|
129 | onRendered = props.onRendered,
|
130 | open = props.open,
|
131 | 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"]);
|
132 |
|
133 | var _React$useState = _react.default.useState(true),
|
134 | exited = _React$useState[0],
|
135 | setExited = _React$useState[1];
|
136 |
|
137 | var modal = _react.default.useRef({});
|
138 |
|
139 | var mountNodeRef = _react.default.useRef(null);
|
140 |
|
141 | var modalRef = _react.default.useRef(null);
|
142 |
|
143 | var handleRef = (0, _useForkRef.default)(modalRef, ref);
|
144 | var hasTransition = getHasTransition(props);
|
145 |
|
146 | var getDoc = function getDoc() {
|
147 | return (0, _ownerDocument.default)(mountNodeRef.current);
|
148 | };
|
149 |
|
150 | var getModal = function getModal() {
|
151 | modal.current.modalRef = modalRef.current;
|
152 | modal.current.mountNode = mountNodeRef.current;
|
153 | return modal.current;
|
154 | };
|
155 |
|
156 | var handleMounted = function handleMounted() {
|
157 | manager.mount(getModal(), {
|
158 | disableScrollLock: disableScrollLock
|
159 | });
|
160 |
|
161 | modalRef.current.scrollTop = 0;
|
162 | };
|
163 |
|
164 | var handleOpen = (0, _useEventCallback.default)(function () {
|
165 | var resolvedContainer = getContainer(container) || getDoc().body;
|
166 | manager.add(getModal(), resolvedContainer);
|
167 |
|
168 | if (modalRef.current) {
|
169 | handleMounted();
|
170 | }
|
171 | });
|
172 |
|
173 | var isTopModal = _react.default.useCallback(function () {
|
174 | return manager.isTopModal(getModal());
|
175 | }, [manager]);
|
176 |
|
177 | var handlePortalRef = (0, _useEventCallback.default)(function (node) {
|
178 | mountNodeRef.current = node;
|
179 |
|
180 | if (!node) {
|
181 | return;
|
182 | }
|
183 |
|
184 | if (onRendered) {
|
185 | onRendered();
|
186 | }
|
187 |
|
188 | if (open && isTopModal()) {
|
189 | handleMounted();
|
190 | } else {
|
191 | (0, _ModalManager.ariaHidden)(modalRef.current, true);
|
192 | }
|
193 | });
|
194 |
|
195 | var handleClose = _react.default.useCallback(function () {
|
196 | manager.remove(getModal());
|
197 | }, [manager]);
|
198 |
|
199 | _react.default.useEffect(function () {
|
200 | return function () {
|
201 | handleClose();
|
202 | };
|
203 | }, [handleClose]);
|
204 |
|
205 | _react.default.useEffect(function () {
|
206 | if (open) {
|
207 | handleOpen();
|
208 | } else if (!hasTransition || !closeAfterTransition) {
|
209 | handleClose();
|
210 | }
|
211 | }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
|
212 |
|
213 | if (!keepMounted && !open && (!hasTransition || exited)) {
|
214 | return null;
|
215 | }
|
216 |
|
217 | var handleEnter = function handleEnter() {
|
218 | setExited(false);
|
219 | };
|
220 |
|
221 | var handleExited = function handleExited() {
|
222 | setExited(true);
|
223 |
|
224 | if (closeAfterTransition) {
|
225 | handleClose();
|
226 | }
|
227 | };
|
228 |
|
229 | var handleBackdropClick = function handleBackdropClick(event) {
|
230 | if (event.target !== event.currentTarget) {
|
231 | return;
|
232 | }
|
233 |
|
234 | if (onBackdropClick) {
|
235 | onBackdropClick(event);
|
236 | }
|
237 |
|
238 | if (!disableBackdropClick && onClose) {
|
239 | onClose(event, 'backdropClick');
|
240 | }
|
241 | };
|
242 |
|
243 | var handleKeyDown = function handleKeyDown(event) {
|
244 |
|
245 |
|
246 |
|
247 |
|
248 |
|
249 |
|
250 | if (event.key !== 'Escape' || !isTopModal()) {
|
251 | return;
|
252 | }
|
253 |
|
254 |
|
255 | event.stopPropagation();
|
256 |
|
257 | if (onEscapeKeyDown) {
|
258 | onEscapeKeyDown(event);
|
259 | }
|
260 |
|
261 | if (!disableEscapeKeyDown && onClose) {
|
262 | onClose(event, 'escapeKeyDown');
|
263 | }
|
264 | };
|
265 |
|
266 | var inlineStyle = styles(theme || {
|
267 | zIndex: _zIndex.default
|
268 | });
|
269 | var childProps = {};
|
270 |
|
271 | if (children.props.tabIndex === undefined) {
|
272 | childProps.tabIndex = children.props.tabIndex || '-1';
|
273 | }
|
274 |
|
275 |
|
276 | if (hasTransition) {
|
277 | childProps.onEnter = (0, _createChainedFunction.default)(handleEnter, children.props.onEnter);
|
278 | childProps.onExited = (0, _createChainedFunction.default)(handleExited, children.props.onExited);
|
279 | }
|
280 |
|
281 | return _react.default.createElement(_Portal.default, {
|
282 | ref: handlePortalRef,
|
283 | container: container,
|
284 | disablePortal: disablePortal
|
285 | }, _react.default.createElement("div", (0, _extends2.default)({
|
286 | ref: handleRef,
|
287 | onKeyDown: handleKeyDown,
|
288 | role: "presentation"
|
289 | }, other, {
|
290 | style: (0, _extends2.default)({}, inlineStyle.root, {}, !open && exited ? inlineStyle.hidden : {}, {}, other.style)
|
291 | }), hideBackdrop ? null : _react.default.createElement(BackdropComponent, (0, _extends2.default)({
|
292 | open: open,
|
293 | onClick: handleBackdropClick
|
294 | }, BackdropProps)), _react.default.createElement(_TrapFocus.default, {
|
295 | disableEnforceFocus: disableEnforceFocus,
|
296 | disableAutoFocus: disableAutoFocus,
|
297 | disableRestoreFocus: disableRestoreFocus,
|
298 | getDoc: getDoc,
|
299 | isEnabled: isTopModal,
|
300 | open: open
|
301 | }, _react.default.cloneElement(children, childProps))));
|
302 | });
|
303 |
|
304 | process.env.NODE_ENV !== "production" ? Modal.propTypes = {
|
305 | |
306 |
|
307 |
|
308 | BackdropComponent: _propTypes.default.elementType,
|
309 |
|
310 | |
311 |
|
312 |
|
313 | BackdropProps: _propTypes.default.object,
|
314 |
|
315 | |
316 |
|
317 |
|
318 | children: _utils.elementAcceptingRef.isRequired,
|
319 |
|
320 | |
321 |
|
322 |
|
323 | closeAfterTransition: _propTypes.default.bool,
|
324 |
|
325 | |
326 |
|
327 |
|
328 |
|
329 | container: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
|
330 |
|
331 | |
332 |
|
333 |
|
334 |
|
335 |
|
336 |
|
337 |
|
338 |
|
339 | disableAutoFocus: _propTypes.default.bool,
|
340 |
|
341 | |
342 |
|
343 |
|
344 | disableBackdropClick: _propTypes.default.bool,
|
345 |
|
346 | |
347 |
|
348 |
|
349 |
|
350 |
|
351 |
|
352 | disableEnforceFocus: _propTypes.default.bool,
|
353 |
|
354 | |
355 |
|
356 |
|
357 | disableEscapeKeyDown: _propTypes.default.bool,
|
358 |
|
359 | |
360 |
|
361 |
|
362 |
|
363 | disablePortal: _propTypes.default.bool,
|
364 |
|
365 | |
366 |
|
367 |
|
368 |
|
369 | disableRestoreFocus: _propTypes.default.bool,
|
370 |
|
371 | |
372 |
|
373 |
|
374 | disableScrollLock: _propTypes.default.bool,
|
375 |
|
376 | |
377 |
|
378 |
|
379 | hideBackdrop: _propTypes.default.bool,
|
380 |
|
381 | |
382 |
|
383 |
|
384 |
|
385 |
|
386 | keepMounted: _propTypes.default.bool,
|
387 |
|
388 | |
389 |
|
390 |
|
391 | manager: _propTypes.default.object,
|
392 |
|
393 | |
394 |
|
395 |
|
396 | onBackdropClick: _propTypes.default.func,
|
397 |
|
398 | |
399 |
|
400 |
|
401 |
|
402 |
|
403 |
|
404 |
|
405 | onClose: _propTypes.default.func,
|
406 |
|
407 | |
408 |
|
409 |
|
410 |
|
411 | onEscapeKeyDown: _propTypes.default.func,
|
412 |
|
413 | |
414 |
|
415 |
|
416 |
|
417 |
|
418 |
|
419 | onRendered: _propTypes.default.func,
|
420 |
|
421 | |
422 |
|
423 |
|
424 | open: _propTypes.default.bool.isRequired
|
425 | } : void 0;
|
426 | var _default = Modal;
|
427 | exports.default = _default; |
\ | No newline at end of file |