@jstarpl/react-contextmenu/es6/ContextMenuTrigger.js

Context Menu implemented in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _objectAssign = _interopRequireDefault(require("object-assign"));

var _actions = require("./actions");

var _helpers = require("./helpers");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

class ContextMenuTrigger extends _react.Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "touchHandled", false);

    _defineProperty(this, "preventContextMenuOpen", e => {
      if (this.touchstartTimeoutId && (0, _helpers.isElementParent)(this.elem, e.target)) {
        clearTimeout(this.touchstartTimeoutId);
        this.touchstartTimeoutId = null;
      }
    });

    _defineProperty(this, "handleMouseDown", event => {
      // eslint-disable-next-line no-magic-numbers
      if (this.props.holdToDisplay >= 0 && event.button === _helpers.PRIMARY_MOUSE_BUTTON) {
        event.persist();
        event.stopPropagation();
        this.mouseDownTimeoutId = setTimeout(() => this.handleContextClick(event), this.props.holdToDisplay);
      }

      (0, _helpers.callIfExists)(this.props.attributes.onMouseDown, event);
    });

    _defineProperty(this, "handleMouseUp", event => {
      // eslint-disable-next-line no-magic-numbers
      if (event.button === 0) {
        clearTimeout(this.mouseDownTimeoutId);
      }

      (0, _helpers.callIfExists)(this.props.attributes.onMouseUp, event);
    });

    _defineProperty(this, "handleMouseOut", event => {
      // eslint-disable-next-line no-magic-numbers
      if (event.button === 0) {
        clearTimeout(this.mouseDownTimeoutId);
      }

      (0, _helpers.callIfExists)(this.props.attributes.onMouseOut, event);
    });

    _defineProperty(this, "handleTouchstart", event => {
      this.touchHandled = false; // eslint-disable-next-line no-magic-numbers

      if (this.props.holdToDisplay >= 0) {
        event.persist();
        event.stopPropagation();
        this.touchstartTimeoutId = setTimeout(() => {
          this.handleContextClick(event);
          this.touchHandled = true;
        }, this.props.holdToDisplay);
      }

      (0, _helpers.callIfExists)(this.props.attributes.onTouchStart, event);
    });

    _defineProperty(this, "handleTouchEnd", event => {
      if (this.touchHandled) {
        event.preventDefault();
      }

      clearTimeout(this.touchstartTimeoutId);
      (0, _helpers.callIfExists)(this.props.attributes.onTouchEnd, event);
    });

    _defineProperty(this, "handleContextMenu", event => {
      if (event.button === this.props.mouseButton) {
        this.handleContextClick(event);
      }

      (0, _helpers.callIfExists)(this.props.attributes.onContextMenu, event);
    });

    _defineProperty(this, "handleMouseClick", event => {
      if (event.button === this.props.mouseButton) {
        this.handleContextClick(event);
      }

      (0, _helpers.callIfExists)(this.props.attributes.onClick, event);
    });

    _defineProperty(this, "handleContextClick", event => {
      if (this.props.disable) return;
      if (this.props.disableIfShiftIsPressed && event.shiftKey) return;
      event.preventDefault();
      event.stopPropagation();
      let x = event.clientX || event.touches && event.touches[0].pageX;
      let y = event.clientY || event.touches && event.touches[0].pageY;

      if (this.props.posX) {
        x -= this.props.posX;
      }

      if (this.props.posY) {
        y -= this.props.posY;
      }

      (0, _actions.hideMenu)();
      let data = (0, _helpers.callIfExists)(this.props.collect, this.props);
      let showMenuConfig = {
        position: {
          x,
          y
        },
        target: this.elem,
        id: this.props.id
      };

      if (data && typeof data.then === 'function') {
        // it's promise, we need to persist the event to pass the event.target later on
        event.persist();
        data.then(resp => {
          showMenuConfig.data = (0, _objectAssign.default)({}, resp, {
            target: event.target
          });
          (0, _actions.showMenu)(showMenuConfig);
        });
      } else {
        showMenuConfig.data = (0, _objectAssign.default)({}, data, {
          target: event.target
        });
        (0, _actions.showMenu)(showMenuConfig);
      }
    });

    _defineProperty(this, "elemRef", c => {
      this.elem = c;
    });
  }

  componentDidMount() {
    document.addEventListener('scroll', this.preventContextMenuOpen, {
      capture: true
    });
  }

  componentWillUnmount() {
    document.removeEventListener('scroll', this.preventContextMenuOpen, {
      capture: true
    });
  }

  render() {
    const {
      renderTag,
      attributes,
      children
    } = this.props;
    const newAttrs = (0, _objectAssign.default)({}, attributes, {
      className: (0, _classnames.default)(_helpers.cssClasses.menuWrapper, attributes.className),
      onContextMenu: this.handleContextMenu,
      onClick: this.handleMouseClick,
      onMouseDown: this.handleMouseDown,
      onMouseUp: this.handleMouseUp,
      onTouchStart: this.handleTouchstart,
      onTouchEnd: this.handleTouchEnd,
      onMouseOut: this.handleMouseOut,
      ref: this.elemRef
    });
    return /*#__PURE__*/_react.default.createElement(renderTag, newAttrs, children);
  }

}

exports.default = ContextMenuTrigger;

_defineProperty(ContextMenuTrigger, "propTypes", {
  id: _propTypes.default.string.isRequired,
  children: _propTypes.default.node.isRequired,
  attributes: _propTypes.default.object,
  collect: _propTypes.default.func,
  disable: _propTypes.default.bool,
  holdToDisplay: _propTypes.default.number,
  posX: _propTypes.default.number,
  posY: _propTypes.default.number,
  renderTag: _propTypes.default.elementType,
  mouseButton: _propTypes.default.number,
  disableIfShiftIsPressed: _propTypes.default.bool
});

_defineProperty(ContextMenuTrigger, "defaultProps", {
  attributes: {},

  collect() {
    return null;
  },

  disable: false,
  holdToDisplay: 1000,
  renderTag: 'div',
  posX: 0,
  posY: 0,
  mouseButton: 2,
  // 0 is left click, 2 is right click
  disableIfShiftIsPressed: false
});