@firefox-devtools/react-contextmenu/modules/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(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
class ContextMenuTrigger extends _react.Component {
  static 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,
    // Trigger on left click in addition to right click
    triggerOnLeftClick: _propTypes.default.bool,
    disableIfShiftIsPressed: _propTypes.default.bool
  };
  static defaultProps = {
    attributes: {},
    collect() {
      return null;
    },
    disable: false,
    holdToDisplay: 1000,
    renderTag: 'div',
    posX: 0,
    posY: 0,
    triggerOnLeftClick: false,
    disableIfShiftIsPressed: false
  };
  touchHandled = false;
  handleMouseDown = event => {
    if (this.props.holdToDisplay >= 0 && event.button === 0) {
      event.persist();
      event.stopPropagation();
      this.mouseDownTimeoutId = setTimeout(() => this.handleContextClick(event), this.props.holdToDisplay);
    }
    (0, _helpers.callIfExists)(this.props.attributes.onMouseDown, event);
  };
  handleMouseUp = event => {
    if (event.button === 0) {
      clearTimeout(this.mouseDownTimeoutId);
    }
    (0, _helpers.callIfExists)(this.props.attributes.onMouseUp, event);
  };
  handleMouseOut = event => {
    if (event.button === 0) {
      clearTimeout(this.mouseDownTimeoutId);
    }
    (0, _helpers.callIfExists)(this.props.attributes.onMouseOut, event);
  };
  handleTouchstart = event => {
    this.touchHandled = false;
    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);
  };
  handleTouchEnd = event => {
    if (this.touchHandled) {
      event.preventDefault();
    }
    clearTimeout(this.touchstartTimeoutId);
    (0, _helpers.callIfExists)(this.props.attributes.onTouchEnd, event);
  };
  handleContextMenu = event => {
    this.handleContextClick(event);
    (0, _helpers.callIfExists)(this.props.attributes.onContextMenu, event);
  };

  // Note: this function is registered only if triggerOnLeftClick is true.
  handleMouseClick = event => {
    this.handleContextClick(event);
    (0, _helpers.callIfExists)(this.props.attributes.onClick, event);
  };
  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
      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);
    }
  };
  elemRef = c => {
    this.elem = c;
  };
  render() {
    const {
      renderTag,
      attributes,
      children,
      triggerOnLeftClick
    } = this.props;
    const newAttrs = {
      ...attributes,
      className: (0, _classnames.default)(_helpers.cssClasses.menuWrapper, attributes.className),
      onContextMenu: this.handleContextMenu,
      onClick: triggerOnLeftClick ? this.handleMouseClick : null,
      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;