choerodon-ui/es/rc-components/menu/Menu.js

An enterprise-class UI design language and React-based implementation

import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { Component } from 'react';
import { create, Provider } from 'mini-store';
import noop from 'lodash/noop';
import SubPopupMenu, { getActiveKey } from './SubPopupMenu';

var Menu = /*#__PURE__*/function (_Component) {
  _inherits(Menu, _Component);

  var _super = _createSuper(Menu);

  function Menu(_props) {
    var _this;

    _classCallCheck(this, Menu);

    _this = _super.call(this, _props);

    _defineProperty(_assertThisInitialized(_this), "isRootMenu", true);

    _defineProperty(_assertThisInitialized(_this), "onSelect", function (selectInfo) {
      var props = _this.props;

      if (props.selectable) {
        // root menu
        var selectedKeys = _this.store.getState().selectedKeys;

        var selectedKey = selectInfo.key;

        if (props.multiple) {
          selectedKeys = selectedKeys.concat([selectedKey]);
        } else {
          selectedKeys = [selectedKey];
        }

        if (!('selectedKeys' in props)) {
          _this.store.setState({
            selectedKeys: selectedKeys
          });
        }

        props.onSelect(_objectSpread(_objectSpread({}, selectInfo), {}, {
          selectedKeys: selectedKeys
        }));
      }
    });

    _defineProperty(_assertThisInitialized(_this), "onClick", function (e) {
      _this.props.onClick(e);
    });

    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (e, callback) {
      return _this.innerMenu.getWrappedInstance().onKeyDown(e, callback);
    });

    _defineProperty(_assertThisInitialized(_this), "onOpenChange", function (event) {
      var props = _this.props;

      var openKeys = _this.store.getState().openKeys.concat();

      var changed = false;

      var processSingle = function processSingle(e) {
        var oneChanged = false;

        if (e.open) {
          oneChanged = openKeys.indexOf(e.key) === -1;

          if (oneChanged) {
            openKeys.push(e.key);
          }
        } else {
          var index = openKeys.indexOf(e.key);
          oneChanged = index !== -1;

          if (oneChanged) {
            openKeys.splice(index, 1);
          }
        }

        changed = changed || oneChanged;
      };

      if (Array.isArray(event)) {
        // batch change call
        event.forEach(processSingle);
      } else {
        processSingle(event);
      }

      if (changed) {
        if (!('openKeys' in _this.props)) {
          _this.store.setState({
            openKeys: openKeys
          });
        }

        props.onOpenChange(openKeys);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "onDeselect", function (selectInfo) {
      var props = _this.props;

      if (props.selectable) {
        var selectedKeys = _this.store.getState().selectedKeys.concat();

        var selectedKey = selectInfo.key;
        var index = selectedKeys.indexOf(selectedKey);

        if (index !== -1) {
          selectedKeys.splice(index, 1);
        }

        if (!('selectedKeys' in props)) {
          _this.store.setState({
            selectedKeys: selectedKeys
          });
        }

        props.onDeselect(_objectSpread(_objectSpread({}, selectInfo), {}, {
          selectedKeys: selectedKeys
        }));
      }
    });

    _defineProperty(_assertThisInitialized(_this), "setInnerMenu", function (node) {
      _this.innerMenu = node;
    });

    var _selectedKeys = _props.defaultSelectedKeys;
    var _openKeys = _props.defaultOpenKeys;

    if ('selectedKeys' in _props) {
      _selectedKeys = _props.selectedKeys || [];
    }

    if ('openKeys' in _props) {
      _openKeys = _props.openKeys || [];
    }

    _this.store = create({
      selectedKeys: _selectedKeys,
      openKeys: _openKeys,
      activeKey: {
        '0-menu-': getActiveKey(_props, _props.activeKey)
      }
    });
    return _this;
  }

  _createClass(Menu, [{
    key: "updateMiniStore",
    value: function updateMiniStore() {
      if ('selectedKeys' in this.props) {
        this.store.setState({
          selectedKeys: this.props.selectedKeys || []
        });
      }

      if ('openKeys' in this.props) {
        this.store.setState({
          openKeys: this.props.openKeys || []
        });
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.updateMiniStore();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.updateMiniStore();
    }
  }, {
    key: "step",
    value: function step(direction) {
      return this.innerMenu.getWrappedInstance().step(direction);
    }
  }, {
    key: "getStore",
    value: function getStore() {
      var store = this.store || this.props.store;
      return store;
    }
  }, {
    key: "getEventKey",
    value: function getEventKey() {
      return this.props.eventKey || '0-menu-';
    }
  }, {
    key: "getOpenTransitionName",
    value: function getOpenTransitionName() {
      var props = this.props;
      var transitionName = props.openTransitionName;
      var animationName = props.openAnimation;

      if (!transitionName && typeof animationName === 'string') {
        transitionName = "".concat(props.prefixCls, "-open-").concat(animationName);
      }

      return transitionName;
    }
  }, {
    key: "isInlineMode",
    value: function isInlineMode() {
      return this.props.mode === 'inline';
    }
  }, {
    key: "lastOpenSubMenu",
    value: function lastOpenSubMenu() {
      var lastOpen = [];

      var _this$store$getState = this.store.getState(),
          openKeys = _this$store$getState.openKeys;

      if (openKeys.length) {
        lastOpen = this.getFlatInstanceArray().filter(function (c) {
          return c && openKeys.indexOf(c.props.eventKey) !== -1;
        });
      }

      return lastOpen[0];
    }
  }, {
    key: "renderMenuItem",
    value: function renderMenuItem(c, i, subIndex, subMenuKey) {
      if (!c) {
        return null;
      }

      var state = this.store.getState();
      var extraProps = {
        openKeys: state.openKeys,
        selectedKeys: state.selectedKeys,
        triggerSubMenuAction: this.props.triggerSubMenuAction,
        subMenuKey: subMenuKey
      };
      return this.renderCommonMenuItem(c, i, subIndex, extraProps);
    }
  }, {
    key: "render",
    value: function render() {
      var props = _objectSpread({}, this.props);

      props.className += " ".concat(props.prefixCls, "-root");
      props = _objectSpread(_objectSpread({}, props), {}, {
        onClick: this.onClick,
        onOpenChange: this.onOpenChange,
        onDeselect: this.onDeselect,
        onSelect: this.onSelect,
        openTransitionName: this.getOpenTransitionName(),
        parentMenu: this
      }); // delete props.openAnimation;
      // delete props.openTransitionName;

      return /*#__PURE__*/React.createElement(Provider, {
        store: this.store
      }, /*#__PURE__*/React.createElement(SubPopupMenu, _extends({}, props, {
        ref: this.setInnerMenu
      }), this.props.children));
    }
  }]);

  return Menu;
}(Component);

_defineProperty(Menu, "displayName", 'Menu');

_defineProperty(Menu, "defaultProps", {
  prefixCls: 'rc-menu',
  className: '',
  mode: 'vertical',
  level: 1,
  inlineIndent: 24,
  visible: true,
  focusable: true,
  style: {},
  selectable: true,
  onClick: noop,
  onSelect: noop,
  onOpenChange: noop,
  onDeselect: noop,
  defaultSelectedKeys: [],
  defaultOpenKeys: [],
  subMenuOpenDelay: 0.1,
  subMenuCloseDelay: 0.1,
  triggerSubMenuAction: 'hover'
});

export { Menu as default };
//# sourceMappingURL=Menu.js.map