@helpscout/hsds-react/components/EventListener/EventListener.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _node = require("../../utilities/node");

var _jsxRuntime = require("react/jsx-runtime");

// see https://github.com/oliviertassinari/react-event-listener/
var EventListener = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2.default)(EventListener, _React$Component);

  function EventListener() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.node = void 0;
    _this.scope = void 0;

    _this.setInternalScopeFromProps = function (props) {
      var scope = props.scope;
      var _document = document;
      var internalScope = scope;

      if (scope === document) {
        _document = (0, _node.getClosestDocument)(_this.node);
        internalScope = _document;
      }

      if (scope === document.body) {
        internalScope = _document.body;
      }

      _this.scope = internalScope;
    };

    _this.attachListener = function () {
      var _this$props = _this.props,
          event = _this$props.event,
          handler = _this$props.handler,
          capture = _this$props.capture,
          passive = _this$props.passive;
      event.split(' ').forEach(function (eventType) {
        if (_this.scope) {
          _this.scope.addEventListener(eventType, handler, {
            capture: capture,
            passive: passive
          });
        }
      });
    };

    _this.detachListener = function () {
      var _this$props2 = _this.props,
          event = _this$props2.event,
          handler = _this$props2.handler,
          capture = _this$props2.capture;
      event.split(' ').forEach(function (eventType) {
        if (_this.scope) {
          _this.scope.removeEventListener(eventType, handler, capture);
        }
      });
    };

    _this.setNodeRef = function (node) {
      return _this.node = node;
    };

    return _this;
  }

  var _proto = EventListener.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.setInternalScopeFromProps(this.props);
    this.attachListener();
  };

  _proto.UNSAFE_componentWillUpdate = function UNSAFE_componentWillUpdate() {
    this.detachListener();
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (prevProps.scope !== this.props.scope) {
      this.detachListener();
      this.setInternalScopeFromProps(this.props);
    }

    this.attachListener();
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this.detachListener();
  };

  _proto.render = function render() {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "c-EventListenerRoot",
      ref: this.setNodeRef
    });
  };

  return EventListener;
}(_react.default.Component);

function noop() {}

EventListener.defaultProps = {
  handler: noop,
  scope: window
};
EventListener.propTypes = {
  /** A Javascript event. */
  event: _propTypes.default.string,

  /** Callback when the event is triggered. */
  handler: _propTypes.default.func,

  /** Node element to capture the event. Default is `window`. */
  scope: _propTypes.default.any,

  /** indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree */
  capture: _propTypes.default.bool,

  /** indicates that the function specified by listener will never call preventDefault() */
  passive: _propTypes.default.bool
};
var _default = EventListener;
exports.default = _default;