@jstarpl/react-contextmenu/modules/MenuItem.js

Context Menu implemented in React

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

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; }

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import assign from 'object-assign';
import { hideMenu } from './actions';
import { callIfExists, cssClasses, store, PRIMARY_MOUSE_BUTTON, SECONDARY_MOUSE_BUTTON } from './helpers';
export default class MenuItem extends Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "handleClick", event => {
      if (event.button !== PRIMARY_MOUSE_BUTTON && event.button !== SECONDARY_MOUSE_BUTTON) {
        event.preventDefault();
      }

      if (this.props.disabled || this.props.divider) return;
      callIfExists(this.props.onClick, event, assign({}, this.props.data, store.data), store.target);
      if (this.props.preventClose) return;
      hideMenu();
    });
  }

  render() {
    const {
      attributes,
      children,
      className,
      disabled,
      divider,
      selected
    } = this.props;
    const menuItemClassNames = cx(className, cssClasses.menuItem, attributes.className, {
      [cx(cssClasses.menuItemDisabled, attributes.disabledClassName)]: disabled,
      [cx(cssClasses.menuItemDivider, attributes.dividerClassName)]: divider,
      [cx(cssClasses.menuItemSelected, attributes.selectedClassName)]: selected
    });
    return /*#__PURE__*/React.createElement("div", _extends({}, attributes, {
      className: menuItemClassNames,
      role: "menuitem",
      tabIndex: "-1",
      "aria-disabled": disabled ? 'true' : 'false',
      "aria-orientation": divider ? 'horizontal' : null,
      ref: ref => {
        this.ref = ref;
      },
      onMouseMove: this.props.onMouseMove,
      onMouseLeave: this.props.onMouseLeave,
      onTouchEnd: this.handleClick,
      onClick: this.handleClick
    }), divider ? null : children);
  }

}

_defineProperty(MenuItem, "propTypes", {
  attributes: PropTypes.object,
  children: PropTypes.node,
  className: PropTypes.string,
  data: PropTypes.object,
  disabled: PropTypes.bool,
  divider: PropTypes.bool,
  onClick: PropTypes.func,
  onMouseLeave: PropTypes.func,
  onMouseMove: PropTypes.func,
  preventClose: PropTypes.bool,
  selected: PropTypes.bool
});

_defineProperty(MenuItem, "defaultProps", {
  attributes: {},
  children: null,
  className: '',
  data: {},
  disabled: false,
  divider: false,

  onClick() {
    return null;
  },

  onMouseMove: () => null,
  onMouseLeave: () => null,
  preventClose: false,
  selected: false
});