Dashboard sipadu mbip
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

Modal.js 9.6KB

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