Dashboard sipadu mbip
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

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