@jstarpl/react-contextmenu/es6/AbstractMenu.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 _MenuItem = _interopRequireDefault(require("./MenuItem"));

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 AbstractMenu extends _react.Component {
  constructor(_props) {
    super(_props);

    _defineProperty(this, "handleKeyNavigation", e => {
      /*
       *   Check for isVisible strictly here as it might be undefined when this code executes in the context of SubMenu
       *   but we only need to check when it runs in the ContextMenu context
       */
      if (this.state.isVisible === false) {
        return;
      }

      switch (e.code) {
        case _helpers.KEYBOARD_CODES.ArrowLeft: // left arrow

        case _helpers.KEYBOARD_CODES.Escape:
          // escape
          e.preventDefault();
          this.hideMenu(e);
          break;

        case _helpers.KEYBOARD_CODES.ArrowUp:
          // up arrow
          e.preventDefault();
          this.selectChildren(true);
          break;

        case _helpers.KEYBOARD_CODES.ArrowDown:
          // down arrow
          e.preventDefault();
          this.selectChildren(false);
          break;

        case _helpers.KEYBOARD_CODES.ArrowRight:
          // right arrow
          this.tryToOpenSubMenu(e);
          break;

        case _helpers.KEYBOARD_CODES.Enter: // enter

        case _helpers.KEYBOARD_CODES.NumpadEnter:
          e.preventDefault();
          this.tryToOpenSubMenu(e);
          {
            // determine the selected item is disabled or not
            const disabled = this.seletedItemRef && this.seletedItemRef.props && this.seletedItemRef.props.disabled;

            if (this.seletedItemRef && this.seletedItemRef.ref instanceof HTMLElement && !disabled) {
              this.seletedItemRef.ref.click();
            } else {
              this.hideMenu(e);
            }
          }
          break;

        default: // do nothing

      }
    });

    _defineProperty(this, "handleForceClose", () => {
      this.setState({
        forceSubMenuOpen: false
      });
    });

    _defineProperty(this, "tryToOpenSubMenu", e => {
      if (this.state.selectedItem && this.state.selectedItem.type === this.getSubMenuType()) {
        e.preventDefault();
        this.setState({
          forceSubMenuOpen: true
        });
      }
    });

    _defineProperty(this, "selectChildren", forward => {
      const {
        selectedItem
      } = this.state;
      const children = []; // eslint-disable-next-line no-magic-numbers

      let disabledChildrenCount = 0;
      let disabledChildIndexes = {};

      const childCollector = (child, index) => {
        /*
         *   child can be empty in case you do conditional rendering of components, in which
         *   case it should not be accounted for as a real child
         */
        if (!child) {
          return;
        } // eslint-disable-next-line no-magic-numbers


        if ([_MenuItem.default, this.getSubMenuType()].indexOf(child.type) < 0) {
          // Maybe the MenuItem or SubMenu is capsuled in a wrapper div or something else
          _react.default.Children.forEach(child.props.children, childCollector);
        } else if (!child.props.divider) {
          if (child.props.disabled) {
            ++disabledChildrenCount;
            disabledChildIndexes[index] = true;
          }

          children.push(child);
        }
      };

      _react.default.Children.forEach(this.props.children, childCollector);

      if (disabledChildrenCount === children.length) {
        // All menu items are disabled, so none can be selected, don't do anything
        return;
      }

      function findNextEnabledChildIndex(currentIndex) {
        let i = currentIndex;

        let incrementCounter = () => {
          if (forward) {
            --i;
          } else {
            ++i;
          } // eslint-disable-next-line no-magic-numbers


          if (i < 0) {
            // eslint-disable-next-line no-magic-numbers
            i = children.length - 1;
          } else if (i >= children.length) {
            // eslint-disable-next-line no-magic-numbers
            i = 0;
          }
        };

        do {
          incrementCounter();
        } while (i !== currentIndex && disabledChildIndexes[i]);

        return i === currentIndex ? null : i;
      }

      const currentIndex = children.indexOf(selectedItem);
      const nextEnabledChildIndex = findNextEnabledChildIndex(currentIndex);

      if (nextEnabledChildIndex !== null) {
        this.setState({
          selectedItem: children[nextEnabledChildIndex],
          forceSubMenuOpen: false
        });
      }
    });

    _defineProperty(this, "onChildMouseMove", child => {
      if (this.state.selectedItem !== child) {
        this.setState({
          selectedItem: child,
          forceSubMenuOpen: false
        });
      }
    });

    _defineProperty(this, "onChildMouseLeave", () => {
      this.setState({
        selectedItem: null,
        forceSubMenuOpen: false
      });
    });

    _defineProperty(this, "renderChildren", children => _react.default.Children.map(children, child => {
      const props = {};
      if (! /*#__PURE__*/_react.default.isValidElement(child)) return child; // eslint-disable-next-line no-magic-numbers

      if ([_MenuItem.default, this.getSubMenuType()].indexOf(child.type) < 0) {
        // Maybe the MenuItem or SubMenu is capsuled in a wrapper div or something else
        props.children = this.renderChildren(child.props.children);
        return /*#__PURE__*/_react.default.cloneElement(child, props);
      }

      props.onMouseLeave = this.onChildMouseLeave.bind(this);

      if (child.type === this.getSubMenuType()) {
        // special props for SubMenu only
        props.forceOpen = this.state.forceSubMenuOpen && this.state.selectedItem === child;
        props.forceClose = this.handleForceClose;
        props.parentKeyNavigationHandler = this.handleKeyNavigation;
      }

      if (!child.props.divider && this.state.selectedItem === child) {
        // special props for selected item only
        props.selected = true;

        props.ref = ref => {
          this.seletedItemRef = ref;
        };

        return /*#__PURE__*/_react.default.cloneElement(child, props);
      } // onMouseMove is only needed for non selected items


      props.onMouseMove = () => this.onChildMouseMove(child);

      return /*#__PURE__*/_react.default.cloneElement(child, props);
    }));

    this.seletedItemRef = null;
    this.state = {
      selectedItem: null,
      forceSubMenuOpen: false
    };
  }

}

exports.default = AbstractMenu;

_defineProperty(AbstractMenu, "propTypes", {
  children: _propTypes.default.node.isRequired
});