251 lines
10 KiB
JavaScript
Executable File
251 lines
10 KiB
JavaScript
Executable File
"use strict";
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
var _activeElement = _interopRequireDefault(require("dom-helpers/activeElement"));
|
|
var _contains = _interopRequireDefault(require("dom-helpers/contains"));
|
|
var _canUseDOM = _interopRequireDefault(require("dom-helpers/canUseDOM"));
|
|
var _listen = _interopRequireDefault(require("dom-helpers/listen"));
|
|
var _react = _interopRequireWildcard(require("react"));
|
|
var React = _react;
|
|
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
var _useMounted = _interopRequireDefault(require("@restart/hooks/useMounted"));
|
|
var _useWillUnmount = _interopRequireDefault(require("@restart/hooks/useWillUnmount"));
|
|
var _usePrevious = _interopRequireDefault(require("@restart/hooks/usePrevious"));
|
|
var _useEventCallback = _interopRequireDefault(require("@restart/hooks/useEventCallback"));
|
|
var _ModalManager = _interopRequireDefault(require("./ModalManager"));
|
|
var _useWaitForDOMRef = _interopRequireDefault(require("./useWaitForDOMRef"));
|
|
var _useWindow = _interopRequireDefault(require("./useWindow"));
|
|
var _ImperativeTransition = require("./ImperativeTransition");
|
|
var _utils = require("./utils");
|
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
const _excluded = ["show", "role", "className", "style", "children", "backdrop", "keyboard", "onBackdropClick", "onEscapeKeyDown", "transition", "runTransition", "backdropTransition", "runBackdropTransition", "autoFocus", "enforceFocus", "restoreFocus", "restoreFocusOptions", "renderDialog", "renderBackdrop", "manager", "container", "onShow", "onHide", "onExit", "onExited", "onExiting", "onEnter", "onEntering", "onEntered"];
|
|
/* eslint-disable @typescript-eslint/no-use-before-define, react/prop-types */
|
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
|
|
let manager;
|
|
|
|
/*
|
|
Modal props are split into a version with and without index signature so that you can fully use them in another projects
|
|
This is due to Typescript not playing well with index signatures e.g. when using Omit
|
|
*/
|
|
|
|
function getManager(window) {
|
|
if (!manager) manager = new _ModalManager.default({
|
|
ownerDocument: window == null ? void 0 : window.document
|
|
});
|
|
return manager;
|
|
}
|
|
function useModalManager(provided) {
|
|
const window = (0, _useWindow.default)();
|
|
const modalManager = provided || getManager(window);
|
|
const modal = (0, _react.useRef)({
|
|
dialog: null,
|
|
backdrop: null
|
|
});
|
|
return Object.assign(modal.current, {
|
|
add: () => modalManager.add(modal.current),
|
|
remove: () => modalManager.remove(modal.current),
|
|
isTopModal: () => modalManager.isTopModal(modal.current),
|
|
setDialogRef: (0, _react.useCallback)(ref => {
|
|
modal.current.dialog = ref;
|
|
}, []),
|
|
setBackdropRef: (0, _react.useCallback)(ref => {
|
|
modal.current.backdrop = ref;
|
|
}, [])
|
|
});
|
|
}
|
|
const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
let {
|
|
show = false,
|
|
role = 'dialog',
|
|
className,
|
|
style,
|
|
children,
|
|
backdrop = true,
|
|
keyboard = true,
|
|
onBackdropClick,
|
|
onEscapeKeyDown,
|
|
transition,
|
|
runTransition,
|
|
backdropTransition,
|
|
runBackdropTransition,
|
|
autoFocus = true,
|
|
enforceFocus = true,
|
|
restoreFocus = true,
|
|
restoreFocusOptions,
|
|
renderDialog,
|
|
renderBackdrop = props => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", Object.assign({}, props)),
|
|
manager: providedManager,
|
|
container: containerRef,
|
|
onShow,
|
|
onHide = () => {},
|
|
onExit,
|
|
onExited,
|
|
onExiting,
|
|
onEnter,
|
|
onEntering,
|
|
onEntered
|
|
} = _ref,
|
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
const ownerWindow = (0, _useWindow.default)();
|
|
const container = (0, _useWaitForDOMRef.default)(containerRef);
|
|
const modal = useModalManager(providedManager);
|
|
const isMounted = (0, _useMounted.default)();
|
|
const prevShow = (0, _usePrevious.default)(show);
|
|
const [exited, setExited] = (0, _react.useState)(!show);
|
|
const lastFocusRef = (0, _react.useRef)(null);
|
|
(0, _react.useImperativeHandle)(ref, () => modal, [modal]);
|
|
if (_canUseDOM.default && !prevShow && show) {
|
|
lastFocusRef.current = (0, _activeElement.default)(ownerWindow == null ? void 0 : ownerWindow.document);
|
|
}
|
|
|
|
// TODO: I think this needs to be in an effect
|
|
if (show && exited) {
|
|
setExited(false);
|
|
}
|
|
const handleShow = (0, _useEventCallback.default)(() => {
|
|
modal.add();
|
|
removeKeydownListenerRef.current = (0, _listen.default)(document, 'keydown', handleDocumentKeyDown);
|
|
removeFocusListenerRef.current = (0, _listen.default)(document, 'focus',
|
|
// the timeout is necessary b/c this will run before the new modal is mounted
|
|
// and so steals focus from it
|
|
() => setTimeout(handleEnforceFocus), true);
|
|
if (onShow) {
|
|
onShow();
|
|
}
|
|
|
|
// autofocus after onShow to not trigger a focus event for previous
|
|
// modals before this one is shown.
|
|
if (autoFocus) {
|
|
var _modal$dialog$ownerDo, _modal$dialog;
|
|
const currentActiveElement = (0, _activeElement.default)((_modal$dialog$ownerDo = (_modal$dialog = modal.dialog) == null ? void 0 : _modal$dialog.ownerDocument) != null ? _modal$dialog$ownerDo : ownerWindow == null ? void 0 : ownerWindow.document);
|
|
if (modal.dialog && currentActiveElement && !(0, _contains.default)(modal.dialog, currentActiveElement)) {
|
|
lastFocusRef.current = currentActiveElement;
|
|
modal.dialog.focus();
|
|
}
|
|
}
|
|
});
|
|
const handleHide = (0, _useEventCallback.default)(() => {
|
|
modal.remove();
|
|
removeKeydownListenerRef.current == null ? void 0 : removeKeydownListenerRef.current();
|
|
removeFocusListenerRef.current == null ? void 0 : removeFocusListenerRef.current();
|
|
if (restoreFocus) {
|
|
var _lastFocusRef$current;
|
|
// Support: <=IE11 doesn't support `focus()` on svg elements (RB: #917)
|
|
(_lastFocusRef$current = lastFocusRef.current) == null ? void 0 : _lastFocusRef$current.focus == null ? void 0 : _lastFocusRef$current.focus(restoreFocusOptions);
|
|
lastFocusRef.current = null;
|
|
}
|
|
});
|
|
|
|
// TODO: try and combine these effects: https://github.com/react-bootstrap/react-overlays/pull/794#discussion_r409954120
|
|
|
|
// Show logic when:
|
|
// - show is `true` _and_ `container` has resolved
|
|
(0, _react.useEffect)(() => {
|
|
if (!show || !container) return;
|
|
handleShow();
|
|
}, [show, container, /* should never change: */handleShow]);
|
|
|
|
// Hide cleanup logic when:
|
|
// - `exited` switches to true
|
|
// - component unmounts;
|
|
(0, _react.useEffect)(() => {
|
|
if (!exited) return;
|
|
handleHide();
|
|
}, [exited, handleHide]);
|
|
(0, _useWillUnmount.default)(() => {
|
|
handleHide();
|
|
});
|
|
|
|
// --------------------------------
|
|
|
|
const handleEnforceFocus = (0, _useEventCallback.default)(() => {
|
|
if (!enforceFocus || !isMounted() || !modal.isTopModal()) {
|
|
return;
|
|
}
|
|
const currentActiveElement = (0, _activeElement.default)(ownerWindow == null ? void 0 : ownerWindow.document);
|
|
if (modal.dialog && currentActiveElement && !(0, _contains.default)(modal.dialog, currentActiveElement)) {
|
|
modal.dialog.focus();
|
|
}
|
|
});
|
|
const handleBackdropClick = (0, _useEventCallback.default)(e => {
|
|
if (e.target !== e.currentTarget) {
|
|
return;
|
|
}
|
|
onBackdropClick == null ? void 0 : onBackdropClick(e);
|
|
if (backdrop === true) {
|
|
onHide();
|
|
}
|
|
});
|
|
const handleDocumentKeyDown = (0, _useEventCallback.default)(e => {
|
|
if (keyboard && (0, _utils.isEscKey)(e) && modal.isTopModal()) {
|
|
onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(e);
|
|
if (!e.defaultPrevented) {
|
|
onHide();
|
|
}
|
|
}
|
|
});
|
|
const removeFocusListenerRef = (0, _react.useRef)();
|
|
const removeKeydownListenerRef = (0, _react.useRef)();
|
|
const handleHidden = (...args) => {
|
|
setExited(true);
|
|
onExited == null ? void 0 : onExited(...args);
|
|
};
|
|
if (!container) {
|
|
return null;
|
|
}
|
|
const dialogProps = Object.assign({
|
|
role,
|
|
ref: modal.setDialogRef,
|
|
// apparently only works on the dialog role element
|
|
'aria-modal': role === 'dialog' ? true : undefined
|
|
}, rest, {
|
|
style,
|
|
className,
|
|
tabIndex: -1
|
|
});
|
|
let dialog = renderDialog ? renderDialog(dialogProps) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", Object.assign({}, dialogProps, {
|
|
children: /*#__PURE__*/React.cloneElement(children, {
|
|
role: 'document'
|
|
})
|
|
}));
|
|
dialog = (0, _ImperativeTransition.renderTransition)(transition, runTransition, {
|
|
unmountOnExit: true,
|
|
mountOnEnter: true,
|
|
appear: true,
|
|
in: !!show,
|
|
onExit,
|
|
onExiting,
|
|
onExited: handleHidden,
|
|
onEnter,
|
|
onEntering,
|
|
onEntered,
|
|
children: dialog
|
|
});
|
|
let backdropElement = null;
|
|
if (backdrop) {
|
|
backdropElement = renderBackdrop({
|
|
ref: modal.setBackdropRef,
|
|
onClick: handleBackdropClick
|
|
});
|
|
backdropElement = (0, _ImperativeTransition.renderTransition)(backdropTransition, runBackdropTransition, {
|
|
in: !!show,
|
|
appear: true,
|
|
mountOnEnter: true,
|
|
unmountOnExit: true,
|
|
children: backdropElement
|
|
});
|
|
}
|
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
children: /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
children: [backdropElement, dialog]
|
|
}), container)
|
|
});
|
|
});
|
|
Modal.displayName = 'Modal';
|
|
var _default = exports.default = Object.assign(Modal, {
|
|
Manager: _ModalManager.default
|
|
}); |