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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

var _miniStore = require("mini-store");

var _noop = _interopRequireDefault(require("lodash/noop"));

var _SubPopupMenu = _interopRequireWildcard(require("./SubPopupMenu"));

var Menu = /*#__PURE__*/function (_Component) {
  (0, _inherits2["default"])(Menu, _Component);

  var _super = (0, _createSuper2["default"])(Menu);

  function Menu(_props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Menu);
    _this = _super.call(this, _props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isRootMenu", true);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, selectInfo), {}, {
          selectedKeys: selectedKeys
        }));
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClick", function (e) {
      _this.props.onClick(e);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onKeyDown", function (e, callback) {
      return _this.innerMenu.getWrappedInstance().onKeyDown(e, callback);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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);
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, selectInfo), {}, {
          selectedKeys: selectedKeys
        }));
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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 = (0, _miniStore.create)({
      selectedKeys: _selectedKeys,
      openKeys: _openKeys,
      activeKey: {
        '0-menu-': (0, _SubPopupMenu.getActiveKey)(_props, _props.activeKey)
      }
    });
    return _this;
  }

  (0, _createClass2["default"])(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: "getFlatInstanceArray",
    value: function getFlatInstanceArray() {
      return this.innerMenu.getWrappedInstance().getFlatInstanceArray();
    }
  }, {
    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 = (0, _objectSpread2["default"])({}, this.props);
      props.className += " ".concat(props.prefixCls, "-root");
      props = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, 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["default"].createElement(_miniStore.Provider, {
        store: this.store
      }, /*#__PURE__*/_react["default"].createElement(_SubPopupMenu["default"], (0, _extends2["default"])({}, props, {
        ref: this.setInnerMenu
      }), this.props.children));
    }
  }]);
  return Menu;
}(_react.Component);

exports["default"] = Menu;
(0, _defineProperty2["default"])(Menu, "displayName", 'Menu');
(0, _defineProperty2["default"])(Menu, "defaultProps", {
  prefixCls: 'rc-menu',
  className: '',
  mode: 'vertical',
  level: 1,
  inlineIndent: 24,
  visible: true,
  focusable: true,
  style: {},
  selectable: true,
  onClick: _noop["default"],
  onSelect: _noop["default"],
  onOpenChange: _noop["default"],
  onDeselect: _noop["default"],
  defaultSelectedKeys: [],
  defaultOpenKeys: [],
  subMenuOpenDelay: 0.1,
  subMenuCloseDelay: 0.1,
  triggerSubMenuAction: 'hover'
});
//# sourceMappingURL=Menu.js.map