@hi-ui/hiui 2.15.11 → 2.15.12

package/es/menu/index.js

@@ -1,431 +1,24 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-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);
-
-    _defineProperty(_assertThisInitialized(_this), "getActiveMenus", function (menus, activeId) {
-      var activeMenus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-      var result;
-
-      for (var index in menus) {
-        var _activeMenus = _toConsumableArray(activeMenus);
-
-        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;
+Object.defineProperty(exports, "Menu", {
+  enumerable: true,
+  get: function get() {
+    return _Menu["default"];
   }
+});
+exports["default"] = void 0;
 
-  _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
-      })));
-    }
-  }]);
+var _Menu = _interopRequireDefault(require("./Menu"));
 
-  return Menu;
-}(_react.Component);
+var _util = require("../_util");
 
-_defineProperty(Menu, "defaultProps", {
-  mode: 'vertical',
-  onClick: function onClick() {},
-  activeId: '',
-  mini: false,
-  miniToggle: false,
-  fatMenu: false,
-  accordion: true
-});
+var _context = _interopRequireDefault(require("../context"));
 
-_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 = (0, _util.depreactedPropsCompat)([['placement', 'mode'], ['collapsed', 'mini'], ['showCollapse', 'miniToggle'], ['showAllSubMenus', 'fatMenu'], ['onCollapse', 'onMiniChange'], ['data', 'datas']])((0, _context["default"])(_Menu["default"]));
 
-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--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}
+.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}

package/es/message/__tests__/index.test.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _sinon = _interopRequireDefault(require("sinon"));
+
+var _index = _interopRequireDefault(require("../index"));
+
+/* eslint-env jest */
+describe('Message', function () {
+  var clock;
+  beforeEach(function () {
+    clock = _sinon["default"].useFakeTimers();
+  });
+  afterEach(function () {
+    clock.restore();
+  });
+  describe('Methods', function () {
+    it('open&close', function () {
+      _index["default"].open({
+        title: 'Tip'
+      });
+    });
+  });
+  describe('PropTypes', function () {
+    it('duration', function () {
+      _index["default"].open({
+        title: 'Tip',
+        type: 'info',
+        duration: 3000
+      });
+
+      expect(document.querySelectorAll('.hi-message--info')).toHaveLength(1);
+      clock.tick(4000);
+      expect(document.querySelectorAll('.hi-message--info')).toHaveLength(0);
+    });
+    it('title', function () {
+      _index["default"].open({
+        title: 'Tip',
+        type: 'info',
+        duration: 3000
+      });
+
+      expect(document.querySelector('.hi-message__title').textContent).toEqual('Tip');
+    });
+    it('type', function () {
+      _index["default"].open({
+        title: 'Tip',
+        type: 'success'
+      });
+
+      _index["default"].open({
+        title: 'Tip',
+        type: 'error'
+      });
+
+      _index["default"].open({
+        title: 'Tip',
+        type: 'warning'
+      });
+
+      expect(document.querySelectorAll('.hi-message--success')).toHaveLength(1);
+      expect(document.querySelectorAll('.hi-message--error')).toHaveLength(1);
+      expect(document.querySelectorAll('.hi-message--warning')).toHaveLength(1);
+    });
+  });
+});

package/es/message/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _notice = _interopRequireDefault(require("../notice"));
+
+require("./style/index");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var iconMap = {
+  success: 'chenggong',
+  error: 'shibai',
+  warning: 'jinggao',
+  info: 'tishi'
+};
+var message = {
+  open: function open(_ref) {
+    var title = _ref.title,
+        _ref$prefix = _ref.prefix,
+        prefix = _ref$prefix === void 0 ? 'message' : _ref$prefix,
+        _ref$key = _ref.key,
+        key = _ref$key === void 0 ? Math.random() : _ref$key,
+        duration = _ref.duration,
+        _ref$closeable = _ref.closeable,
+        closeable = _ref$closeable === void 0 ? false : _ref$closeable,
+        _ref$type = _ref.type,
+        type = _ref$type === void 0 ? 'info' : _ref$type;
+
+    var NoticeContent = _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("div", {
+      className: "hi-".concat(prefix, "__title--wrapper")
+    }, _react["default"].createElement("span", {
+      className: "hi-".concat(prefix, "__icon")
+    }, _react["default"].createElement("i", {
+      className: (0, _classnames["default"])('hi-icon', "icon-".concat(iconMap[type]))
+    })), title && _react["default"].createElement("div", {
+      className: "hi-".concat(prefix, "__title")
+    }, title)));
+
+    _notice["default"].open({
+      content: NoticeContent,
+      prefix: prefix,
+      key: key,
+      closeable: closeable,
+      duration: duration,
+      type: type
+    });
+  }
+};
+var _default = message;
+exports["default"] = _default;