1 line
15 KiB
JSON
1 line
15 KiB
JSON
{"ast":null,"code":"import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _assertThisInitialized from \"@babel/runtime/helpers/esm/assertThisInitialized\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\n/* eslint-disable react/prop-types */\n\nimport activeElement from 'dom-helpers/activeElement';\nimport contains from 'dom-helpers/contains';\nimport canUseDOM from 'dom-helpers/canUseDOM';\nimport listen from 'dom-helpers/listen';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ModalManager from './ModalManager';\nimport ownerDocument from './utils/ownerDocument';\nimport useWaitForDOMRef from './utils/useWaitForDOMRef';\nvar modalManager = new ModalManager();\n\nfunction omitProps(props, propTypes) {\n var keys = Object.keys(props);\n var newProps = {};\n keys.forEach(function (prop) {\n if (!Object.prototype.hasOwnProperty.call(propTypes, prop)) {\n newProps[prop] = props[prop];\n }\n });\n return newProps;\n}\n/**\n * Love them or hate them, `<Modal />` provides a solid foundation for creating dialogs, lightboxes, or whatever else.\n * The Modal component renders its `children` node in front of a backdrop component.\n *\n * The Modal offers a few helpful features over using just a `<Portal/>` component and some styles:\n *\n * - Manages dialog stacking when one-at-a-time just isn't enough.\n * - Creates a backdrop, for disabling interaction below the modal.\n * - It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.\n * - It disables scrolling of the page content while open.\n * - Adds the appropriate ARIA roles are automatically.\n * - Easily pluggable animations via a `<Transition/>` component.\n *\n * Note that, in the same way the backdrop element prevents users from clicking or interacting\n * with the page content underneath the Modal, Screen readers also need to be signaled to not to\n * interact with page content while the Modal is open. To do this, we use a common technique of applying\n * the `aria-hidden='true'` attribute to the non-Modal elements in the Modal `container`. This means that for\n * a Modal to be truly modal, it should have a `container` that is _outside_ your app's\n * React hierarchy (such as the default: document.body).\n */\n\n\nvar Modal = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Modal, _React$Component);\n\n function Modal() {\n var _this;\n\n for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {\n _args[_key] = arguments[_key];\n }\n\n _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;\n _this.state = {\n exited: !_this.props.show\n };\n\n _this.onShow = function () {\n var _this$props = _this.props,\n container = _this$props.container,\n containerClassName = _this$props.containerClassName,\n manager = _this$props.manager,\n onShow = _this$props.onShow;\n manager.add(_assertThisInitialized(_this), container, containerClassName);\n _this.removeKeydownListener = listen(document, 'keydown', _this.handleDocumentKeyDown);\n _this.removeFocusListener = listen(document, 'focus', // the timeout is necessary b/c this will run before the new modal is mounted\n // and so steals focus from it\n function () {\n return setTimeout(_this.enforceFocus);\n }, true);\n\n if (onShow) {\n onShow();\n } // autofocus after onShow, to not trigger a focus event for previous\n // modals before this one is shown.\n\n\n _this.autoFocus();\n };\n\n _this.onHide = function () {\n _this.props.manager.remove(_assertThisInitialized(_this));\n\n _this.removeKeydownListener();\n\n _this.removeFocusListener();\n\n if (_this.props.restoreFocus) {\n _this.restoreLastFocus();\n }\n };\n\n _this.setDialogRef = function (ref) {\n _this.dialog = ref;\n };\n\n _this.setBackdropRef = function (ref) {\n _this.backdrop = ref && ReactDOM.findDOMNode(ref);\n };\n\n _this.handleHidden = function () {\n _this.setState({\n exited: true\n });\n\n _this.onHide();\n\n if (_this.props.onExited) {\n var _this$props2;\n\n (_this$props2 = _this.props).onExited.apply(_this$props2, arguments);\n }\n };\n\n _this.handleBackdropClick = function (e) {\n if (e.target !== e.currentTarget) {\n return;\n }\n\n if (_this.props.onBackdropClick) {\n _this.props.onBackdropClick(e);\n }\n\n if (_this.props.backdrop === true) {\n _this.props.onHide();\n }\n };\n\n _this.handleDocumentKeyDown = function (e) {\n if (_this.props.keyboard && e.keyCode === 27 && _this.isTopModal()) {\n if (_this.props.onEscapeKeyDown) {\n _this.props.onEscapeKeyDown(e);\n }\n\n _this.props.onHide();\n }\n };\n\n _this.enforceFocus = function () {\n if (!_this.props.enforceFocus || !_this._isMounted || !_this.isTopModal()) {\n return;\n }\n\n var currentActiveElement = activeElement(ownerDocument(_assertThisInitialized(_this)));\n\n if (_this.dialog && !contains(_this.dialog, currentActiveElement)) {\n _this.dialog.focus();\n }\n };\n\n _this.renderBackdrop = function () {\n var _this$props3 = _this.props,\n renderBackdrop = _this$props3.renderBackdrop,\n Transition = _this$props3.backdropTransition;\n var backdrop = renderBackdrop({\n ref: _this.setBackdropRef,\n onClick: _this.handleBackdropClick\n });\n\n if (Transition) {\n backdrop = React.createElement(Transition, {\n appear: true,\n \"in\": _this.props.show\n }, backdrop);\n }\n\n return backdrop;\n };\n\n return _this;\n }\n\n Modal.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps) {\n if (nextProps.show) {\n return {\n exited: false\n };\n }\n\n if (!nextProps.transition) {\n // Otherwise let handleHidden take care of marking exited.\n return {\n exited: true\n };\n }\n\n return null;\n };\n\n var _proto = Modal.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this._isMounted = true;\n\n if (this.props.show) {\n this.onShow();\n }\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var transition = this.props.transition;\n\n if (prevProps.show && !this.props.show && !transition) {\n // Otherwise handleHidden will call this.\n this.onHide();\n } else if (!prevProps.show && this.props.show) {\n this.onShow();\n }\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n var _this$props4 = this.props,\n show = _this$props4.show,\n transition = _this$props4.transition;\n this._isMounted = false;\n\n if (show || transition && !this.state.exited) {\n this.onHide();\n }\n };\n\n _proto.getSnapshotBeforeUpdate = function getSnapshotBeforeUpdate(prevProps) {\n if (canUseDOM && !prevProps.show && this.props.show) {\n this.lastFocus = activeElement();\n }\n\n return null;\n };\n\n _proto.restoreLastFocus = function restoreLastFocus() {\n // Support: <=IE11 doesn't support `focus()` on svg elements (RB: #917)\n if (this.lastFocus && this.lastFocus.focus) {\n this.lastFocus.focus(this.props.restoreFocusOptions);\n this.lastFocus = null;\n }\n };\n\n _proto.autoFocus = function autoFocus() {\n if (!this.props.autoFocus) return;\n var currentActiveElement = activeElement(ownerDocument(this));\n\n if (this.dialog && !contains(this.dialog, currentActiveElement)) {\n this.lastFocus = currentActiveElement;\n this.dialog.focus();\n }\n };\n\n _proto.isTopModal = function isTopModal() {\n return this.props.manager.isTopModal(this);\n };\n\n _proto.render = function render() {\n var _this$props5 = this.props,\n show = _this$props5.show,\n container = _this$props5.container,\n children = _this$props5.children,\n renderDialog = _this$props5.renderDialog,\n _this$props5$role = _this$props5.role,\n role = _this$props5$role === void 0 ? 'dialog' : _this$props5$role,\n Transition = _this$props5.transition,\n backdrop = _this$props5.backdrop,\n className = _this$props5.className,\n style = _this$props5.style,\n onExit = _this$props5.onExit,\n onExiting = _this$props5.onExiting,\n onEnter = _this$props5.onEnter,\n onEntering = _this$props5.onEntering,\n onEntered = _this$props5.onEntered,\n props = _objectWithoutPropertiesLoose(_this$props5, [\"show\", \"container\", \"children\", \"renderDialog\", \"role\", \"transition\", \"backdrop\", \"className\", \"style\", \"onExit\", \"onExiting\", \"onEnter\", \"onEntering\", \"onEntered\"]);\n\n if (!(show || Transition && !this.state.exited)) {\n return null;\n }\n\n var dialogProps = _extends({\n role: role,\n ref: this.setDialogRef,\n // apparently only works on the dialog role element\n 'aria-modal': role === 'dialog' ? true : undefined\n }, omitProps(props, Modal.propTypes), {\n style: style,\n className: className,\n tabIndex: '-1'\n });\n\n var dialog = renderDialog ? renderDialog(dialogProps) : React.createElement(\"div\", dialogProps, React.cloneElement(children, {\n role: 'document'\n }));\n\n if (Transition) {\n dialog = React.createElement(Transition, {\n appear: true,\n unmountOnExit: true,\n \"in\": show,\n onExit: onExit,\n onExiting: onExiting,\n onExited: this.handleHidden,\n onEnter: onEnter,\n onEntering: onEntering,\n onEntered: onEntered\n }, dialog);\n }\n\n return ReactDOM.createPortal(React.createElement(React.Fragment, null, backdrop && this.renderBackdrop(), dialog), container);\n };\n\n return Modal;\n}(React.Component); // dumb HOC for the sake react-docgen\n\n\nModal.propTypes = {\n /**\n * Set the visibility of the Modal\n */\n show: PropTypes.bool,\n\n /**\n * A DOM element, a `ref` to an element, or function that returns either. The Modal is appended to it's `container` element.\n *\n * For the sake of assistive technologies, the container should usually be the document body, so that the rest of the\n * page content can be placed behind a virtual backdrop as well as a visual one.\n */\n container: PropTypes.any,\n\n /**\n * A callback fired when the Modal is opening.\n */\n onShow: PropTypes.func,\n\n /**\n * A callback fired when either the backdrop is clicked, or the escape key is pressed.\n *\n * The `onHide` callback only signals intent from the Modal,\n * you must actually set the `show` prop to `false` for the Modal to close.\n */\n onHide: PropTypes.func,\n\n /**\n * Include a backdrop component.\n */\n backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])]),\n\n /**\n * A function that returns the dialog component. Useful for custom\n * rendering. **Note:** the component should make sure to apply the provided ref.\n *\n * ```js\n * renderDialog={props => <MyDialog {...props} />}\n * ```\n */\n renderDialog: PropTypes.func,\n\n /**\n * A function that returns a backdrop component. Useful for custom\n * backdrop rendering.\n *\n * ```js\n * renderBackdrop={props => <MyBackdrop {...props} />}\n * ```\n */\n renderBackdrop: PropTypes.func,\n\n /**\n * A callback fired when the escape key, if specified in `keyboard`, is pressed.\n */\n onEscapeKeyDown: PropTypes.func,\n\n /**\n * A callback fired when the backdrop, if specified, is clicked.\n */\n onBackdropClick: PropTypes.func,\n\n /**\n * A css class or set of classes applied to the modal container when the modal is open,\n * and removed when it is closed.\n */\n containerClassName: PropTypes.string,\n\n /**\n * Close the modal when escape key is pressed\n */\n keyboard: PropTypes.bool,\n\n /**\n * A `react-transition-group@2.0.0` `<Transition/>` component used\n * to control animations for the dialog component.\n */\n transition: PropTypes.elementType,\n\n /**\n * A `react-transition-group@2.0.0` `<Transition/>` component used\n * to control animations for the backdrop components.\n */\n backdropTransition: PropTypes.elementType,\n\n /**\n * When `true` The modal will automatically shift focus to itself when it opens, and\n * replace it to the last focused element when it closes. This also\n * works correctly with any Modal children that have the `autoFocus` prop.\n *\n * Generally this should never be set to `false` as it makes the Modal less\n * accessible to assistive technologies, like screen readers.\n */\n autoFocus: PropTypes.bool,\n\n /**\n * When `true` The modal will prevent focus from leaving the Modal while open.\n *\n * Generally this should never be set to `false` as it makes the Modal less\n * accessible to assistive technologies, like screen readers.\n */\n enforceFocus: PropTypes.bool,\n\n /**\n * When `true` The modal will restore focus to previously focused element once\n * modal is hidden\n */\n restoreFocus: PropTypes.bool,\n\n /**\n * Options passed to focus function when `restoreFocus` is set to `true`\n *\n * @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#Parameters\n */\n restoreFocusOptions: PropTypes.shape({\n preventScroll: PropTypes.bool\n }),\n\n /**\n * Callback fired before the Modal transitions in\n */\n onEnter: PropTypes.func,\n\n /**\n * Callback fired as the Modal begins to transition in\n */\n onEntering: PropTypes.func,\n\n /**\n * Callback fired after the Modal finishes transitioning in\n */\n onEntered: PropTypes.func,\n\n /**\n * Callback fired right before the Modal transitions out\n */\n onExit: PropTypes.func,\n\n /**\n * Callback fired as the Modal begins to transition out\n */\n onExiting: PropTypes.func,\n\n /**\n * Callback fired after the Modal finishes transitioning out\n */\n onExited: PropTypes.func,\n\n /**\n * A ModalManager instance used to track and manage the state of open\n * Modals. Useful when customizing how modals interact within a container\n */\n manager: PropTypes.object.isRequired\n};\nModal.defaultProps = {\n show: false,\n role: 'dialog',\n backdrop: true,\n keyboard: true,\n autoFocus: true,\n enforceFocus: true,\n restoreFocus: true,\n onHide: function onHide() {},\n manager: modalManager,\n renderBackdrop: function renderBackdrop(props) {\n return React.createElement(\"div\", props);\n }\n};\n\nfunction forwardRef(Component) {\n // eslint-disable-next-line react/display-name\n var ModalWithContainer = React.forwardRef(function (props, ref) {\n var resolved = useWaitForDOMRef(props.container);\n return resolved ? React.createElement(Component, _extends({}, props, {\n ref: ref,\n container: resolved\n })) : null;\n });\n ModalWithContainer.Manager = ModalManager;\n ModalWithContainer._Inner = Component;\n return ModalWithContainer;\n}\n\nvar ModalWithContainer = forwardRef(Modal);\nModalWithContainer.Manager = ModalManager;\nexport default ModalWithContainer;","map":null,"metadata":{},"sourceType":"module"} |