@hi-ui/hiui 3.9.0-rc.8 → 4.0.0-beta.1

package/es/menu/Menu.js

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

package/es/menu/SubMenu.js

@@ -1,218 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _popper = _interopRequireDefault(require("../popper"));
-
-var _icon = _interopRequireDefault(require("../icon"));
-
-var _Title = _interopRequireDefault(require("./Title"));
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-var SubMenu = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(SubMenu, _Component);
-
-  var _super = _createSuper(SubMenu);
-
-  function SubMenu() {
-    (0, _classCallCheck2["default"])(this, SubMenu);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2["default"])(SubMenu, [{
-    key: "onClick",
-    value: function onClick(index) {
-      this.props.onClick(index);
-    }
-  }, {
-    key: "checkActive",
-    value: function checkActive(activeIndex, index) {
-      var indexArr = index.split('-');
-      var activeIndexArr = activeIndex.split('-');
-      return activeIndexArr.slice(0, indexArr.length).join('-') === index;
-    }
-  }, {
-    key: "checkExpand",
-    value: function checkExpand(activeIndex, expandIndex, index) {
-      return expandIndex.some(function (item) {
-        var indexArr = index.split('-');
-        var expandIndexArr = item.split('-');
-        return expandIndexArr.slice(0, indexArr.length).join('-') === index;
-      });
-    }
-  }, {
-    key: "renderPopperMenu",
-    value: function renderPopperMenu(deepSubmenu, isExpand) {
-      var _this$props = this.props,
-          mini = _this$props.mini,
-          datas = _this$props.datas,
-          index = _this$props.index,
-          renderMenu = _this$props.renderMenu,
-          fatMenu = _this$props.fatMenu,
-          clickInside = _this$props.clickInside,
-          theme = _this$props.theme,
-          overlayClassName = _this$props.overlayClassName;
-      var leftGap;
-      var topGap;
-      var placement;
-
-      if (deepSubmenu || mini) {
-        // leftGap = mini && !deepSubmenu ? 0 : 16 // 非mini状态有个16px的right-padding，所以要补偿一下
-        leftGap = 0;
-        topGap = -4;
-        placement = 'right-start';
-      } else {
-        leftGap = 0;
-        topGap = 5;
-        placement = 'bottom-start';
-      }
-
-      return /*#__PURE__*/_react["default"].createElement(_popper["default"], {
-        show: isExpand,
-        attachEle: this.submenuTrigger,
-        zIndex: 1050,
-        topGap: topGap,
-        leftGap: leftGap,
-        overlayClassName: overlayClassName,
-        className: (0, _classnames["default"])('hi-submenu__popper', "theme__".concat(theme), {
-          'hi-submenu__popper--fat': fatMenu
-        }),
-        width: false,
-        placement: placement
-      }, /*#__PURE__*/_react["default"].createElement("ul", {
-        className: (0, _classnames["default"])('hi-submenu__items'),
-        onClick: function onClick() {
-          return clickInside();
-        } // 利用事件冒泡设置clickInsideFlag
-
-      }, renderMenu(datas, index)));
-    }
-  }, {
-    key: "renderVerticalMenu",
-    value: function renderVerticalMenu(isActive, isExpand) {
-      var _this$props2 = this.props,
-          datas = _this$props2.datas,
-          index = _this$props2.index,
-          renderMenu = _this$props2.renderMenu,
-          clickInside = _this$props2.clickInside,
-          theme = _this$props2.theme;
-      return /*#__PURE__*/_react["default"].createElement("ul", {
-        className: (0, _classnames["default"])('hi-submenu__items', "theme__".concat(theme), {
-          'hi-submenu__items--hide': !isExpand
-        }),
-        onClick: function onClick() {
-          return clickInside();
-        } // 利用事件冒泡设置clickInsideFlag
-        ,
-        key: index
-      }, renderMenu(datas, index));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this = this;
-
-      var _this$props3 = this.props,
-          content = _this$props3.content,
-          icon = _this$props3.icon,
-          mode = _this$props3.mode,
-          mini = _this$props3.mini,
-          level = _this$props3.level,
-          index = _this$props3.index,
-          activeIndex = _this$props3.activeIndex,
-          expandIndex = _this$props3.expandIndex,
-          disabled = _this$props3.disabled,
-          fatMenu = _this$props3.fatMenu,
-          theme = _this$props3.theme;
-      var isExpand = this.checkExpand(activeIndex, expandIndex, index);
-      var isActive = this.checkActive(activeIndex, index);
-      var deepSubmenu = index.split('-').length > 1;
-      var cls = (0, _classnames["default"])('hi-menu-item', "theme__".concat(theme), 'hi-submenu', "hi-menu--".concat(level), {
-        'hi-menu-item--disabled': disabled,
-        'hi-menu-item--active': isActive,
-        'hi-submenu--fat': fatMenu
-      });
-      var toggleIcon;
-
-      if (mode === 'horizontal' && !deepSubmenu) {
-        toggleIcon = 'down';
-      } else if (deepSubmenu && (mode === 'horizontal' || mini)) {
-        toggleIcon = 'right';
-      } else {
-        toggleIcon = isExpand ? 'up' : 'down';
-      }
-
-      return /*#__PURE__*/_react["default"].createElement("li", {
-        className: cls,
-        ref: function ref(node) {
-          _this.submenuTrigger = node;
-        },
-        key: index
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "theme__".concat(theme, " hi-submenu__title hi-menu__title"),
-        onClick: function onClick() {
-          !disabled && _this.onClick(index);
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_Title["default"], {
-        icon: icon,
-        content: content,
-        mini: mini,
-        level: level,
-        placement: mode
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "hi-menu__title-toggle-icon"
-      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-        name: toggleIcon
-      }))), !mini && mode === 'vertical' ? this.renderVerticalMenu(isActive, isExpand) : this.renderPopperMenu(deepSubmenu, isExpand));
-    }
-  }]);
-  return SubMenu;
-}(_react.Component);
-
-SubMenu.propTypes = {
-  icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  content: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  datas: _propTypes["default"].array,
-  renderMenu: _propTypes["default"].func,
-  onClick: _propTypes["default"].func,
-  index: _propTypes["default"].string,
-  level: _propTypes["default"].number,
-  mode: _propTypes["default"].oneOf(['horizontal', 'vertical']),
-  mini: _propTypes["default"].bool,
-  fatMenu: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  activeIndex: _propTypes["default"].string,
-  expandIndex: _propTypes["default"].array
-};
-SubMenu.defaultProps = {
-  level: 1,
-  expandIndex: []
-};
-var _default = SubMenu;
-exports["default"] = _default;