@hi-ui/hiui 2.15.11 → 2.15.12

package/es/menu/Menu.js

@@ -0,0 +1,414 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+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");
+
+var Menu =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Menu, _Component);
+
+  function Menu(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Menu);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Menu).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 _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(_react["default"].createElement("li", {
+          className: "hi-menu-fat",
+          key: groupIndex
+        }, _react["default"].createElement("div", {
+          className: "hi-menu-fat__title hi-menu__title"
+        }, _react["default"].createElement(_Title["default"], {
+          icon: dataItem.icon,
+          content: dataItem.content
+        })), dataItem.children && _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(_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 = _react["default"].createElement("i", {
+        className: "hi-icon icon-".concat(collapsed ? 'Expand' : 'Collapse')
+      });
+
+      return _react["default"].createElement("div", {
+        className: cls
+      }, _react["default"].createElement("ul", {
+        className: "hi-menu-items"
+      }, this.renderMenu(data)), placement === 'vertical' && showCollapse && _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;

package/es/menu/SubMenu.js

@@ -1,10 +1,24 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,48 +31,17 @@ var _icon = _interopRequireDefault(require("../icon"));
 
 var _Title = _interopRequireDefault(require("./Title"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { 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 _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-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; }
-
-var SubMenu = /*#__PURE__*/function (_Component) {
-  _inherits(SubMenu, _Component);
-
-  var _super = _createSuper(SubMenu);
+var SubMenu =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(SubMenu, _Component);
 
   function SubMenu() {
-    _classCallCheck(this, SubMenu);
-
-    return _super.apply(this, arguments);
+    (0, _classCallCheck2["default"])(this, SubMenu);
+    return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(SubMenu).apply(this, arguments));
   }
 
-  _createClass(SubMenu, [{
+  (0, _createClass2["default"])(SubMenu, [{
     key: "onClick",
     value: function onClick(index) {
       this.props.onClick(index);
@@ -66,38 +49,30 @@ var SubMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "checkActive",
     value: function checkActive(activeIndex, index) {
-      return activeIndex.indexOf(index) === 0;
+      var indexArr = index.split('-');
+      var activeIndexArr = activeIndex.split('-');
+      return activeIndexArr.slice(0, indexArr.length).join('-') === index;
     }
   }, {
     key: "checkExpand",
     value: function checkExpand(activeIndex, expandIndex, index) {
       return expandIndex.some(function (item) {
-        return item.indexOf(index) === 0;
-      }); // const {
-      //   mini,
-      //   mode
-      // } = this.props
-      // if (!mini && mode==='vertical' && expandIndex.length===0) {
-      //   return activeIndex.indexOf(index) === 0
-      // } else {
-      //   return expandIndex.some(item => {
-      //     // return item.indexOf(index) === 0 || (activeIndex.indexOf(item) === 0 && activeIndex.indexOf(index) === 0)
-      //     return item.indexOf(index) === 0
-      //   })
-      // }
+        var indexArr = index.split('-');
+        var expandIndexArr = item.split('-');
+        return expandIndexArr.slice(0, indexArr.length).join('-') === index;
+      });
     }
   }, {
     key: "renderPopperMenu",
     value: function renderPopperMenu(deepSubmenu, isExpand) {
-      var _this = this;
-
       var _this$props = this.props,
           mini = _this$props.mini,
           datas = _this$props.datas,
           index = _this$props.index,
           renderMenu = _this$props.renderMenu,
           fatMenu = _this$props.fatMenu,
-          clickInside = _this$props.clickInside;
+          clickInside = _this$props.clickInside,
+          theme = _this$props.theme;
       var leftGap;
       var topGap;
       var placement;
@@ -113,22 +88,19 @@ var SubMenu = /*#__PURE__*/function (_Component) {
         placement = 'bottom-start';
       }
 
-      return /*#__PURE__*/_react["default"].createElement(_popper["default"], {
+      return _react["default"].createElement(_popper["default"], {
         show: isExpand,
         attachEle: this.submenuTrigger,
         zIndex: 1050,
         topGap: topGap,
         leftGap: leftGap,
-        className: (0, _classnames["default"])('hi-submenu__popper', {
+        className: (0, _classnames["default"])('hi-submenu__popper', "theme__".concat(theme), {
           'hi-submenu__popper--fat': fatMenu
         }),
         width: false,
         placement: placement
-      }, /*#__PURE__*/_react["default"].createElement("ul", {
+      }, _react["default"].createElement("ul", {
         className: (0, _classnames["default"])('hi-submenu__items'),
-        ref: function ref(node) {
-          _this.submenuNode = node;
-        },
         onClick: function onClick() {
           return clickInside();
         } // 利用事件冒泡设置clickInsideFlag
@@ -142,9 +114,10 @@ var SubMenu = /*#__PURE__*/function (_Component) {
           datas = _this$props2.datas,
           index = _this$props2.index,
           renderMenu = _this$props2.renderMenu,
-          clickInside = _this$props2.clickInside;
-      return /*#__PURE__*/_react["default"].createElement("ul", {
-        className: (0, _classnames["default"])('hi-submenu__items', {
+          clickInside = _this$props2.clickInside,
+          theme = _this$props2.theme;
+      return _react["default"].createElement("ul", {
+        className: (0, _classnames["default"])('hi-submenu__items', "theme__".concat(theme), {
           'hi-submenu__items--hide': !isExpand
         }),
         onClick: function onClick() {
@@ -157,7 +130,7 @@ var SubMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this = this;
 
       var _this$props3 = this.props,
           content = _this$props3.content,
@@ -169,55 +142,54 @@ var SubMenu = /*#__PURE__*/function (_Component) {
           activeIndex = _this$props3.activeIndex,
           expandIndex = _this$props3.expandIndex,
           disabled = _this$props3.disabled,
-          fatMenu = _this$props3.fatMenu;
+          fatMenu = _this$props3.fatMenu,
+          theme = _this$props3.theme;
       var isExpand = this.checkExpand(activeIndex, expandIndex, index);
       var isActive = this.checkActive(activeIndex, index);
       var deepSubmenu = index.split('-').length > 1;
-      var cls = (0, _classnames["default"])('hi-menu-item', 'hi-submenu', "hi-menu--".concat(level), {
+      var cls = (0, _classnames["default"])('hi-menu-item', "theme__".concat(theme), 'hi-submenu', "hi-menu--".concat(level), {
         'hi-menu-item--disabled': disabled,
         'hi-menu-item--active': isActive,
         'hi-submenu--fat': fatMenu
       });
       var toggleIcon;
 
-      if (deepSubmenu && (mode === 'horizontal' || mini)) {
-        toggleIcon = isExpand ? 'left' : 'right';
+      if (mode === 'horizontal' && !deepSubmenu) {
+        toggleIcon = 'down';
+      } else if (deepSubmenu && (mode === 'horizontal' || mini)) {
+        toggleIcon = 'right';
       } else {
         toggleIcon = isExpand ? 'up' : 'down';
       }
 
-      return /*#__PURE__*/_react["default"].createElement("li", {
+      return _react["default"].createElement("li", {
         className: cls,
         ref: function ref(node) {
-          _this2.submenuTrigger = node;
+          _this.submenuTrigger = node;
         },
         key: index
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "hi-submenu__title hi-menu__title",
+      }, _react["default"].createElement("div", {
+        className: "theme__".concat(theme, " hi-submenu__title hi-menu__title"),
         onClick: function onClick() {
-          if (!disabled) {
-            _this2.onClick(index);
-          }
+          !disabled && _this.onClick(index);
         }
-      }, /*#__PURE__*/_react["default"].createElement(_Title["default"], {
+      }, _react["default"].createElement(_Title["default"], {
         icon: icon,
-        content: content
-      }), /*#__PURE__*/_react["default"].createElement("div", {
+        content: content,
+        mini: mini,
+        level: level,
+        placement: mode
+      }), _react["default"].createElement("div", {
         className: "hi-menu__title-toggle-icon"
-      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      }, _react["default"].createElement(_icon["default"], {
         name: toggleIcon
       }))), !mini && mode === 'vertical' ? this.renderVerticalMenu(isActive, isExpand) : this.renderPopperMenu(deepSubmenu, isExpand));
     }
   }]);
-
   return SubMenu;
 }(_react.Component);
 
-exports["default"] = SubMenu;
-
-_defineProperty(SubMenu, "componentName", 'SubMenu');
-
-_defineProperty(SubMenu, "propTypes", {
+SubMenu.propTypes = {
   icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
   content: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
   datas: _propTypes["default"].array,
@@ -231,9 +203,10 @@ _defineProperty(SubMenu, "propTypes", {
   disabled: _propTypes["default"].bool,
   activeIndex: _propTypes["default"].string,
   expandIndex: _propTypes["default"].array
-});
-
-_defineProperty(SubMenu, "defaultProps", {
+};
+SubMenu.defaultProps = {
   level: 1,
   expandIndex: []
-});
+};
+var _default = SubMenu;
+exports["default"] = _default;