1 line
13 KiB
JSON
1 line
13 KiB
JSON
{"ast":null,"code":"import _objectSpread2 from \"@babel/runtime/helpers/esm/objectSpread\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _assertThisInitialized from \"@babel/runtime/helpers/esm/assertThisInitialized\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Portal from './Portal';\nimport Fade from './Fade';\nimport { getOriginalBodyPadding, conditionallyUpdateScrollbar, setScrollbarWidth, mapToCssModules, omit, focusableElements, TransitionTimeouts } from './utils';\n\nfunction noop() {}\n\nvar FadePropTypes = PropTypes.shape(Fade.propTypes);\nvar propTypes = {\n isOpen: PropTypes.bool,\n autoFocus: PropTypes.bool,\n centered: PropTypes.bool,\n scrollable: PropTypes.bool,\n size: PropTypes.string,\n toggle: PropTypes.func,\n keyboard: PropTypes.bool,\n role: PropTypes.string,\n labelledBy: PropTypes.string,\n backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])]),\n onEnter: PropTypes.func,\n onExit: PropTypes.func,\n onOpened: PropTypes.func,\n onClosed: PropTypes.func,\n children: PropTypes.node,\n className: PropTypes.string,\n wrapClassName: PropTypes.string,\n modalClassName: PropTypes.string,\n backdropClassName: PropTypes.string,\n contentClassName: PropTypes.string,\n external: PropTypes.node,\n fade: PropTypes.bool,\n cssModule: PropTypes.object,\n zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n backdropTransition: FadePropTypes,\n modalTransition: FadePropTypes,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),\n unmountOnClose: PropTypes.bool,\n returnFocusAfterClose: PropTypes.bool\n};\nvar propsToOmit = Object.keys(propTypes);\nvar defaultProps = {\n isOpen: false,\n autoFocus: true,\n centered: false,\n scrollable: false,\n role: 'dialog',\n backdrop: true,\n keyboard: true,\n zIndex: 1050,\n fade: true,\n onOpened: noop,\n onClosed: noop,\n modalTransition: {\n timeout: TransitionTimeouts.Modal\n },\n backdropTransition: {\n mountOnEnter: true,\n timeout: TransitionTimeouts.Fade // uses standard fade transition\n\n },\n unmountOnClose: true,\n returnFocusAfterClose: true\n};\n\nvar Modal = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Modal, _React$Component);\n\n function Modal(props) {\n var _this;\n\n _this = _React$Component.call(this, props) || this;\n _this._element = null;\n _this._originalBodyPadding = null;\n _this.getFocusableChildren = _this.getFocusableChildren.bind(_assertThisInitialized(_this));\n _this.handleBackdropClick = _this.handleBackdropClick.bind(_assertThisInitialized(_this));\n _this.handleBackdropMouseDown = _this.handleBackdropMouseDown.bind(_assertThisInitialized(_this));\n _this.handleEscape = _this.handleEscape.bind(_assertThisInitialized(_this));\n _this.handleTab = _this.handleTab.bind(_assertThisInitialized(_this));\n _this.onOpened = _this.onOpened.bind(_assertThisInitialized(_this));\n _this.onClosed = _this.onClosed.bind(_assertThisInitialized(_this));\n _this.manageFocusAfterClose = _this.manageFocusAfterClose.bind(_assertThisInitialized(_this));\n _this.state = {\n isOpen: false\n };\n return _this;\n }\n\n var _proto = Modal.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n var _this$props = this.props,\n isOpen = _this$props.isOpen,\n autoFocus = _this$props.autoFocus,\n onEnter = _this$props.onEnter;\n\n if (isOpen) {\n this.init();\n this.setState({\n isOpen: true\n });\n\n if (autoFocus) {\n this.setFocus();\n }\n }\n\n if (onEnter) {\n onEnter();\n }\n\n this._isMounted = true;\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {\n if (this.props.isOpen && !prevProps.isOpen) {\n this.init();\n this.setState({\n isOpen: true\n }); // let render() renders Modal Dialog first\n\n return;\n } // now Modal Dialog is rendered and we can refer this._element and this._dialog\n\n\n if (this.props.autoFocus && this.state.isOpen && !prevState.isOpen) {\n this.setFocus();\n }\n\n if (this._element && prevProps.zIndex !== this.props.zIndex) {\n this._element.style.zIndex = this.props.zIndex;\n }\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n if (this.props.onExit) {\n this.props.onExit();\n }\n\n if (this._element) {\n this.destroy();\n\n if (this.state.isOpen) {\n this.close();\n }\n }\n\n this._isMounted = false;\n };\n\n _proto.onOpened = function onOpened(node, isAppearing) {\n this.props.onOpened();\n (this.props.modalTransition.onEntered || noop)(node, isAppearing);\n };\n\n _proto.onClosed = function onClosed(node) {\n var unmountOnClose = this.props.unmountOnClose; // so all methods get called before it is unmounted\n\n this.props.onClosed();\n (this.props.modalTransition.onExited || noop)(node);\n\n if (unmountOnClose) {\n this.destroy();\n }\n\n this.close();\n\n if (this._isMounted) {\n this.setState({\n isOpen: false\n });\n }\n };\n\n _proto.setFocus = function setFocus() {\n if (this._dialog && this._dialog.parentNode && typeof this._dialog.parentNode.focus === 'function') {\n this._dialog.parentNode.focus();\n }\n };\n\n _proto.getFocusableChildren = function getFocusableChildren() {\n return this._element.querySelectorAll(focusableElements.join(', '));\n };\n\n _proto.getFocusedChild = function getFocusedChild() {\n var currentFocus;\n var focusableChildren = this.getFocusableChildren();\n\n try {\n currentFocus = document.activeElement;\n } catch (err) {\n currentFocus = focusableChildren[0];\n }\n\n return currentFocus;\n } // not mouseUp because scrollbar fires it, shouldn't close when user scrolls\n ;\n\n _proto.handleBackdropClick = function handleBackdropClick(e) {\n if (e.target === this._mouseDownElement) {\n e.stopPropagation();\n if (!this.props.isOpen || this.props.backdrop !== true) return;\n var backdrop = this._dialog ? this._dialog.parentNode : null;\n\n if (backdrop && e.target === backdrop && this.props.toggle) {\n this.props.toggle(e);\n }\n }\n };\n\n _proto.handleTab = function handleTab(e) {\n if (e.which !== 9) return;\n var focusableChildren = this.getFocusableChildren();\n var totalFocusable = focusableChildren.length;\n if (totalFocusable === 0) return;\n var currentFocus = this.getFocusedChild();\n var focusedIndex = 0;\n\n for (var i = 0; i < totalFocusable; i += 1) {\n if (focusableChildren[i] === currentFocus) {\n focusedIndex = i;\n break;\n }\n }\n\n if (e.shiftKey && focusedIndex === 0) {\n e.preventDefault();\n focusableChildren[totalFocusable - 1].focus();\n } else if (!e.shiftKey && focusedIndex === totalFocusable - 1) {\n e.preventDefault();\n focusableChildren[0].focus();\n }\n };\n\n _proto.handleBackdropMouseDown = function handleBackdropMouseDown(e) {\n this._mouseDownElement = e.target;\n };\n\n _proto.handleEscape = function handleEscape(e) {\n if (this.props.isOpen && this.props.keyboard && e.keyCode === 27 && this.props.toggle) {\n e.preventDefault();\n e.stopPropagation();\n this.props.toggle(e);\n }\n };\n\n _proto.init = function init() {\n try {\n this._triggeringElement = document.activeElement;\n } catch (err) {\n this._triggeringElement = null;\n }\n\n if (!this._element) {\n this._element = document.createElement('div');\n\n this._element.setAttribute('tabindex', '-1');\n\n this._element.style.position = 'relative';\n this._element.style.zIndex = this.props.zIndex;\n document.body.appendChild(this._element);\n }\n\n this._originalBodyPadding = getOriginalBodyPadding();\n conditionallyUpdateScrollbar();\n\n if (Modal.openCount === 0) {\n document.body.className = classNames(document.body.className, mapToCssModules('modal-open', this.props.cssModule));\n }\n\n Modal.openCount += 1;\n };\n\n _proto.destroy = function destroy() {\n if (this._element) {\n document.body.removeChild(this._element);\n this._element = null;\n }\n\n this.manageFocusAfterClose();\n };\n\n _proto.manageFocusAfterClose = function manageFocusAfterClose() {\n if (this._triggeringElement) {\n var returnFocusAfterClose = this.props.returnFocusAfterClose;\n if (this._triggeringElement.focus && returnFocusAfterClose) this._triggeringElement.focus();\n this._triggeringElement = null;\n }\n };\n\n _proto.close = function close() {\n if (Modal.openCount <= 1) {\n var modalOpenClassName = mapToCssModules('modal-open', this.props.cssModule); // Use regex to prevent matching `modal-open` as part of a different class, e.g. `my-modal-opened`\n\n var modalOpenClassNameRegex = new RegExp(\"(^| )\" + modalOpenClassName + \"( |$)\");\n document.body.className = document.body.className.replace(modalOpenClassNameRegex, ' ').trim();\n }\n\n this.manageFocusAfterClose();\n Modal.openCount = Math.max(0, Modal.openCount - 1);\n setScrollbarWidth(this._originalBodyPadding);\n };\n\n _proto.renderModalDialog = function renderModalDialog() {\n var _classNames,\n _this2 = this;\n\n var attributes = omit(this.props, propsToOmit);\n var dialogBaseClass = 'modal-dialog';\n return React.createElement(\"div\", _extends({}, attributes, {\n className: mapToCssModules(classNames(dialogBaseClass, this.props.className, (_classNames = {}, _classNames[\"modal-\" + this.props.size] = this.props.size, _classNames[dialogBaseClass + \"-centered\"] = this.props.centered, _classNames[dialogBaseClass + \"-scrollable\"] = this.props.scrollable, _classNames)), this.props.cssModule),\n role: \"document\",\n ref: function ref(c) {\n _this2._dialog = c;\n }\n }), React.createElement(\"div\", {\n className: mapToCssModules(classNames('modal-content', this.props.contentClassName), this.props.cssModule)\n }, this.props.children));\n };\n\n _proto.render = function render() {\n var unmountOnClose = this.props.unmountOnClose;\n\n if (!!this._element && (this.state.isOpen || !unmountOnClose)) {\n var isModalHidden = !!this._element && !this.state.isOpen && !unmountOnClose;\n this._element.style.display = isModalHidden ? 'none' : 'block';\n var _this$props2 = this.props,\n wrapClassName = _this$props2.wrapClassName,\n modalClassName = _this$props2.modalClassName,\n backdropClassName = _this$props2.backdropClassName,\n cssModule = _this$props2.cssModule,\n isOpen = _this$props2.isOpen,\n backdrop = _this$props2.backdrop,\n role = _this$props2.role,\n labelledBy = _this$props2.labelledBy,\n external = _this$props2.external,\n innerRef = _this$props2.innerRef;\n var modalAttributes = {\n onClick: this.handleBackdropClick,\n onMouseDown: this.handleBackdropMouseDown,\n onKeyUp: this.handleEscape,\n onKeyDown: this.handleTab,\n style: {\n display: 'block'\n },\n 'aria-labelledby': labelledBy,\n role: role,\n tabIndex: '-1'\n };\n var hasTransition = this.props.fade;\n\n var modalTransition = _objectSpread2({}, Fade.defaultProps, {}, this.props.modalTransition, {\n baseClass: hasTransition ? this.props.modalTransition.baseClass : '',\n timeout: hasTransition ? this.props.modalTransition.timeout : 0\n });\n\n var backdropTransition = _objectSpread2({}, Fade.defaultProps, {}, this.props.backdropTransition, {\n baseClass: hasTransition ? this.props.backdropTransition.baseClass : '',\n timeout: hasTransition ? this.props.backdropTransition.timeout : 0\n });\n\n var Backdrop = backdrop && (hasTransition ? React.createElement(Fade, _extends({}, backdropTransition, {\n in: isOpen && !!backdrop,\n cssModule: cssModule,\n className: mapToCssModules(classNames('modal-backdrop', backdropClassName), cssModule)\n })) : React.createElement(\"div\", {\n className: mapToCssModules(classNames('modal-backdrop', 'show', backdropClassName), cssModule)\n }));\n return React.createElement(Portal, {\n node: this._element\n }, React.createElement(\"div\", {\n className: mapToCssModules(wrapClassName)\n }, React.createElement(Fade, _extends({}, modalAttributes, modalTransition, {\n in: isOpen,\n onEntered: this.onOpened,\n onExited: this.onClosed,\n cssModule: cssModule,\n className: mapToCssModules(classNames('modal', modalClassName), cssModule),\n innerRef: innerRef\n }), external, this.renderModalDialog()), Backdrop));\n }\n\n return null;\n };\n\n return Modal;\n}(React.Component);\n\nModal.propTypes = propTypes;\nModal.defaultProps = defaultProps;\nModal.openCount = 0;\nexport default Modal;","map":null,"metadata":{},"sourceType":"module"} |