@hi-ui/hiui 2.15.9 → 2.15.11

package/es/menu/index.js

@@ -1,24 +1,431 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Menu", {
-  enumerable: true,
-  get: function get() {
-    return _Menu["default"];
-  }
-});
 exports["default"] = void 0;
 
-var _Menu = _interopRequireDefault(require("./Menu"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _Title = _interopRequireDefault(require("./Title"));
+
+var _Item = _interopRequireDefault(require("./Item"));
+
+var _SubMenu = _interopRequireDefault(require("./SubMenu"));
+
+require("./style/index");
+
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+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 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), "clickInsideFlag", false);
 
-var _util = require("../_util");
+    _defineProperty(_assertThisInitialized(_this), "getActiveMenus", function (menus, activeId) {
+      var activeMenus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+      var result;
 
-var _context = _interopRequireDefault(require("../context"));
+      for (var index in menus) {
+        var _activeMenus = _toConsumableArray(activeMenus);
 
-var _default = (0, _util.depreactedPropsCompat)([['placement', 'mode'], ['collapsed', 'mini'], ['showCollapse', 'miniToggle'], ['showAllSubMenus', 'fatMenu'], ['onCollapse', 'onMiniChange'], ['data', 'datas']])((0, _context["default"])(_Menu["default"]));
+        if (menus[index].children) {
+          _activeMenus.push(index);
+
+          result = _this.getActiveMenus(menus[index].children, activeId, _activeMenus);
+        } else if (menus[index].id === activeId) {
+          _activeMenus.push(index);
+
+          result = _activeMenus;
+        }
+
+        if (result) {
+          break;
+        }
+      }
+
+      if (result) {
+        return result;
+      }
+    });
+
+    var _this$props = _this.props,
+        _activeId = _this$props.activeId,
+        mini = _this$props.mini;
+
+    var activeIndex = _this.getActiveIndex(_activeId);
+
+    var expandIndex = [];
+    _this.clickOutsideHandel = _this.clickOutside.bind(_assertThisInitialized(_this));
+
+    if (_this.isNoMiniVertaicalMenu(mini)) {
+      // 垂直非mini菜单默认打开激活项
+      expandIndex = [activeIndex.split('-').slice(0, -1).join('-')];
+    }
+
+    _this.state = {
+      activeId: _this.props.activeId,
+      expandIndex: expandIndex,
+      activeIndex: activeIndex,
+      mini: mini
+    };
+    return _this;
+  }
+
+  _createClass(Menu, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.activeId !== this.props.activeId) {
+        var activeIndex = this.getActiveIndex(nextProps.activeId);
+        this.setState({
+          activeId: nextProps.activeId,
+          activeIndex: activeIndex
+        });
+      }
+
+      if (nextProps.mini !== this.props.mini) {
+        this.setState({
+          mini: nextProps.mini
+        });
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      window.addEventListener('click', this.clickOutsideHandel);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('click', this.clickOutsideHandel);
+    }
+  }, {
+    key: "clickOutside",
+    // click在menu标识
+    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 mini = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state.mini;
+      // 垂直非mini菜单
+      return this.props.mode === 'vertical' && !mini;
+    }
+  }, {
+    key: "getActiveIndex",
+    value: function getActiveIndex(activeId) {
+      // 获取激活item对应的索引，以'-'拼接成字符串
+      var datas = this.props.datas;
+
+      if (activeId === undefined || activeId === '') {
+        return '';
+      }
+
+      var activeMenus = this.getActiveMenus(datas, activeId, []);
+      return activeMenus && activeMenus.join('-') || '';
+    }
+  }, {
+    key: "toggleMini",
+    value: function toggleMini() {
+      var _this2 = this;
+
+      var mini = !this.state.mini;
+      var expandIndex = mini ? [] : this.state.expandIndex; // 切换为mini清空展开态，否则记录展开态
+
+      setTimeout(function () {
+        // fix mini 切换为 非mini 时子菜单不隐藏
+        _this2.setState({
+          mini: mini,
+          expandIndex: expandIndex
+        }, function () {
+          _this2.props.onMiniChange && _this2.props.onMiniChange(mini);
+        });
+      }, 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(datas, parentIndex) {
+      var _this5 = this;
+
+      // render胖菜单
+      var groups = [];
+      datas.forEach(function (data, 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: data.icon,
+          content: data.content
+        })), /*#__PURE__*/_react["default"].createElement("ul", {
+          className: "hi-menu-fat__content"
+        }, data.children.map(function (child, index) {
+          return _this5.renderItem(child, parentIndex + '-' + groupIndex + '-' + index, {
+            level: 2
+          });
+        }))));
+      });
+      return groups;
+    }
+  }, {
+    key: "renderMenu",
+    value: function renderMenu(datas) {
+      var _this6 = this;
+
+      var parentIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+      var _this$props2 = this.props,
+          fatMenu = _this$props2.fatMenu,
+          mode = _this$props2.mode;
+      var _this$state = this.state,
+          activeIndex = _this$state.activeIndex,
+          expandIndex = _this$state.expandIndex,
+          mini = _this$state.mini;
+      var items = [];
+      var renderMenu = fatMenu ? this.renderFatSubMenu.bind(this) : this.renderMenu.bind(this);
+      datas.forEach(function (data, index) {
+        var indexStr = parentIndex !== '' ? parentIndex + '-' + index : '' + index;
+        var level = indexStr.split('-').length;
+
+        if (data.children) {
+          items.push( /*#__PURE__*/_react["default"].createElement(_SubMenu["default"], {
+            key: index,
+            onClick: _this6.onClickSubMenu.bind(_this6),
+            clickInside: _this6.clickInside.bind(_this6),
+            index: indexStr,
+            level: level,
+            fatMenu: fatMenu,
+            activeIndex: activeIndex,
+            expandIndex: expandIndex,
+            disabled: data.disabled,
+            content: data.content,
+            icon: data.icon,
+            renderMenu: renderMenu,
+            datas: data.children,
+            mode: mode,
+            mini: mini
+          }));
+        } else {
+          items.push(_this6.renderItem(data, indexStr, {
+            level: level
+          }));
+        }
+      });
+      return items;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          datas = _this$props3.datas,
+          mode = _this$props3.mode,
+          miniToggle = _this$props3.miniToggle;
+      var mini = this.state.mini;
+      var cls = (0, _classnames["default"])('hi-menu', "hi-menu--".concat(mode), {
+        'hi-menu--mini': mini
+      });
+      var miniIcon = mini ? 'double-right' : 'double-left';
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: cls
+      }, /*#__PURE__*/_react["default"].createElement("ul", {
+        className: "hi-menu-items"
+      }, this.renderMenu(datas)), mode === 'vertical' && miniToggle && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "hi-menu--mini__toggle",
+        onClick: this.toggleMini.bind(this)
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        name: miniIcon
+      })));
+    }
+  }]);
+
+  return Menu;
+}(_react.Component);
+
+_defineProperty(Menu, "defaultProps", {
+  mode: 'vertical',
+  onClick: function onClick() {},
+  activeId: '',
+  mini: false,
+  miniToggle: false,
+  fatMenu: false,
+  accordion: true
+});
+
+_defineProperty(Menu, "propTypes", {
+  datas: _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,
+  mode: _propTypes["default"].oneOf(['horizontal', 'vertical']),
+  mini: _propTypes["default"].bool,
+  // 是否是mini模式，需要同时mode=vertical时才生效
+  miniToggle: _propTypes["default"].bool,
+  // mini状态开关，需要同时mode=vertical时才生效
+  fatMenu: _propTypes["default"].bool,
+  // 胖菜单，需要同时mode=horizontal时才生效
+  accordion: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func,
+  onClickSubMenu: _propTypes["default"].func,
+  onMiniChange: _propTypes["default"].func
+});
 
+var _default = Menu;
 exports["default"] = _default;

package/es/menu/style/index.css

@@ -1 +1 @@
-.hi-menu,.hi-submenu__popper{font:normal 14px/1.5 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";text-align:left;text-indent:0;text-shadow:none;text-transform:none;letter-spacing:0;word-spacing:normal;white-space:normal;color:#333}.hi-menu a,.hi-submenu__popper a{padding-left:0;padding-right:0}.hi-menu p,.hi-menu blockquote,.hi-menu ul,.hi-menu ol,.hi-menu dl,.hi-menu table,.hi-menu pre,.hi-menu h1,.hi-menu h2,.hi-menu h3,.hi-menu h4,.hi-menu h5,.hi-menu h6,.hi-submenu__popper p,.hi-submenu__popper blockquote,.hi-submenu__popper ul,.hi-submenu__popper ol,.hi-submenu__popper dl,.hi-submenu__popper table,.hi-submenu__popper pre,.hi-submenu__popper h1,.hi-submenu__popper h2,.hi-submenu__popper h3,.hi-submenu__popper h4,.hi-submenu__popper h5,.hi-submenu__popper h6{margin-top:0;margin-bottom:0}.hi-menu ul,.hi-menu ol,.hi-submenu__popper ul,.hi-submenu__popper ol{margin:0;padding:0;list-style-type:none}.hi-menu ul ul,.hi-menu ul ol,.hi-menu ol ul,.hi-menu ol ol,.hi-submenu__popper ul ul,.hi-submenu__popper ul ol,.hi-submenu__popper ol ul,.hi-submenu__popper ol ol{margin-top:0;margin-bottom:0}.hi-menu li+li,.hi-submenu__popper li+li{margin-top:0}.hi-menu dl,.hi-submenu__popper dl{margin-top:0;margin-bottom:0}.hi-menu ul,.hi-submenu__popper ul{margin-top:0;margin-bottom:0;padding-left:0;font-size:0}.hi-menu li,.hi-submenu__popper li{margin:0;list-style:none}.hi-menu .hi-menu-items,.hi-submenu__popper .hi-menu-items{display:-webkit-box;display:-ms-flexbox;display:flex}.hi-menu .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.hi-menu .hi-menu-item--active>.hi-menu__title-content,.hi-submenu__popper .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.hi-submenu__popper .hi-menu-item--active>.hi-menu__title-content{color:#4284f5}.hi-menu .hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.hi-menu .hi-menu-item--active>.hi-menu__title-icon,.hi-submenu__popper .hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.hi-submenu__popper .hi-menu-item--active>.hi-menu__title-icon{color:#4284f5}.hi-menu .hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon,.hi-submenu__popper .hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#4284f5}.hi-menu .hi-menu-item--disabled .hi-menu__title,.hi-submenu__popper .hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.hi-menu .hi-menu__title,.hi-submenu__popper .hi-menu__title{display:-webkit-box;display:-ms-flexbox;display:flex;line-height:22px;font-size:14px;color:#333;cursor:pointer;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.hi-menu .hi-menu__title-icon,.hi-submenu__popper .hi-menu__title-icon{-webkit-box-flex:0;-ms-flex:none;flex:none;margin-right:8px}.hi-menu .hi-menu__title-icon .hi-icon,.hi-submenu__popper .hi-menu__title-icon .hi-icon{font-size:16px}.hi-menu .hi-menu__title-content,.hi-submenu__popper .hi-menu__title-content{-webkit-box-flex:1;-ms-flex:auto;flex:auto;width:auto;max-width:initial;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hi-menu .hi-menu__title-toggle-icon,.hi-submenu__popper .hi-menu__title-toggle-icon{-webkit-box-flex:0;-ms-flex:none;flex:none;margin-left:8px}.hi-menu--horizontal{border-bottom:1px solid #e6e7e8}.hi-menu--horizontal .hi-menu-item{position:relative;margin-right:48px}.hi-menu--horizontal .hi-menu-item--active::after{content:'';position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:32px;height:2px;background-color:#4284f5}.hi-menu--horizontal .hi-menu-item:last-child{margin-right:0}.hi-menu--horizontal .hi-menu__title{padding:12px 0}.hi-menu--horizontal .hi-menu__title-content{max-width:100px}.hi-menu--vertical{display:inline-block;width:216px;padding:12px 0;background:#fff;-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.hi-menu--vertical .hi-menu-items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hi-menu--vertical .hi-menu-item{position:relative}.hi-menu--vertical .hi-menu-item--active:not(.hi-submenu){background-color:rgba(66,133,244,0.08)}.hi-menu--vertical .hi-menu-item--active:not(.hi-submenu)::after{content:'';position:absolute;width:2px;height:100%;background-color:#4284f5;left:0}.hi-menu--vertical .hi-menu__title{padding:0 16px;height:48px}.hi-menu--vertical .hi-menu__title:hover{background-color:rgba(66,133,244,0.08)}.hi-menu--vertical .hi-submenu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hi-menu--vertical .hi-menu--1 .hi-submenu__items>.hi-menu__title{padding-left:56px}.hi-menu--vertical .hi-menu--2>.hi-menu__title{padding-left:56px}.hi-menu--vertical .hi-menu--2 .hi-submenu__items>.hi-menu__title{padding-left:96px}.hi-menu--mini{width:48px;padding:12px 0;overflow:hidden}.hi-menu--mini .hi-menu--1.hi-menu-item--active{background-color:rgba(66,133,244,0.08)}.hi-menu--mini .hi-menu__title{padding:0}.hi-menu--mini .hi-menu-item{position:relative}.hi-menu--mini .hi-menu-item--active{background-color:rgba(66,133,244,0.08)}.hi-menu--mini .hi-menu-item--active::after{content:'';position:absolute;width:2px;height:100%;background-color:#4284f5;left:0}.hi-menu--mini .hi-menu__title-icon{width:48px;height:48px;line-height:48px;margin-right:0;text-align:center}.hi-menu--mini__toggle{height:48px;line-height:48px;padding:0 16px;cursor:pointer;font-size:16px;text-align:right}.hi-submenu__items--hide{display:none}.hi-submenu__popper{width:200px;padding:8px 0;background-color:#fff;-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);border:1px solid #e6e7e8;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-submenu__popper .hi-submenu__items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hi-submenu__popper .hi-submenu__items .hi-menu-item--disabled{cursor:not-allowed;color:#d8d8d8}.hi-submenu__popper .hi-menu__title{padding:8px 12px}.hi-submenu__popper--fat{width:auto}.hi-submenu__popper--fat .hi-submenu__items{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.hi-submenu__popper .hi-menu-fat{margin-right:12px;width:120px}.hi-submenu__popper .hi-menu-fat__title{color:#999}.hi-submenu__popper .hi-menu-fat__content{font-size:14px;color:#999;-webkit-box-sizing:border-box;box-sizing:border-box;width:auto;max-width:initial;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.theme__hiui-blue.hi-menu .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__hiui-blue.hi-menu .hi-menu-item--active>.hi-menu__title-content{color:#4285f4}.theme__hiui-blue.hi-menu .hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__hiui-blue.hi-menu .hi-menu-item--active>.hi-menu__title-icon{color:#4285f4}.theme__hiui-blue.hi-menu .hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#4285f4}.theme__hiui-blue.hi-menu .hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__hiui-blue.hi-menu .hi-menu-item--active::after{background-color:#4285f4}.theme__hiui-blue.hi-menu.active{border-color:#4285f4}.theme__hiui-blue.hi-menu--mini .hi-menu-item--active{background-color:rgba(66,133,244,0.1)}.theme__hiui-blue.hi-menu--mini .hi-menu-item--active::after{background-color:#4285f4}.theme__hiui-blue.hi-menu--vertical{-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);box-shadow:0 2px 8px 0 rgba(0,0,0,0.15)}.theme__hiui-blue.hi-menu--vertical .hi-menu-item--active:not(.hi-submenu){background-color:rgba(66,133,244,0.1)}.theme__hiui-blue.hi-menu--vertical .hi-menu-item--active:not(.hi-submenu)::after{background-color:#4285f4}.theme__hiui-blue.hi-menu--vertical .hi-menu__title:hover{background-color:rgba(66,133,244,0.1)}.theme__hiui-blue.hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__hiui-blue.hi-menu-item--active>.hi-menu__title-content{color:#4285f4}.theme__hiui-blue.hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__hiui-blue.hi-menu-item--active>.hi-menu__title-icon{color:#4285f4}.theme__hiui-blue.hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#4285f4}.theme__hiui-blue.hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__hiui-blue.hi-menu-item--active::after{background-color:#4285f4}.theme__hiui-blue.hi-submenu__popper .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__hiui-blue.hi-submenu__popper .hi-menu-item--active>.hi-menu__title-content{color:#4285f4}.theme__hiui-blue.hi-submenu__popper .hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__hiui-blue.hi-submenu__popper .hi-menu-item--active>.hi-menu__title-icon{color:#4285f4}.theme__hiui-blue.hi-submenu__popper .hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#4285f4}.theme__hiui-blue.hi-submenu__popper .hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__hiui-blue.hi-submenu__popper .hi-menu-item--active::after{background-color:#4285f4}.theme__orange.hi-menu .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__orange.hi-menu .hi-menu-item--active>.hi-menu__title-content{color:#f63}.theme__orange.hi-menu .hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__orange.hi-menu .hi-menu-item--active>.hi-menu__title-icon{color:#f63}.theme__orange.hi-menu .hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#f63}.theme__orange.hi-menu .hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__orange.hi-menu .hi-menu-item--active::after{background-color:#f63}.theme__orange.hi-menu.active{border-color:#f63}.theme__orange.hi-menu--mini .hi-menu-item--active{background-color:rgba(255,102,51,0.1)}.theme__orange.hi-menu--mini .hi-menu-item--active::after{background-color:#f63}.theme__orange.hi-menu--vertical{-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);box-shadow:0 2px 8px 0 rgba(0,0,0,0.15)}.theme__orange.hi-menu--vertical .hi-menu-item--active:not(.hi-submenu){background-color:rgba(255,102,51,0.1)}.theme__orange.hi-menu--vertical .hi-menu-item--active:not(.hi-submenu)::after{background-color:#f63}.theme__orange.hi-menu--vertical .hi-menu__title:hover{background-color:rgba(255,102,51,0.1)}.theme__orange.hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__orange.hi-menu-item--active>.hi-menu__title-content{color:#f63}.theme__orange.hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__orange.hi-menu-item--active>.hi-menu__title-icon{color:#f63}.theme__orange.hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#f63}.theme__orange.hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__orange.hi-menu-item--active::after{background-color:#f63}.theme__orange.hi-submenu__popper .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__orange.hi-submenu__popper .hi-menu-item--active>.hi-menu__title-content{color:#f63}.theme__orange.hi-submenu__popper .hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__orange.hi-submenu__popper .hi-menu-item--active>.hi-menu__title-icon{color:#f63}.theme__orange.hi-submenu__popper .hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#f63}.theme__orange.hi-submenu__popper .hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__orange.hi-submenu__popper .hi-menu-item--active::after{background-color:#f63}.theme__cyan.hi-menu .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__cyan.hi-menu .hi-menu-item--active>.hi-menu__title-content{color:#46bc99}.theme__cyan.hi-menu .hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__cyan.hi-menu .hi-menu-item--active>.hi-menu__title-icon{color:#46bc99}.theme__cyan.hi-menu .hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#46bc99}.theme__cyan.hi-menu .hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__cyan.hi-menu .hi-menu-item--active::after{background-color:#46bc99}.theme__cyan.hi-menu.active{border-color:#46bc99}.theme__cyan.hi-menu--mini .hi-menu-item--active{background-color:rgba(70,188,153,0.1)}.theme__cyan.hi-menu--mini .hi-menu-item--active::after{background-color:#46bc99}.theme__cyan.hi-menu--vertical{-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);box-shadow:0 2px 8px 0 rgba(0,0,0,0.15)}.theme__cyan.hi-menu--vertical .hi-menu-item--active:not(.hi-submenu){background-color:rgba(70,188,153,0.1)}.theme__cyan.hi-menu--vertical .hi-menu-item--active:not(.hi-submenu)::after{background-color:#46bc99}.theme__cyan.hi-menu--vertical .hi-menu__title:hover{background-color:rgba(70,188,153,0.1)}.theme__cyan.hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__cyan.hi-menu-item--active>.hi-menu__title-content{color:#46bc99}.theme__cyan.hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__cyan.hi-menu-item--active>.hi-menu__title-icon{color:#46bc99}.theme__cyan.hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#46bc99}.theme__cyan.hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__cyan.hi-menu-item--active::after{background-color:#46bc99}.theme__cyan.hi-submenu__popper .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__cyan.hi-submenu__popper .hi-menu-item--active>.hi-menu__title-content{color:#46bc99}.theme__cyan.hi-submenu__popper .hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__cyan.hi-submenu__popper .hi-menu-item--active>.hi-menu__title-icon{color:#46bc99}.theme__cyan.hi-submenu__popper .hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#46bc99}.theme__cyan.hi-submenu__popper .hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__cyan.hi-submenu__popper .hi-menu-item--active::after{background-color:#46bc99}.theme__magenta.hi-menu .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__magenta.hi-menu .hi-menu-item--active>.hi-menu__title-content{color:#ff5975}.theme__magenta.hi-menu .hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__magenta.hi-menu .hi-menu-item--active>.hi-menu__title-icon{color:#ff5975}.theme__magenta.hi-menu .hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#ff5975}.theme__magenta.hi-menu .hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__magenta.hi-menu .hi-menu-item--active::after{background-color:#ff5975}.theme__magenta.hi-menu.active{border-color:#ff5975}.theme__magenta.hi-menu--mini .hi-menu-item--active{background-color:rgba(255,89,117,0.1)}.theme__magenta.hi-menu--mini .hi-menu-item--active::after{background-color:#ff5975}.theme__magenta.hi-menu--vertical{-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);box-shadow:0 2px 8px 0 rgba(0,0,0,0.15)}.theme__magenta.hi-menu--vertical .hi-menu-item--active:not(.hi-submenu){background-color:rgba(255,89,117,0.1)}.theme__magenta.hi-menu--vertical .hi-menu-item--active:not(.hi-submenu)::after{background-color:#ff5975}.theme__magenta.hi-menu--vertical .hi-menu__title:hover{background-color:rgba(255,89,117,0.1)}.theme__magenta.hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__magenta.hi-menu-item--active>.hi-menu__title-content{color:#ff5975}.theme__magenta.hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__magenta.hi-menu-item--active>.hi-menu__title-icon{color:#ff5975}.theme__magenta.hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#ff5975}.theme__magenta.hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__magenta.hi-menu-item--active::after{background-color:#ff5975}.theme__magenta.hi-submenu__popper .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__magenta.hi-submenu__popper .hi-menu-item--active>.hi-menu__title-content{color:#ff5975}.theme__magenta.hi-submenu__popper .hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__magenta.hi-submenu__popper .hi-menu-item--active>.hi-menu__title-icon{color:#ff5975}.theme__magenta.hi-submenu__popper .hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#ff5975}.theme__magenta.hi-submenu__popper .hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__magenta.hi-submenu__popper .hi-menu-item--active::after{background-color:#ff5975}.theme__lavender.hi-menu .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__lavender.hi-menu .hi-menu-item--active>.hi-menu__title-content{color:#b450de}.theme__lavender.hi-menu .hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__lavender.hi-menu .hi-menu-item--active>.hi-menu__title-icon{color:#b450de}.theme__lavender.hi-menu .hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#b450de}.theme__lavender.hi-menu .hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__lavender.hi-menu .hi-menu-item--active::after{background-color:#b450de}.theme__lavender.hi-menu.active{border-color:#b450de}.theme__lavender.hi-menu--mini .hi-menu-item--active{background-color:rgba(180,80,222,0.1)}.theme__lavender.hi-menu--mini .hi-menu-item--active::after{background-color:#b450de}.theme__lavender.hi-menu--vertical{-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);box-shadow:0 2px 8px 0 rgba(0,0,0,0.15)}.theme__lavender.hi-menu--vertical .hi-menu-item--active:not(.hi-submenu){background-color:rgba(180,80,222,0.1)}.theme__lavender.hi-menu--vertical .hi-menu-item--active:not(.hi-submenu)::after{background-color:#b450de}.theme__lavender.hi-menu--vertical .hi-menu__title:hover{background-color:rgba(180,80,222,0.1)}.theme__lavender.hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__lavender.hi-menu-item--active>.hi-menu__title-content{color:#b450de}.theme__lavender.hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__lavender.hi-menu-item--active>.hi-menu__title-icon{color:#b450de}.theme__lavender.hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#b450de}.theme__lavender.hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__lavender.hi-menu-item--active::after{background-color:#b450de}.theme__lavender.hi-submenu__popper .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__lavender.hi-submenu__popper .hi-menu-item--active>.hi-menu__title-content{color:#b450de}.theme__lavender.hi-submenu__popper .hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__lavender.hi-submenu__popper .hi-menu-item--active>.hi-menu__title-icon{color:#b450de}.theme__lavender.hi-submenu__popper .hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#b450de}.theme__lavender.hi-submenu__popper .hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__lavender.hi-submenu__popper .hi-menu-item--active::after{background-color:#b450de}.theme__blue.hi-menu .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__blue.hi-menu .hi-menu-item--active>.hi-menu__title-content{color:#3da8f5}.theme__blue.hi-menu .hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__blue.hi-menu .hi-menu-item--active>.hi-menu__title-icon{color:#3da8f5}.theme__blue.hi-menu .hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#3da8f5}.theme__blue.hi-menu .hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__blue.hi-menu .hi-menu-item--active::after{background-color:#3da8f5}.theme__blue.hi-menu.active{border-color:#3da8f5}.theme__blue.hi-menu--mini .hi-menu-item--active{background-color:rgba(61,168,245,0.1)}.theme__blue.hi-menu--mini .hi-menu-item--active::after{background-color:#3da8f5}.theme__blue.hi-menu--vertical{-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);box-shadow:0 2px 8px 0 rgba(0,0,0,0.15)}.theme__blue.hi-menu--vertical .hi-menu-item--active:not(.hi-submenu){background-color:rgba(61,168,245,0.1)}.theme__blue.hi-menu--vertical .hi-menu-item--active:not(.hi-submenu)::after{background-color:#3da8f5}.theme__blue.hi-menu--vertical .hi-menu__title:hover{background-color:rgba(61,168,245,0.1)}.theme__blue.hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__blue.hi-menu-item--active>.hi-menu__title-content{color:#3da8f5}.theme__blue.hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__blue.hi-menu-item--active>.hi-menu__title-icon{color:#3da8f5}.theme__blue.hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#3da8f5}.theme__blue.hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__blue.hi-menu-item--active::after{background-color:#3da8f5}.theme__blue.hi-submenu__popper .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__blue.hi-submenu__popper .hi-menu-item--active>.hi-menu__title-content{color:#3da8f5}.theme__blue.hi-submenu__popper .hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__blue.hi-submenu__popper .hi-menu-item--active>.hi-menu__title-icon{color:#3da8f5}.theme__blue.hi-submenu__popper .hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#3da8f5}.theme__blue.hi-submenu__popper .hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__blue.hi-submenu__popper .hi-menu-item--active::after{background-color:#3da8f5}.theme__purple.hi-menu .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__purple.hi-menu .hi-menu-item--active>.hi-menu__title-content{color:#8a8acb}.theme__purple.hi-menu .hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__purple.hi-menu .hi-menu-item--active>.hi-menu__title-icon{color:#8a8acb}.theme__purple.hi-menu .hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#8a8acb}.theme__purple.hi-menu .hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__purple.hi-menu .hi-menu-item--active::after{background-color:#8a8acb}.theme__purple.hi-menu.active{border-color:#8a8acb}.theme__purple.hi-menu--mini .hi-menu-item--active{background-color:rgba(138,138,203,0.1)}.theme__purple.hi-menu--mini .hi-menu-item--active::after{background-color:#8a8acb}.theme__purple.hi-menu--vertical{-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);box-shadow:0 2px 8px 0 rgba(0,0,0,0.15)}.theme__purple.hi-menu--vertical .hi-menu-item--active:not(.hi-submenu){background-color:rgba(138,138,203,0.1)}.theme__purple.hi-menu--vertical .hi-menu-item--active:not(.hi-submenu)::after{background-color:#8a8acb}.theme__purple.hi-menu--vertical .hi-menu__title:hover{background-color:rgba(138,138,203,0.1)}.theme__purple.hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__purple.hi-menu-item--active>.hi-menu__title-content{color:#8a8acb}.theme__purple.hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__purple.hi-menu-item--active>.hi-menu__title-icon{color:#8a8acb}.theme__purple.hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#8a8acb}.theme__purple.hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__purple.hi-menu-item--active::after{background-color:#8a8acb}.theme__purple.hi-submenu__popper .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.theme__purple.hi-submenu__popper .hi-menu-item--active>.hi-menu__title-content{color:#8a8acb}.theme__purple.hi-submenu__popper .hi-menu-item--active>.hi-menu__title .hi-menu__title-icon,.theme__purple.hi-submenu__popper .hi-menu-item--active>.hi-menu__title-icon{color:#8a8acb}.theme__purple.hi-submenu__popper .hi-menu-item--active>.hi-submenu__title>.hi-menu__title-toggle-icon{color:#8a8acb}.theme__purple.hi-submenu__popper .hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.theme__purple.hi-submenu__popper .hi-menu-item--active::after{background-color:#8a8acb}
+.hi-menu,.hi-submenu__popper{font:normal 14px/1.5 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";text-align:left;text-indent:0;text-shadow:none;text-transform:none;letter-spacing:0;word-spacing:normal;white-space:normal;color:#333}.hi-menu a,.hi-submenu__popper a{padding-left:0;padding-right:0}.hi-menu p,.hi-menu blockquote,.hi-menu ul,.hi-menu ol,.hi-menu dl,.hi-menu table,.hi-menu pre,.hi-menu h1,.hi-menu h2,.hi-menu h3,.hi-menu h4,.hi-menu h5,.hi-menu h6,.hi-submenu__popper p,.hi-submenu__popper blockquote,.hi-submenu__popper ul,.hi-submenu__popper ol,.hi-submenu__popper dl,.hi-submenu__popper table,.hi-submenu__popper pre,.hi-submenu__popper h1,.hi-submenu__popper h2,.hi-submenu__popper h3,.hi-submenu__popper h4,.hi-submenu__popper h5,.hi-submenu__popper h6{margin-top:0;margin-bottom:0}.hi-menu ul,.hi-menu ol,.hi-submenu__popper ul,.hi-submenu__popper ol{margin:0;padding:0;list-style-type:none}.hi-menu ul ul,.hi-menu ul ol,.hi-menu ol ul,.hi-menu ol ol,.hi-submenu__popper ul ul,.hi-submenu__popper ul ol,.hi-submenu__popper ol ul,.hi-submenu__popper ol ol{margin-top:0;margin-bottom:0}.hi-menu li+li,.hi-submenu__popper li+li{margin-top:0}.hi-menu dl,.hi-submenu__popper dl{margin-top:0;margin-bottom:0}.hi-menu ul,.hi-submenu__popper ul{margin-top:0;margin-bottom:0;padding-left:0;font-size:0}.hi-menu li,.hi-submenu__popper li{margin:0;list-style:none}.hi-menu .hi-menu-items,.hi-submenu__popper .hi-menu-items{display:-webkit-box;display:-ms-flexbox;display:flex}.hi-menu .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.hi-menu .hi-menu-item--active>.hi-menu__title-content,.hi-submenu__popper .hi-menu-item--active>.hi-menu__title .hi-menu__title-content,.hi-submenu__popper .hi-menu-item--active>.hi-menu__title-content{color:#4284f5}.hi-menu .hi-menu-item--disabled .hi-menu__title,.hi-submenu__popper .hi-menu-item--disabled .hi-menu__title{cursor:not-allowed;color:#d8d8d8}.hi-menu .hi-menu__title,.hi-submenu__popper .hi-menu__title{display:-webkit-box;display:-ms-flexbox;display:flex;line-height:22px;font-size:14px;color:#333;cursor:pointer}.hi-menu .hi-menu__title-icon,.hi-submenu__popper .hi-menu__title-icon{-webkit-box-flex:0;-ms-flex:none;flex:none;margin-right:4px}.hi-menu .hi-menu__title-content,.hi-submenu__popper .hi-menu__title-content{-webkit-box-flex:1;-ms-flex:auto;flex:auto;width:auto;max-width:initial;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hi-menu .hi-menu__title-toggle-icon,.hi-submenu__popper .hi-menu__title-toggle-icon{-webkit-box-flex:0;-ms-flex:none;flex:none;margin-left:8px}.hi-menu--horizontal{border-bottom:1px solid #e6e7e8}.hi-menu--horizontal .hi-menu-item{position:relative;margin-right:48px}.hi-menu--horizontal .hi-menu-item--active::after{content:'';position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:32px;height:2px;background-color:#4284f5}.hi-menu--horizontal .hi-menu-item:last-child{margin-right:0}.hi-menu--horizontal .hi-menu__title{padding:12px 0}.hi-menu--horizontal .hi-menu__title-content{max-width:100px}.hi-menu--vertical{display:inline-block;width:216px;padding:12px 0;background:#fff;-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);border:1px solid #e6e7e8;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-menu--vertical .hi-menu-items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hi-menu--vertical .hi-menu__title{padding:12px 16px}.hi-menu--vertical .hi-menu__title:hover{background-color:rgba(66,133,244,0.08)}.hi-menu--vertical .hi-submenu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hi-menu--vertical .hi-menu__title-icon{font-size:20px}.hi-menu--vertical .hi-menu--1 .hi-submenu__items>.hi-menu__title{padding-left:64px}.hi-menu--vertical .hi-menu--2>.hi-menu__title{padding-left:64px}.hi-menu--vertical .hi-menu--2 .hi-submenu__items>.hi-menu__title{padding-left:96px}.hi-menu--mini{width:48px;padding:12px 0;overflow:hidden}.hi-menu--mini .hi-menu--1.hi-menu-item--active{background-color:rgba(66,133,244,0.08)}.hi-menu--mini .hi-menu__title{padding:0}.hi-menu--mini .hi-menu__title-icon{width:46px;height:46px;line-height:46px;margin-right:0;text-align:center}.hi-menu--mini__toggle{height:48px;line-height:48px;padding-left:14px;cursor:pointer;font-size:20px}.hi-submenu__items--hide{display:none}.hi-submenu__popper{width:200px;padding:4px 0;background-color:#fff;-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);box-shadow:0 2px 8px 0 rgba(0,0,0,0.15);border:1px solid #e6e7e8;-webkit-box-sizing:border-box;box-sizing:border-box}.hi-submenu__popper .hi-submenu__items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hi-submenu__popper .hi-submenu__items .hi-menu-item--disabled{cursor:not-allowed;color:#d8d8d8}.hi-submenu__popper .hi-menu__title{padding:8px 16px}.hi-submenu__popper--fat{width:auto}.hi-submenu__popper--fat .hi-submenu__items{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.hi-submenu__popper .hi-menu-fat{margin-right:12px;width:108px}.hi-submenu__popper .hi-menu-fat__title{color:#999}.hi-submenu__popper .hi-menu-fat__content{font-size:14px;color:#999;-webkit-box-sizing:border-box;box-sizing:border-box;width:auto;max-width:initial;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

package/es/modal/__test__/index.test.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _ = _interopRequireDefault(require("../"));
+
+var _button = _interopRequireDefault(require("../../button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var wrapper = null;
+var confirmCallback = jest.fn(function (items) {
+  return items;
+});
+var cancelCallback = jest.fn(function () {
+  wrapper.setProps({
+    show: false
+  });
+});
+describe('Modal', function () {
+  beforeEach(function () {});
+  afterEach(function () {
+    wrapper && wrapper.unmount();
+    confirmCallback.mockClear();
+    cancelCallback.mockClear();
+  });
+  it('基础用法', function () {
+    wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      title: "\u63D0\u793A\u6D88\u606F",
+      show: false,
+      onConfirm: confirmCallback,
+      onCancel: cancelCallback,
+      confirmText: "ok",
+      cancelText: "cancel"
+    }, /*#__PURE__*/_react["default"].createElement("span", null, "\u4E00\u4E9B\u6D88\u606F"), /*#__PURE__*/_react["default"].createElement("span", null, "\u4E00\u4E9B\u6D88\u606F")));
+    expect(document.querySelectorAll('.hi-modal--hide')).toHaveLength(1);
+    wrapper.setProps({
+      show: true
+    }); // 显示modal
+
+    expect(document.querySelectorAll('.hi-modal--hide')).toHaveLength(0);
+    expect(wrapper.find('.hi-modal__close')).toHaveLength(1); // 显示关闭按钮
+
+    expect(wrapper.find('.hi-btn--type--primary').text()).toEqual('ok'); // 自定义按钮文字
+
+    expect(wrapper.find('.hi-btn--type--default').text()).toEqual('cancel');
+    wrapper.find('.hi-btn--type--primary').simulate('click'); // 点击确定按钮
+
+    expect(confirmCallback).toHaveBeenCalled();
+    wrapper.find('.hi-btn--type--default').simulate('click'); // 点击取消按钮
+
+    expect(cancelCallback).toHaveBeenCalled();
+    expect(document.querySelectorAll('.hi-modal--hide')).toHaveLength(1); // modal被隐藏
+
+    wrapper.setProps({
+      show: true
+    }); // 显示modal
+
+    wrapper.find('.hi-modal__close').simulate('click'); // 点击关闭按钮关闭modal
+
+    expect(document.querySelectorAll('.hi-modal--hide')).toHaveLength(1); // modal被隐藏
+
+    wrapper.setProps({
+      show: true
+    }); // 显示modal
+
+    wrapper.find('.hi-modal__mask').simulate('click'); // 点击黑色背景关闭modal
+
+    expect(document.querySelectorAll('.hi-modal--hide')).toHaveLength(1); // modal被隐藏
+  });
+  it('自定义', function () {
+    wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+      title: "\u63D0\u793A\u6D88\u606F",
+      show: false,
+      onConfirm: confirmCallback,
+      onCancel: cancelCallback,
+      footers: [/*#__PURE__*/_react["default"].createElement(_button["default"], {
+        type: "primary",
+        key: 0,
+        onClick: function onClick() {
+          return void 0;
+        }
+      }, "\u81EA\u5B9A\u4E49\u6309\u94AE1"), /*#__PURE__*/_react["default"].createElement(_button["default"], {
+        type: "success",
+        key: 1,
+        onClick: function onClick() {
+          return void 0;
+        }
+      }, "\u81EA\u5B9A\u4E49\u6309\u94AE2"), /*#__PURE__*/_react["default"].createElement(_button["default"], {
+        type: "danger",
+        key: 2,
+        onClick: function onClick() {
+          return void 0;
+        }
+      }, "\u81EA\u5B9A\u4E49\u6309\u94AE3"), /*#__PURE__*/_react["default"].createElement(_button["default"], {
+        type: "default",
+        key: 3,
+        onClick: cancelCallback
+      }, "\u5173\u95ED")],
+      backDrop: false,
+      closeBtn: false
+    }, /*#__PURE__*/_react["default"].createElement("span", null, "\u4E00\u4E9B\u6D88\u606F"), /*#__PURE__*/_react["default"].createElement("span", null, "\u4E00\u4E9B\u6D88\u606F")));
+    expect(document.querySelectorAll('.hi-modal--hide')).toHaveLength(1);
+    wrapper.setProps({
+      show: true
+    }); // 显示modal
+
+    expect(document.querySelectorAll('.hi-modal--hide')).toHaveLength(0);
+    expect(wrapper.find('.hi-modal__close')).toHaveLength(0); // 不显示关闭按钮
+
+    expect(wrapper.find('.hi-btn')).toHaveLength(4); // 自定义底部按钮
+
+    wrapper.find('.hi-modal__mask').simulate('click'); // 点击黑色背景不关闭modal
+
+    expect(document.querySelectorAll('.hi-modal--hide')).toHaveLength(0);
+    wrapper.find('.hi-btn--type--default').simulate('click'); // 点击取消按钮
+
+    expect(cancelCallback).toHaveBeenCalled();
+    expect(document.querySelectorAll('.hi-modal--hide')).toHaveLength(1); // modal被隐藏
+  });
+});