@hi-ui/hiui 2.15.10 → 2.15.11

package/es/menu/Menu.js

@@ -1,422 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _lodash = _interopRequireDefault(require("lodash"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _Title = _interopRequireDefault(require("./Title"));
-
-var _Item = _interopRequireDefault(require("./Item"));
-
-var _SubMenu = _interopRequireDefault(require("./SubMenu"));
-
-require("./style/index");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var Menu = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(Menu, _Component);
-
-  var _super = _createSuper(Menu);
-
-  function Menu(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Menu);
-    _this = _super.call(this, props);
-    var _this$props = _this.props,
-        activeId = _this$props.activeId,
-        collapsed = _this$props.collapsed;
-
-    var activeIndex = _this.getActiveIndex(activeId);
-
-    var expandIndex = [];
-    _this.clickOutsideHandel = _this.clickOutside.bind((0, _assertThisInitialized2["default"])(_this));
-
-    if (_this.isNoMiniVertaicalMenu(collapsed)) {
-      // 垂直非mini菜单默认打开激活项
-      expandIndex = [activeIndex.split('-').slice(0, -1).join('-')];
-    }
-
-    _this.state = {
-      activeId: _this.props.activeId,
-      expandIndex: expandIndex,
-      activeIndex: activeIndex,
-      collapsed: collapsed
-    };
-    _this.clickInsideFlag = false; // click在menu标识
-
-    return _this;
-  }
-
-  (0, _createClass2["default"])(Menu, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      var activeId = nextProps.activeId,
-          data = nextProps.data,
-          collapsed = nextProps.collapsed;
-
-      if (activeId !== this.props.activeId || !_lodash["default"].isEqual(data, this.props.data)) {
-        var activeIndex = this.getActiveIndex(activeId, data);
-        this.setState({
-          activeId: activeId,
-          activeIndex: activeIndex
-        });
-        this.isNoMiniVertaicalMenu(collapsed) && this.setState({
-          expandIndex: [activeIndex.split('-').slice(0, -1).join('-')]
-        });
-      }
-
-      if (collapsed !== this.props.collapsed) {
-        this.setState({
-          collapsed: collapsed
-        });
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.addEventListener('click', this.clickOutsideHandel);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('click', this.clickOutsideHandel);
-    }
-  }, {
-    key: "clickOutside",
-    value: function clickOutside() {
-      if (!this.clickInsideFlag && !this.isNoMiniVertaicalMenu()) {
-        this.setState({
-          expandIndex: []
-        });
-      }
-
-      this.clickInsideFlag = false;
-    }
-  }, {
-    key: "clickInside",
-    value: function clickInside() {
-      this.clickInsideFlag = true;
-    }
-  }, {
-    key: "getExpandIndex",
-    value: function getExpandIndex(clickedIndex) {
-      if (!clickedIndex) {
-        return [];
-      }
-
-      var accordion = this.props.accordion;
-      var expandIndex = this.state.expandIndex;
-      var _clickedIndex = clickedIndex;
-      var subInExpandIndex = false;
-
-      var _expandIndex = expandIndex.filter(function (item) {
-        // 点击父菜单时，需要把已展开的子菜单过滤掉，因为父菜单关闭时所有子菜单也要关闭
-        var flag = item.startsWith(_clickedIndex);
-
-        if (flag) {
-          subInExpandIndex = true;
-        }
-
-        return !flag;
-      });
-
-      subInExpandIndex && _expandIndex.push(_clickedIndex); // subInExpandIndex为true说明其有子菜单被展开，在点击需要关闭
-
-      var index = _expandIndex.indexOf(clickedIndex);
-
-      if (index > -1) {
-        // 点击同一个submenu，如果已展开则关闭
-        _clickedIndex = clickedIndex.split('-').slice(0, -1).join('-');
-      }
-
-      if (!accordion && this.isNoMiniVertaicalMenu()) {
-        // 非手风琴模式只有在垂直非mini状态下才生效
-        index > -1 ? _expandIndex.splice(index, 1, _clickedIndex) : _expandIndex.push(_clickedIndex);
-        return _expandIndex;
-      } else {
-        return _clickedIndex ? [_clickedIndex] : [];
-      }
-    }
-  }, {
-    key: "isNoMiniVertaicalMenu",
-    value: function isNoMiniVertaicalMenu() {
-      var collapsed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state.collapsed;
-      // 垂直非mini菜单
-      return this.props.placement === 'vertical' && !collapsed;
-    }
-  }, {
-    key: "getActiveMenus",
-    value: function getActiveMenus(menus, activeId) {
-      var activeMenus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-      var result;
-
-      for (var index in menus) {
-        var _activeMenus = (0, _toConsumableArray2["default"])(activeMenus);
-
-        if (menus[index].id === activeId) {
-          _activeMenus.push(index);
-
-          result = _activeMenus;
-        } else if (menus[index].children) {
-          _activeMenus.push(index);
-
-          result = this.getActiveMenus(menus[index].children, activeId, _activeMenus);
-        }
-
-        if (result) {
-          break;
-        }
-      }
-
-      if (result) {
-        return result;
-      }
-    }
-  }, {
-    key: "getActiveIndex",
-    value: function getActiveIndex(activeId, menu) {
-      // 获取激活item对应的索引，以'-'拼接成字符串
-      var data = this.props.data;
-
-      if (activeId === undefined || activeId === '') {
-        return '';
-      }
-
-      var activeMenus = this.getActiveMenus(menu || data, activeId, []);
-      return activeMenus && activeMenus.join('-') || '';
-    }
-  }, {
-    key: "toggleMini",
-    value: function toggleMini() {
-      var _this2 = this;
-
-      var collapsed = !this.state.collapsed;
-      var expandIndex = collapsed ? [] : this.state.expandIndex;
-      setTimeout(function () {
-        _this2.setState({
-          collapsed: collapsed,
-          expandIndex: expandIndex
-        }, function () {
-          _this2.props.onCollapse && _this2.props.onCollapse(collapsed);
-        });
-      }, 0);
-    }
-  }, {
-    key: "onClick",
-    value: function onClick(indexs, id, data) {
-      var _this3 = this;
-
-      var expandIndex = this.isNoMiniVertaicalMenu() ? this.state.expandIndex : this.getExpandIndex(''); // 非mini垂直菜单选中时不需要收起子菜单
-
-      var oldId = this.state.activeId;
-      this.setState({
-        activeId: id,
-        activeIndex: indexs,
-        expandIndex: expandIndex
-      }, function () {
-        _this3.props.onClick(id, oldId, data);
-      });
-    }
-  }, {
-    key: "onClickSubMenu",
-    value: function onClickSubMenu(index) {
-      var _this4 = this;
-
-      var expandIndex = this.getExpandIndex(index);
-      this.clickInside();
-      this.setState({
-        expandIndex: expandIndex
-      }, function () {
-        index && _this4.props.onClickSubMenu && _this4.props.onClickSubMenu(index.split('-'));
-      });
-    }
-  }, {
-    key: "renderItem",
-    value: function renderItem(data, index) {
-      var props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-      // render menu item
-      var activeIndex = this.state.activeIndex;
-      var mergeProps = Object.assign({
-        onClick: this.onClick.bind(this),
-        id: data.id,
-        icon: data.icon,
-        activeIndex: activeIndex,
-        index: index,
-        disabled: data.disabled,
-        key: index,
-        data: data
-      }, props);
-      return /*#__PURE__*/_react["default"].createElement(_Item["default"], mergeProps, data.content);
-    }
-  }, {
-    key: "renderFatSubMenu",
-    value: function renderFatSubMenu(data, parentIndex) {
-      var _this5 = this;
-
-      // render胖菜单
-      var groups = [];
-      data.forEach(function (dataItem, groupIndex) {
-        groups.push( /*#__PURE__*/_react["default"].createElement("li", {
-          className: "hi-menu-fat",
-          key: groupIndex
-        }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "hi-menu-fat__title hi-menu__title"
-        }, /*#__PURE__*/_react["default"].createElement(_Title["default"], {
-          icon: dataItem.icon,
-          content: dataItem.content
-        })), dataItem.children && /*#__PURE__*/_react["default"].createElement("ul", {
-          className: "hi-menu-fat__content"
-        }, dataItem.children.map(function (child, index) {
-          return _this5.renderItem(child, parentIndex + '-' + groupIndex + '-' + index, {
-            level: 2
-          });
-        }))));
-      });
-      return groups;
-    }
-  }, {
-    key: "renderMenu",
-    value: function renderMenu(data) {
-      var _this6 = this;
-
-      var parentIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-      var _this$props2 = this.props,
-          showAllSubMenus = _this$props2.showAllSubMenus,
-          placement = _this$props2.placement,
-          theme = _this$props2.theme;
-      var _this$state = this.state,
-          activeIndex = _this$state.activeIndex,
-          expandIndex = _this$state.expandIndex,
-          collapsed = _this$state.collapsed;
-      var items = [];
-      var renderMenu = showAllSubMenus ? this.renderFatSubMenu.bind(this) : this.renderMenu.bind(this);
-      data.forEach(function (item, index) {
-        var indexStr = parentIndex !== '' ? parentIndex + '-' + index : '' + index;
-        var level = indexStr.split('-').length;
-
-        if (item.children) {
-          items.push( /*#__PURE__*/_react["default"].createElement(_SubMenu["default"], {
-            key: index,
-            theme: theme,
-            onClick: _this6.onClickSubMenu.bind(_this6),
-            clickInside: _this6.clickInside.bind(_this6),
-            index: indexStr,
-            level: level,
-            fatMenu: showAllSubMenus,
-            activeIndex: activeIndex,
-            expandIndex: expandIndex,
-            disabled: item.disabled,
-            content: item.content,
-            icon: item.icon,
-            renderMenu: renderMenu,
-            datas: item.children,
-            mode: placement,
-            mini: collapsed
-          }));
-        } else {
-          items.push(_this6.renderItem(item, indexStr, {
-            level: level,
-            placement: placement,
-            mini: collapsed
-          }));
-        }
-      });
-      return items;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-          data = _this$props3.data,
-          placement = _this$props3.placement,
-          showCollapse = _this$props3.showCollapse,
-          theme = _this$props3.theme;
-      var collapsed = this.state.collapsed;
-      var cls = (0, _classnames["default"])('hi-menu', "theme__".concat(theme), "hi-menu--".concat(placement), {
-        'hi-menu--mini': collapsed
-      });
-
-      var miniIcon = /*#__PURE__*/_react["default"].createElement("i", {
-        className: "hi-icon icon-".concat(collapsed ? 'Expand' : 'Collapse')
-      });
-
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: cls
-      }, /*#__PURE__*/_react["default"].createElement("ul", {
-        className: "hi-menu-items"
-      }, this.renderMenu(data)), placement === 'vertical' && showCollapse && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "hi-menu--mini__toggle",
-        onClick: this.toggleMini.bind(this)
-      }, miniIcon));
-    }
-  }]);
-  return Menu;
-}(_react.Component);
-
-Menu.defaultProps = {
-  placement: 'vertical',
-  onClick: function onClick() {},
-  activeId: '',
-  collapsed: false,
-  showCollapse: false,
-  showAllSubMenus: false,
-  accordion: true
-};
-Menu.propTypes = {
-  data: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    content: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-    id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-    disabled: _propTypes["default"].bool,
-    icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-    children: _propTypes["default"].array
-  })),
-  activeId: _propTypes["default"].string,
-  placement: _propTypes["default"].oneOf(['horizontal', 'vertical']),
-  collapsed: _propTypes["default"].bool,
-  // 是否是mini模式，需要同时placement=vertical时才生效
-  showCollapse: _propTypes["default"].bool,
-  // mini状态开关，需要同时placement=vertical时才生效
-  showAllSubMenus: _propTypes["default"].bool,
-  // 胖菜单，需要同时placement=horizontal时才生效
-  accordion: _propTypes["default"].bool,
-  onClick: _propTypes["default"].func,
-  onClickSubMenu: _propTypes["default"].func,
-  onCollapse: _propTypes["default"].func
-};
-var _default = Menu;
-exports["default"] = _default;