123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252 |
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
- import _extends from "@babel/runtime/helpers/esm/extends";
- import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
- import classNames from 'classnames';
- import events from 'dom-helpers/events';
- import ownerDocument from 'dom-helpers/ownerDocument';
- import canUseDOM from 'dom-helpers/util/inDOM';
- import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
- import React from 'react';
- import BaseModal from 'react-overlays/Modal';
- import Fade from './Fade';
- import Body from './ModalBody';
- import ModalDialog from './ModalDialog';
- import Footer from './ModalFooter';
- import Header from './ModalHeader';
- import Title from './ModalTitle';
- import BootstrapModalManager from './utils/BootstrapModalManager';
- import { createBootstrapComponent } from './ThemeProvider';
- import ModalContext from './ModalContext';
- var defaultProps = {
- show: false,
- backdrop: true,
- keyboard: true,
- autoFocus: true,
- enforceFocus: true,
- restoreFocus: true,
- animation: true,
- dialogAs: ModalDialog,
- manager: new BootstrapModalManager()
- };
- /* eslint-disable no-use-before-define, react/no-multi-comp */
-
- function DialogTransition(props) {
- return React.createElement(Fade, props);
- }
-
- function BackdropTransition(props) {
- return React.createElement(Fade, props);
- }
- /* eslint-enable no-use-before-define */
-
-
- var Modal =
- /*#__PURE__*/
- function (_React$Component) {
- _inheritsLoose(Modal, _React$Component);
-
- function Modal() {
- var _this;
-
- for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
- _args[_key] = arguments[_key];
- }
-
- _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
- _this.state = {
- style: {}
- };
- _this.modalContext = {
- onHide: function onHide() {
- return _this.props.onHide();
- }
- };
-
- _this.setModalRef = function (ref) {
- _this._modal = ref;
- };
-
- _this.handleDialogMouseDown = function () {
- _this._waitingForMouseUp = true;
- };
-
- _this.handleMouseUp = function (e) {
- if (_this._waitingForMouseUp && e.target === _this._modal.dialog) {
- _this._ignoreBackdropClick = true;
- }
-
- _this._waitingForMouseUp = false;
- };
-
- _this.handleClick = function (e) {
- if (_this._ignoreBackdropClick || e.target !== e.currentTarget) {
- _this._ignoreBackdropClick = false;
- return;
- }
-
- _this.props.onHide();
- };
-
- _this.handleEnter = function (node) {
- var _this$props;
-
- if (node) {
- node.style.display = 'block';
-
- _this.updateDialogStyle(node);
- }
-
- for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
- args[_key2 - 1] = arguments[_key2];
- }
-
- if (_this.props.onEnter) (_this$props = _this.props).onEnter.apply(_this$props, [node].concat(args));
- };
-
- _this.handleEntering = function (node) {
- var _this$props2;
-
- for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
- args[_key3 - 1] = arguments[_key3];
- }
-
- if (_this.props.onEntering) (_this$props2 = _this.props).onEntering.apply(_this$props2, [node].concat(args)); // FIXME: This should work even when animation is disabled.
-
- events.on(window, 'resize', _this.handleWindowResize);
- };
-
- _this.handleExited = function (node) {
- var _this$props3;
-
- if (node) node.style.display = ''; // RHL removes it sometimes
-
- for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
- args[_key4 - 1] = arguments[_key4];
- }
-
- if (_this.props.onExited) (_this$props3 = _this.props).onExited.apply(_this$props3, args); // FIXME: This should work even when animation is disabled.
-
- events.off(window, 'resize', _this.handleWindowResize);
- };
-
- _this.handleWindowResize = function () {
- _this.updateDialogStyle(_this._modal.dialog);
- };
-
- _this.renderBackdrop = function (props) {
- var _this$props4 = _this.props,
- bsPrefix = _this$props4.bsPrefix,
- backdropClassName = _this$props4.backdropClassName,
- animation = _this$props4.animation;
- return React.createElement("div", _extends({}, props, {
- className: classNames(bsPrefix + "-backdrop", backdropClassName, !animation && 'show')
- }));
- };
-
- return _this;
- }
-
- var _proto = Modal.prototype;
-
- _proto.componentWillUnmount = function componentWillUnmount() {
- // Clean up the listener if we need to.
- events.off(window, 'resize', this.handleWindowResize);
- };
-
- _proto.updateDialogStyle = function updateDialogStyle(node) {
- if (!canUseDOM) return;
- var manager = this.props.manager;
- var containerIsOverflowing = manager.isContainerOverflowing(this._modal);
- var modalIsOverflowing = node.scrollHeight > ownerDocument(node).documentElement.clientHeight;
- this.setState({
- style: {
- paddingRight: containerIsOverflowing && !modalIsOverflowing ? getScrollbarSize() : undefined,
- paddingLeft: !containerIsOverflowing && modalIsOverflowing ? getScrollbarSize() : undefined
- }
- });
- };
-
- _proto.render = function render() {
- var _this$props5 = this.props,
- bsPrefix = _this$props5.bsPrefix,
- className = _this$props5.className,
- style = _this$props5.style,
- dialogClassName = _this$props5.dialogClassName,
- children = _this$props5.children,
- Dialog = _this$props5.dialogAs,
- show = _this$props5.show,
- animation = _this$props5.animation,
- backdrop = _this$props5.backdrop,
- keyboard = _this$props5.keyboard,
- manager = _this$props5.manager,
- onEscapeKeyDown = _this$props5.onEscapeKeyDown,
- onShow = _this$props5.onShow,
- onHide = _this$props5.onHide,
- container = _this$props5.container,
- autoFocus = _this$props5.autoFocus,
- enforceFocus = _this$props5.enforceFocus,
- restoreFocus = _this$props5.restoreFocus,
- onEntered = _this$props5.onEntered,
- onExit = _this$props5.onExit,
- onExiting = _this$props5.onExiting,
- _ = _this$props5.onExited,
- _1 = _this$props5.onEntering,
- _6 = _this$props5.onEnter,
- _4 = _this$props5.onEntering,
- _2 = _this$props5.backdropClassName,
- props = _objectWithoutPropertiesLoose(_this$props5, ["bsPrefix", "className", "style", "dialogClassName", "children", "dialogAs", "show", "animation", "backdrop", "keyboard", "manager", "onEscapeKeyDown", "onShow", "onHide", "container", "autoFocus", "enforceFocus", "restoreFocus", "onEntered", "onExit", "onExiting", "onExited", "onEntering", "onEnter", "onEntering", "backdropClassName"]);
-
- var clickHandler = backdrop === true ? this.handleClick : null;
-
- var baseModalStyle = _extends({}, style, {}, this.state.style); // Sets `display` always block when `animation` is false
-
-
- if (!animation) baseModalStyle.display = 'block';
- return React.createElement(ModalContext.Provider, {
- value: this.modalContext
- }, React.createElement(BaseModal, {
- show: show,
- backdrop: backdrop,
- container: container,
- keyboard: keyboard,
- autoFocus: autoFocus,
- enforceFocus: enforceFocus,
- restoreFocus: restoreFocus,
- onEscapeKeyDown: onEscapeKeyDown,
- onShow: onShow,
- onHide: onHide,
- onEntered: onEntered,
- onExit: onExit,
- onExiting: onExiting,
- manager: manager,
- ref: this.setModalRef,
- style: baseModalStyle,
- className: classNames(className, bsPrefix),
- containerClassName: bsPrefix + "-open",
- transition: animation ? DialogTransition : undefined,
- backdropTransition: animation ? BackdropTransition : undefined,
- renderBackdrop: this.renderBackdrop,
- onClick: clickHandler,
- onMouseUp: this.handleMouseUp,
- onEnter: this.handleEnter,
- onEntering: this.handleEntering,
- onExited: this.handleExited
- }, React.createElement(Dialog, _extends({}, props, {
- onMouseDown: this.handleDialogMouseDown,
- className: dialogClassName
- }), children)));
- };
-
- return Modal;
- }(React.Component);
-
- Modal.defaultProps = defaultProps;
- var DecoratedModal = createBootstrapComponent(Modal, 'modal');
- DecoratedModal.Body = Body;
- DecoratedModal.Header = Header;
- DecoratedModal.Title = Title;
- DecoratedModal.Footer = Footer;
- DecoratedModal.Dialog = ModalDialog;
- DecoratedModal.TRANSITION_DURATION = 300;
- DecoratedModal.BACKDROP_TRANSITION_DURATION = 150;
- export default DecoratedModal;
|