react-spatial/components/StopEvents/StopEvents.js

Components to build React map apps.

import ReactDOM from 'react-dom';
import { Component, PureComponent } from 'react';
import PropTypes from 'prop-types';

var propTypes = {
  /**
   * HTML element to observe.
   *
   * Can be React.Component or a CSS selector manageable by
   * document.querySelectorAll;
   *
   */
  observe: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.instanceOf(Component),
    PropTypes.instanceOf(HTMLElement) ]),

  /**
   * List of user events to stop the propagation.
   */
  events: PropTypes.arrayOf(PropTypes.string),
};

var defaultProps = {
  observe: null,
  events: [
    'pointerdown',
    'pointermove',
    'pointerup',
    'keypress',
    'keydown',
    'keyup' ],
};

/**
 * This component stop propagation of user events on an HTML element.
 */
var StopEvents = /*@__PURE__*/(function (PureComponent) {
  function StopEvents(props) {
    PureComponent.call(this, props);
    this.nodes = [];
  }

  if ( PureComponent ) StopEvents.__proto__ = PureComponent;
  StopEvents.prototype = Object.create( PureComponent && PureComponent.prototype );
  StopEvents.prototype.constructor = StopEvents;

  StopEvents.stop = function stop (evt) {
    evt.stopPropagation();
    if (evt.nativeEvent) {
      evt.nativeEvent.stopImmediatePropagation();
    }
    document.body.classList.remove('tm-pointer');
  };

  StopEvents.prototype.componentDidMount = function componentDidMount () {
    this.updateNodes();
    this.addListeners();
  };

  StopEvents.prototype.componentDidUpdate = function componentDidUpdate (prevProps) {
    var ref = this.props;
    var observe = ref.observe;
    if (observe && !prevProps.observe) {
      this.removeListeners();
      this.updateNodes();
      this.addListeners();
    }
  };

  StopEvents.prototype.componentWillUnmount = function componentWillUnmount () {
    this.removeListeners();
  };

  StopEvents.prototype.addListeners = function addListeners () {
    var ref = this.props;
    var events = ref.events;

    if (!this.nodes.length) {
      return;
    }

    this.nodes.forEach(function (node) {
      events.forEach(function (evt) {
        node.addEventListener(evt, StopEvents.stop);
      });
    });
  };

  StopEvents.prototype.removeListeners = function removeListeners () {
    var ref = this.props;
    var events = ref.events;
    if (!this.nodes.length) {
      return;
    }

    this.nodes.forEach(function (node) {
      events.forEach(function (evt) {
        node.removeEventListener(evt, StopEvents.stop);
      });
    });
  };

  StopEvents.prototype.updateNodes = function updateNodes () {
    var ref = this.props;
    var observe = ref.observe;
    this.nodes = [];
    if (typeof observe === 'string' || observe instanceof String) {
      this.nodes = document.querySelectorAll(observe);
    } else if (observe instanceof Component) {
      // eslint-disable-next-line react/no-find-dom-node
      var node = ReactDOM.findDOMNode(observe);
      if (node instanceof HTMLElement) {
        this.nodes.push(node);
      }
    } else if (observe instanceof HTMLElement) {
      this.nodes.push(observe);
    }
  };

  StopEvents.prototype.render = function render () {
    return null;
  };

  return StopEvents;
}(PureComponent));

StopEvents.propTypes = propTypes;
StopEvents.defaultProps = defaultProps;

export default StopEvents;

//# sourceMappingURL=StopEvents.js.map