Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

RootCloseWrapper.js 4.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
  2. function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
  3. import contains from 'dom-helpers/query/contains';
  4. import listen from 'dom-helpers/events/listen';
  5. import PropTypes from 'prop-types';
  6. import React from 'react';
  7. import ReactDOM from 'react-dom';
  8. import ownerDocument from './utils/ownerDocument';
  9. var escapeKeyCode = 27;
  10. var noop = function noop() {};
  11. function isLeftClickEvent(event) {
  12. return event.button === 0;
  13. }
  14. function isModifiedEvent(event) {
  15. return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
  16. }
  17. /**
  18. * The `<RootCloseWrapper/>` component registers your callback on the document
  19. * when rendered. Powers the `<Overlay/>` component. This is used achieve modal
  20. * style behavior where your callback is triggered when the user tries to
  21. * interact with the rest of the document or hits the `esc` key.
  22. */
  23. var RootCloseWrapper =
  24. /*#__PURE__*/
  25. function (_React$Component) {
  26. _inheritsLoose(RootCloseWrapper, _React$Component);
  27. function RootCloseWrapper(props, context) {
  28. var _this;
  29. _this = _React$Component.call(this, props, context) || this;
  30. _this.addEventListeners = function () {
  31. var event = _this.props.event;
  32. var doc = ownerDocument(_assertThisInitialized(_assertThisInitialized(_this))); // Use capture for this listener so it fires before React's listener, to
  33. // avoid false positives in the contains() check below if the target DOM
  34. // element is removed in the React mouse callback.
  35. _this.removeMouseCaptureListener = listen(doc, event, _this.handleMouseCapture, true);
  36. _this.removeMouseListener = listen(doc, event, _this.handleMouse);
  37. _this.removeKeyupListener = listen(doc, 'keyup', _this.handleKeyUp);
  38. if ('ontouchstart' in doc.documentElement) {
  39. _this.mobileSafariHackListeners = [].slice.call(document.body.children).map(function (el) {
  40. return listen(el, 'mousemove', noop);
  41. });
  42. }
  43. };
  44. _this.removeEventListeners = function () {
  45. if (_this.removeMouseCaptureListener) _this.removeMouseCaptureListener();
  46. if (_this.removeMouseListener) _this.removeMouseListener();
  47. if (_this.removeKeyupListener) _this.removeKeyupListener();
  48. if (_this.mobileSafariHackListeners) _this.mobileSafariHackListeners.forEach(function (remove) {
  49. return remove();
  50. });
  51. };
  52. _this.handleMouseCapture = function (e) {
  53. _this.preventMouseRootClose = isModifiedEvent(e) || !isLeftClickEvent(e) || contains(ReactDOM.findDOMNode(_assertThisInitialized(_assertThisInitialized(_this))), e.target);
  54. };
  55. _this.handleMouse = function (e) {
  56. if (!_this.preventMouseRootClose && _this.props.onRootClose) {
  57. _this.props.onRootClose(e);
  58. }
  59. };
  60. _this.handleKeyUp = function (e) {
  61. if (e.keyCode === escapeKeyCode && _this.props.onRootClose) {
  62. _this.props.onRootClose(e);
  63. }
  64. };
  65. _this.preventMouseRootClose = false;
  66. return _this;
  67. }
  68. var _proto = RootCloseWrapper.prototype;
  69. _proto.componentDidMount = function componentDidMount() {
  70. if (!this.props.disabled) {
  71. this.addEventListeners();
  72. }
  73. };
  74. _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
  75. if (!this.props.disabled && prevProps.disabled) {
  76. this.addEventListeners();
  77. } else if (this.props.disabled && !prevProps.disabled) {
  78. this.removeEventListeners();
  79. }
  80. };
  81. _proto.componentWillUnmount = function componentWillUnmount() {
  82. if (!this.props.disabled) {
  83. this.removeEventListeners();
  84. }
  85. };
  86. _proto.render = function render() {
  87. return this.props.children;
  88. };
  89. return RootCloseWrapper;
  90. }(React.Component);
  91. RootCloseWrapper.displayName = 'RootCloseWrapper';
  92. RootCloseWrapper.propTypes = {
  93. /**
  94. * Callback fired after click or mousedown. Also triggers when user hits `esc`.
  95. */
  96. onRootClose: PropTypes.func,
  97. /**
  98. * Children to render.
  99. */
  100. children: PropTypes.element,
  101. /**
  102. * Disable the the RootCloseWrapper, preventing it from triggering `onRootClose`.
  103. */
  104. disabled: PropTypes.bool,
  105. /**
  106. * Choose which document mouse event to bind to.
  107. */
  108. event: PropTypes.oneOf(['click', 'mousedown'])
  109. };
  110. RootCloseWrapper.defaultProps = {
  111. event: 'click'
  112. };
  113. export default RootCloseWrapper;