function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } import contains from 'dom-helpers/query/contains'; import listen from 'dom-helpers/events/listen'; import PropTypes from 'prop-types'; import React from 'react'; import ReactDOM from 'react-dom'; import ownerDocument from './utils/ownerDocument'; var escapeKeyCode = 27; var noop = function noop() {}; function isLeftClickEvent(event) { return event.button === 0; } function isModifiedEvent(event) { return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey); } /** * The `` component registers your callback on the document * when rendered. Powers the `` component. This is used achieve modal * style behavior where your callback is triggered when the user tries to * interact with the rest of the document or hits the `esc` key. */ var RootCloseWrapper = /*#__PURE__*/ function (_React$Component) { _inheritsLoose(RootCloseWrapper, _React$Component); function RootCloseWrapper(props, context) { var _this; _this = _React$Component.call(this, props, context) || this; _this.addEventListeners = function () { var event = _this.props.event; var doc = ownerDocument(_assertThisInitialized(_assertThisInitialized(_this))); // Use capture for this listener so it fires before React's listener, to // avoid false positives in the contains() check below if the target DOM // element is removed in the React mouse callback. _this.removeMouseCaptureListener = listen(doc, event, _this.handleMouseCapture, true); _this.removeMouseListener = listen(doc, event, _this.handleMouse); _this.removeKeyupListener = listen(doc, 'keyup', _this.handleKeyUp); if ('ontouchstart' in doc.documentElement) { _this.mobileSafariHackListeners = [].slice.call(document.body.children).map(function (el) { return listen(el, 'mousemove', noop); }); } }; _this.removeEventListeners = function () { if (_this.removeMouseCaptureListener) _this.removeMouseCaptureListener(); if (_this.removeMouseListener) _this.removeMouseListener(); if (_this.removeKeyupListener) _this.removeKeyupListener(); if (_this.mobileSafariHackListeners) _this.mobileSafariHackListeners.forEach(function (remove) { return remove(); }); }; _this.handleMouseCapture = function (e) { _this.preventMouseRootClose = isModifiedEvent(e) || !isLeftClickEvent(e) || contains(ReactDOM.findDOMNode(_assertThisInitialized(_assertThisInitialized(_this))), e.target); }; _this.handleMouse = function (e) { if (!_this.preventMouseRootClose && _this.props.onRootClose) { _this.props.onRootClose(e); } }; _this.handleKeyUp = function (e) { if (e.keyCode === escapeKeyCode && _this.props.onRootClose) { _this.props.onRootClose(e); } }; _this.preventMouseRootClose = false; return _this; } var _proto = RootCloseWrapper.prototype; _proto.componentDidMount = function componentDidMount() { if (!this.props.disabled) { this.addEventListeners(); } }; _proto.componentDidUpdate = function componentDidUpdate(prevProps) { if (!this.props.disabled && prevProps.disabled) { this.addEventListeners(); } else if (this.props.disabled && !prevProps.disabled) { this.removeEventListeners(); } }; _proto.componentWillUnmount = function componentWillUnmount() { if (!this.props.disabled) { this.removeEventListeners(); } }; _proto.render = function render() { return this.props.children; }; return RootCloseWrapper; }(React.Component); RootCloseWrapper.displayName = 'RootCloseWrapper'; RootCloseWrapper.propTypes = { /** * Callback fired after click or mousedown. Also triggers when user hits `esc`. */ onRootClose: PropTypes.func, /** * Children to render. */ children: PropTypes.element, /** * Disable the the RootCloseWrapper, preventing it from triggering `onRootClose`. */ disabled: PropTypes.bool, /** * Choose which document mouse event to bind to. */ event: PropTypes.oneOf(['click', 'mousedown']) }; RootCloseWrapper.defaultProps = { event: 'click' }; export default RootCloseWrapper;