Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 

291 строка
10 KiB

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