123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- 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 `<RootCloseWrapper/>` component registers your callback on the document
- * when rendered. Powers the `<Overlay/>` 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;
|