No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.

Modal.js 9.1 KiB

hace 3 años
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
  4. import classNames from 'classnames';
  5. import addEventListener from 'dom-helpers/addEventListener';
  6. import canUseDOM from 'dom-helpers/canUseDOM';
  7. import ownerDocument from 'dom-helpers/ownerDocument';
  8. import removeEventListener from 'dom-helpers/removeEventListener';
  9. import getScrollbarSize from 'dom-helpers/scrollbarSize';
  10. import React from 'react';
  11. import BaseModal from 'react-overlays/Modal';
  12. import BootstrapModalManager from './BootstrapModalManager';
  13. import Fade from './Fade';
  14. import Body from './ModalBody';
  15. import ModalContext from './ModalContext';
  16. import ModalDialog from './ModalDialog';
  17. import Footer from './ModalFooter';
  18. import Header from './ModalHeader';
  19. import Title from './ModalTitle';
  20. import { createBootstrapComponent } from './ThemeProvider';
  21. var manager;
  22. var defaultProps = {
  23. show: false,
  24. backdrop: true,
  25. keyboard: true,
  26. autoFocus: true,
  27. enforceFocus: true,
  28. restoreFocus: true,
  29. animation: true,
  30. dialogAs: ModalDialog
  31. };
  32. /* eslint-disable no-use-before-define, react/no-multi-comp */
  33. function DialogTransition(props) {
  34. return /*#__PURE__*/React.createElement(Fade, props);
  35. }
  36. function BackdropTransition(props) {
  37. return /*#__PURE__*/React.createElement(Fade, props);
  38. }
  39. /* eslint-enable no-use-before-define */
  40. var Modal = /*#__PURE__*/function (_React$Component) {
  41. _inheritsLoose(Modal, _React$Component);
  42. function Modal() {
  43. var _this;
  44. for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
  45. _args[_key] = arguments[_key];
  46. }
  47. _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
  48. _this.state = {
  49. style: {}
  50. };
  51. _this.modalContext = {
  52. onHide: function onHide() {
  53. return _this.props.onHide();
  54. }
  55. };
  56. _this.setModalRef = function (ref) {
  57. _this._modal = ref;
  58. };
  59. _this.handleDialogMouseDown = function () {
  60. _this._waitingForMouseUp = true;
  61. };
  62. _this.handleMouseUp = function (e) {
  63. if (_this._waitingForMouseUp && e.target === _this._modal.dialog) {
  64. _this._ignoreBackdropClick = true;
  65. }
  66. _this._waitingForMouseUp = false;
  67. };
  68. _this.handleClick = function (e) {
  69. if (_this._ignoreBackdropClick || e.target !== e.currentTarget) {
  70. _this._ignoreBackdropClick = false;
  71. return;
  72. }
  73. _this.props.onHide();
  74. };
  75. _this.handleEnter = function (node) {
  76. var _this$props;
  77. if (node) {
  78. node.style.display = 'block';
  79. _this.updateDialogStyle(node);
  80. }
  81. for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
  82. args[_key2 - 1] = arguments[_key2];
  83. }
  84. if (_this.props.onEnter) (_this$props = _this.props).onEnter.apply(_this$props, [node].concat(args));
  85. };
  86. _this.handleEntering = function (node) {
  87. var _this$props2;
  88. for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
  89. args[_key3 - 1] = arguments[_key3];
  90. }
  91. if (_this.props.onEntering) (_this$props2 = _this.props).onEntering.apply(_this$props2, [node].concat(args)); // FIXME: This should work even when animation is disabled.
  92. addEventListener(window, 'resize', _this.handleWindowResize);
  93. };
  94. _this.handleExited = function (node) {
  95. var _this$props3;
  96. if (node) node.style.display = ''; // RHL removes it sometimes
  97. for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
  98. args[_key4 - 1] = arguments[_key4];
  99. }
  100. if (_this.props.onExited) (_this$props3 = _this.props).onExited.apply(_this$props3, args); // FIXME: This should work even when animation is disabled.
  101. removeEventListener(window, 'resize', _this.handleWindowResize);
  102. };
  103. _this.handleWindowResize = function () {
  104. _this.updateDialogStyle(_this._modal.dialog);
  105. };
  106. _this.getModalManager = function () {
  107. if (_this.props.manager) {
  108. return _this.props.manager;
  109. }
  110. if (!manager) {
  111. manager = new BootstrapModalManager();
  112. }
  113. return manager;
  114. };
  115. _this.renderBackdrop = function (props) {
  116. var _this$props4 = _this.props,
  117. bsPrefix = _this$props4.bsPrefix,
  118. backdropClassName = _this$props4.backdropClassName,
  119. animation = _this$props4.animation;
  120. return /*#__PURE__*/React.createElement("div", _extends({}, props, {
  121. className: classNames(bsPrefix + "-backdrop", backdropClassName, !animation && 'show')
  122. }));
  123. };
  124. return _this;
  125. }
  126. var _proto = Modal.prototype;
  127. _proto.componentWillUnmount = function componentWillUnmount() {
  128. // Clean up the listener if we need to.
  129. removeEventListener(window, 'resize', this.handleWindowResize);
  130. };
  131. _proto.updateDialogStyle = function updateDialogStyle(node) {
  132. if (!canUseDOM) return;
  133. var containerIsOverflowing = this.getModalManager().isContainerOverflowing(this._modal);
  134. var modalIsOverflowing = node.scrollHeight > ownerDocument(node).documentElement.clientHeight;
  135. this.setState({
  136. style: {
  137. paddingRight: containerIsOverflowing && !modalIsOverflowing ? getScrollbarSize() : undefined,
  138. paddingLeft: !containerIsOverflowing && modalIsOverflowing ? getScrollbarSize() : undefined
  139. }
  140. });
  141. };
  142. _proto.render = function render() {
  143. var _this$props5 = this.props,
  144. bsPrefix = _this$props5.bsPrefix,
  145. className = _this$props5.className,
  146. style = _this$props5.style,
  147. dialogClassName = _this$props5.dialogClassName,
  148. children = _this$props5.children,
  149. Dialog = _this$props5.dialogAs,
  150. ariaLabelledby = _this$props5['aria-labelledby'],
  151. show = _this$props5.show,
  152. animation = _this$props5.animation,
  153. backdrop = _this$props5.backdrop,
  154. keyboard = _this$props5.keyboard,
  155. onEscapeKeyDown = _this$props5.onEscapeKeyDown,
  156. onShow = _this$props5.onShow,
  157. onHide = _this$props5.onHide,
  158. container = _this$props5.container,
  159. autoFocus = _this$props5.autoFocus,
  160. enforceFocus = _this$props5.enforceFocus,
  161. restoreFocus = _this$props5.restoreFocus,
  162. restoreFocusOptions = _this$props5.restoreFocusOptions,
  163. onEntered = _this$props5.onEntered,
  164. onExit = _this$props5.onExit,
  165. onExiting = _this$props5.onExiting,
  166. _ = _this$props5.onExited,
  167. _1 = _this$props5.onEntering,
  168. _6 = _this$props5.onEnter,
  169. _4 = _this$props5.onEntering,
  170. _2 = _this$props5.backdropClassName,
  171. props = _objectWithoutPropertiesLoose(_this$props5, ["bsPrefix", "className", "style", "dialogClassName", "children", "dialogAs", "aria-labelledby", "show", "animation", "backdrop", "keyboard", "onEscapeKeyDown", "onShow", "onHide", "container", "autoFocus", "enforceFocus", "restoreFocus", "restoreFocusOptions", "onEntered", "onExit", "onExiting", "onExited", "onEntering", "onEnter", "onEntering", "backdropClassName"]);
  172. var clickHandler = backdrop === true ? this.handleClick : null;
  173. var baseModalStyle = _extends({}, style, {}, this.state.style); // Sets `display` always block when `animation` is false
  174. if (!animation) baseModalStyle.display = 'block';
  175. return /*#__PURE__*/React.createElement(ModalContext.Provider, {
  176. value: this.modalContext
  177. }, /*#__PURE__*/React.createElement(BaseModal, {
  178. show: show,
  179. backdrop: backdrop,
  180. container: container,
  181. keyboard: keyboard,
  182. autoFocus: autoFocus,
  183. enforceFocus: enforceFocus,
  184. restoreFocus: restoreFocus,
  185. restoreFocusOptions: restoreFocusOptions,
  186. onEscapeKeyDown: onEscapeKeyDown,
  187. onShow: onShow,
  188. onHide: onHide,
  189. onEntered: onEntered,
  190. onExit: onExit,
  191. onExiting: onExiting,
  192. manager: this.getModalManager(),
  193. ref: this.setModalRef,
  194. style: baseModalStyle,
  195. className: classNames(className, bsPrefix),
  196. containerClassName: bsPrefix + "-open",
  197. transition: animation ? DialogTransition : undefined,
  198. backdropTransition: animation ? BackdropTransition : undefined,
  199. renderBackdrop: this.renderBackdrop,
  200. onClick: clickHandler,
  201. onMouseUp: this.handleMouseUp,
  202. onEnter: this.handleEnter,
  203. onEntering: this.handleEntering,
  204. onExited: this.handleExited,
  205. 'aria-labelledby': ariaLabelledby
  206. }, /*#__PURE__*/React.createElement(Dialog, _extends({}, props, {
  207. onMouseDown: this.handleDialogMouseDown,
  208. className: dialogClassName
  209. }), children)));
  210. };
  211. return Modal;
  212. }(React.Component);
  213. Modal.defaultProps = defaultProps;
  214. var DecoratedModal = createBootstrapComponent(Modal, 'modal');
  215. DecoratedModal.Body = Body;
  216. DecoratedModal.Header = Header;
  217. DecoratedModal.Title = Title;
  218. DecoratedModal.Footer = Footer;
  219. DecoratedModal.Dialog = ModalDialog;
  220. DecoratedModal.TRANSITION_DURATION = 300;
  221. DecoratedModal.BACKDROP_TRANSITION_DURATION = 150;
  222. export default DecoratedModal;