You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

313 lines
11 KiB

"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
var _addEventListener = _interopRequireDefault(require("dom-helpers/addEventListener"));
var _canUseDOM = _interopRequireDefault(require("dom-helpers/canUseDOM"));
var _ownerDocument = _interopRequireDefault(require("dom-helpers/ownerDocument"));
var _removeEventListener = _interopRequireDefault(require("dom-helpers/removeEventListener"));
var _scrollbarSize = _interopRequireDefault(require("dom-helpers/scrollbarSize"));
var _useCallbackRef = _interopRequireDefault(require("@restart/hooks/useCallbackRef"));
var _useEventCallback = _interopRequireDefault(require("@restart/hooks/useEventCallback"));
var _useMergedRefs = _interopRequireDefault(require("@restart/hooks/useMergedRefs"));
var _useWillUnmount = _interopRequireDefault(require("@restart/hooks/useWillUnmount"));
var _transitionEnd = _interopRequireDefault(require("dom-helpers/transitionEnd"));
var React = _interopRequireWildcard(require("react"));
var _Modal = _interopRequireDefault(require("@restart/ui/Modal"));
var _BootstrapModalManager = require("./BootstrapModalManager");
var _Fade = _interopRequireDefault(require("./Fade"));
var _ModalBody = _interopRequireDefault(require("./ModalBody"));
var _ModalContext = _interopRequireDefault(require("./ModalContext"));
var _ModalDialog = _interopRequireDefault(require("./ModalDialog"));
var _ModalFooter = _interopRequireDefault(require("./ModalFooter"));
var _ModalHeader = _interopRequireDefault(require("./ModalHeader"));
var _ModalTitle = _interopRequireDefault(require("./ModalTitle"));
var _ThemeProvider = require("./ThemeProvider");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const defaultProps = {
show: false,
backdrop: true,
keyboard: true,
autoFocus: true,
enforceFocus: true,
restoreFocus: true,
animation: true,
dialogAs: _ModalDialog.default
};
/* eslint-disable no-use-before-define, react/no-multi-comp */
function DialogTransition(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fade.default, { ...props,
timeout: null
});
}
function BackdropTransition(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fade.default, { ...props,
timeout: null
});
}
/* eslint-enable no-use-before-define */
const Modal = /*#__PURE__*/React.forwardRef(({
bsPrefix,
className,
style,
dialogClassName,
contentClassName,
children,
dialogAs: Dialog,
'aria-labelledby': ariaLabelledby,
'aria-describedby': ariaDescribedby,
'aria-label': ariaLabel,
/* BaseModal props */
show,
animation,
backdrop,
keyboard,
onEscapeKeyDown,
onShow,
onHide,
container,
autoFocus,
enforceFocus,
restoreFocus,
restoreFocusOptions,
onEntered,
onExit,
onExiting,
onEnter,
onEntering,
onExited,
backdropClassName,
manager: propsManager,
...props
}, ref) => {
const [modalStyle, setStyle] = (0, React.useState)({});
const [animateStaticModal, setAnimateStaticModal] = (0, React.useState)(false);
const waitingForMouseUpRef = (0, React.useRef)(false);
const ignoreBackdropClickRef = (0, React.useRef)(false);
const removeStaticModalAnimationRef = (0, React.useRef)(null);
const [modal, setModalRef] = (0, _useCallbackRef.default)();
const mergedRef = (0, _useMergedRefs.default)(ref, setModalRef);
const handleHide = (0, _useEventCallback.default)(onHide);
const isRTL = (0, _ThemeProvider.useIsRTL)();
bsPrefix = (0, _ThemeProvider.useBootstrapPrefix)(bsPrefix, 'modal');
const modalContext = (0, React.useMemo)(() => ({
onHide: handleHide
}), [handleHide]);
function getModalManager() {
if (propsManager) return propsManager;
return (0, _BootstrapModalManager.getSharedManager)({
isRTL
});
}
function updateDialogStyle(node) {
if (!_canUseDOM.default) return;
const containerIsOverflowing = getModalManager().getScrollbarWidth() > 0;
const modalIsOverflowing = node.scrollHeight > (0, _ownerDocument.default)(node).documentElement.clientHeight;
setStyle({
paddingRight: containerIsOverflowing && !modalIsOverflowing ? (0, _scrollbarSize.default)() : undefined,
paddingLeft: !containerIsOverflowing && modalIsOverflowing ? (0, _scrollbarSize.default)() : undefined
});
}
const handleWindowResize = (0, _useEventCallback.default)(() => {
if (modal) {
updateDialogStyle(modal.dialog);
}
});
(0, _useWillUnmount.default)(() => {
(0, _removeEventListener.default)(window, 'resize', handleWindowResize);
removeStaticModalAnimationRef.current == null ? void 0 : removeStaticModalAnimationRef.current();
}); // We prevent the modal from closing during a drag by detecting where the
// the click originates from. If it starts in the modal and then ends outside
// don't close.
const handleDialogMouseDown = () => {
waitingForMouseUpRef.current = true;
};
const handleMouseUp = e => {
if (waitingForMouseUpRef.current && modal && e.target === modal.dialog) {
ignoreBackdropClickRef.current = true;
}
waitingForMouseUpRef.current = false;
};
const handleStaticModalAnimation = () => {
setAnimateStaticModal(true);
removeStaticModalAnimationRef.current = (0, _transitionEnd.default)(modal.dialog, () => {
setAnimateStaticModal(false);
});
};
const handleStaticBackdropClick = e => {
if (e.target !== e.currentTarget) {
return;
}
handleStaticModalAnimation();
};
const handleClick = e => {
if (backdrop === 'static') {
handleStaticBackdropClick(e);
return;
}
if (ignoreBackdropClickRef.current || e.target !== e.currentTarget) {
ignoreBackdropClickRef.current = false;
return;
}
onHide == null ? void 0 : onHide();
};
const handleEscapeKeyDown = e => {
if (!keyboard && backdrop === 'static') {
// Call preventDefault to stop modal from closing in restart ui,
// then play our animation.
e.preventDefault();
handleStaticModalAnimation();
} else if (keyboard && onEscapeKeyDown) {
onEscapeKeyDown(e);
}
};
const handleEnter = (node, isAppearing) => {
if (node) {
updateDialogStyle(node);
}
onEnter == null ? void 0 : onEnter(node, isAppearing);
};
const handleExit = node => {
removeStaticModalAnimationRef.current == null ? void 0 : removeStaticModalAnimationRef.current();
onExit == null ? void 0 : onExit(node);
};
const handleEntering = (node, isAppearing) => {
onEntering == null ? void 0 : onEntering(node, isAppearing); // FIXME: This should work even when animation is disabled.
(0, _addEventListener.default)(window, 'resize', handleWindowResize);
};
const handleExited = node => {
if (node) node.style.display = ''; // RHL removes it sometimes
onExited == null ? void 0 : onExited(node); // FIXME: This should work even when animation is disabled.
(0, _removeEventListener.default)(window, 'resize', handleWindowResize);
};
const renderBackdrop = (0, React.useCallback)(backdropProps => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { ...backdropProps,
className: (0, _classnames.default)(`${bsPrefix}-backdrop`, backdropClassName, !animation && 'show')
}), [animation, backdropClassName, bsPrefix]);
const baseModalStyle = { ...style,
...modalStyle
}; // If `display` is not set to block, autoFocus inside the modal fails
// https://github.com/react-bootstrap/react-bootstrap/issues/5102
baseModalStyle.display = 'block';
const renderDialog = dialogProps => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
role: "dialog",
...dialogProps,
style: baseModalStyle,
className: (0, _classnames.default)(className, bsPrefix, animateStaticModal && `${bsPrefix}-static`),
onClick: backdrop ? handleClick : undefined,
onMouseUp: handleMouseUp,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
"aria-describedby": ariaDescribedby,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog, { ...props,
onMouseDown: handleDialogMouseDown,
className: dialogClassName,
contentClassName: contentClassName,
children: children
})
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalContext.default.Provider, {
value: modalContext,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
show: show,
ref: mergedRef,
backdrop: backdrop,
container: container,
keyboard: true // Always set true - see handleEscapeKeyDown
,
autoFocus: autoFocus,
enforceFocus: enforceFocus,
restoreFocus: restoreFocus,
restoreFocusOptions: restoreFocusOptions,
onEscapeKeyDown: handleEscapeKeyDown,
onShow: onShow,
onHide: onHide,
onEnter: handleEnter,
onEntering: handleEntering,
onEntered: onEntered,
onExit: handleExit,
onExiting: onExiting,
onExited: handleExited,
manager: getModalManager(),
transition: animation ? DialogTransition : undefined,
backdropTransition: animation ? BackdropTransition : undefined,
renderBackdrop: renderBackdrop,
renderDialog: renderDialog
})
});
});
Modal.displayName = 'Modal';
Modal.defaultProps = defaultProps;
var _default = Object.assign(Modal, {
Body: _ModalBody.default,
Header: _ModalHeader.default,
Title: _ModalTitle.default,
Footer: _ModalFooter.default,
Dialog: _ModalDialog.default,
TRANSITION_DURATION: 300,
BACKDROP_TRANSITION_DURATION: 150
});
exports.default = _default;
module.exports = exports.default;