@hi-ui/menu 4.0.0-beta.7 → 4.0.0

package/lib/cjs/Expander.js

@@ -2,7 +2,7 @@
  * @hi-ui/menu
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -36,7 +36,7 @@ var Expander = function Expander(_ref) {
       height = _useState[0],
       setHeight = _useState[1];
 
-  return /*#__PURE__*/React__default['default'].createElement(reactTransitionGroup.CSSTransition, {
+  return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
     "in": visible,
     timeout: 200,
     classNames: className,
@@ -56,7 +56,7 @@ var Expander = function Expander(_ref) {
         setHeight(0);
       });
     }
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       height: height,
       overflow: 'hidden',
@@ -66,4 +66,3 @@ var Expander = function Expander(_ref) {
 };
 
 exports.Expander = Expander;
-//# sourceMappingURL=Expander.js.map

package/lib/cjs/Menu.js

@@ -2,7 +2,7 @@
  * @hi-ui/menu
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -35,6 +35,18 @@ var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
 
 var Tooltip = require('@hi-ui/tooltip');
 
+var useToggle = require('@hi-ui/use-toggle');
+
+var treeUtils = require('@hi-ui/tree-utils');
+
+var typeAssertion = require('@hi-ui/type-assertion');
+
+var useResizeObserver = require('@hi-ui/use-resize-observer');
+
+var useMergeRefs = require('@hi-ui/use-merge-refs');
+
+var useId = require('@hi-ui/use-id');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -46,86 +58,196 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 
 var MENU_PREFIX = classname.getPrefixCls('menu');
+var DEFAULT_EXPANDED_IDS = [];
+var NOOP_ARRAY = [];
+var MIN_WIDTH = 56;
+var MENU_MORE_ID = "MENU_MORE_" + useId.uuid();
 /**
  * TODO: What is Menu
  */
 
 var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var _cx;
-
   var _a$prefixCls = _a.prefixCls,
       prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
       _a$role = _a.role,
       role = _a$role === void 0 ? 'menu' : _a$role,
       className = _a.className,
-      data = _a.data,
+      _a$data = _a.data,
+      data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
       _a$placement = _a.placement,
       placement = _a$placement === void 0 ? 'vertical' : _a$placement,
-      showCollapse = _a.showCollapse,
+      _a$showCollapse = _a.showCollapse,
+      showCollapse = _a$showCollapse === void 0 ? false : _a$showCollapse,
       _a$expandedType = _a.expandedType,
       expandedType = _a$expandedType === void 0 ? 'collapse' : _a$expandedType,
       _a$showAllSubMenus = _a.showAllSubMenus,
       showAllSubMenus = _a$showAllSubMenus === void 0 ? false : _a$showAllSubMenus,
-      defaultExpandedIds = _a.defaultExpandedIds,
-      defaultActiveId = _a.defaultActiveId,
-      activeId = _a.activeId,
+      _a$defaultExpandAll = _a.defaultExpandAll,
+      defaultExpandAll = _a$defaultExpandAll === void 0 ? false : _a$defaultExpandAll,
+      _a$defaultExpandedIds = _a.defaultExpandedIds,
+      defaultExpandedIds = _a$defaultExpandedIds === void 0 ? DEFAULT_EXPANDED_IDS : _a$defaultExpandedIds,
+      expandedIdsProp = _a.expandedIds,
+      onExpand = _a.onExpand,
+      _a$defaultActiveId = _a.defaultActiveId,
+      defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
+      activeIdProp = _a.activeId,
       onClickSubMenu = _a.onClickSubMenu,
+      collapsed = _a.collapsed,
+      _a$defaultCollapsed = _a.defaultCollapsed,
+      defaultCollapsed = _a$defaultCollapsed === void 0 ? false : _a$defaultCollapsed,
+      onCollapse = _a.onCollapse,
+      footerRender = _a.footerRender,
       onClick = _a.onClick,
-      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandedIds", "defaultActiveId", "activeId", "onClickSubMenu", "onClick"]);
+      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "onCollapse", "footerRender", "onClick"]);
 
-  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId || '', activeId, onClick),
-      _activeId = _useUncontrolledState[0],
+  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp, onClick),
+      activeId = _useUncontrolledState[0],
       updateActiveId = _useUncontrolledState[1];
 
-  var _useState = React.useState(util.getAncestorIds(_activeId, data)),
+  var _useState = React.useState(function () {
+    return util.getAncestorIds(activeId, data);
+  }),
       activeParents = _useState[0],
       updateActiveParents = _useState[1];
 
   React.useEffect(function () {
-    updateActiveParents(util.getAncestorIds(_activeId, data));
-  }, [_activeId, data]);
+    updateActiveParents(util.getAncestorIds(activeId, data));
+  }, [activeId, data]);
 
-  var _useState2 = React.useState(defaultExpandedIds || []),
-      _expandedIds = _useState2[0],
-      updateExpanedIds = _useState2[1];
+  var _useUncontrolledState2 = useUncontrolledState.useUncontrolledState(function () {
+    return defaultExpandAll ? treeUtils.getTreeNodesWithChildren(data).map(function (node) {
+      return node.id;
+    }) : defaultExpandedIds;
+  }, expandedIdsProp, onExpand),
+      expandedIds = _useUncontrolledState2[0],
+      updateExpandedIds = _useUncontrolledState2[1];
 
-  var clickMenu = React.useCallback(function (id) {
-    updateActiveId(id);
+  var clickMenu = React.useCallback(function (id, raw) {
+    updateActiveId(id, raw);
   }, [updateActiveId]);
   var clickSubMenu = React.useCallback(function (id) {
-    var expandedIds = _expandedIds.includes(id) ? _expandedIds.filter(function (expandedId) {
+    var nextExpandedIds = expandedIds.includes(id) ? expandedIds.filter(function (expandedId) {
       return expandedId !== id;
-    }) : _expandedIds.concat(id);
-    updateExpanedIds(expandedIds);
+    }) : expandedIds.concat(id);
+    updateExpandedIds(nextExpandedIds);
 
     if (onClickSubMenu) {
-      onClickSubMenu(id, expandedIds);
+      onClickSubMenu(id, nextExpandedIds);
     }
-  }, [onClickSubMenu, _expandedIds]);
+  }, [onClickSubMenu, expandedIds, updateExpandedIds]);
   var closePopper = React.useCallback(function (id) {
-    updateExpanedIds(_expandedIds.filter(function (expandedId) {
+    updateExpandedIds(expandedIds.filter(function (expandedId) {
       return expandedId !== id;
     }));
-  }, [_expandedIds]);
+  }, [expandedIds, updateExpandedIds]);
   var closeAllPopper = React.useCallback(function () {
-    updateExpanedIds([]);
-  }, []);
-
-  var _useState3 = React.useState(false),
-      mini = _useState3[0],
-      setMini = _useState3[1];
-
-  var cls = classname.cx(prefixCls, className, prefixCls + "--" + placement, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx[prefixCls + "--popup"] = expandedType === 'pop' || showAllSubMenus || mini, _cx));
-  var onToggle = React.useCallback(function () {
-    setMini(!mini);
-    closeAllPopper();
-  }, [mini, closeAllPopper]);
-  var canToggle = placement === 'vertical' && showCollapse;
-  return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
-    ref: ref,
+    updateExpandedIds([]);
+  }, [updateExpandedIds]);
+
+  var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
+    defaultVisible: defaultCollapsed,
+    visible: collapsed,
+    onToggle: onCollapse
+  }),
+      mini = _useUncontrolledToggl[0],
+      miniToggleAction = _useUncontrolledToggl[1];
+
+  var showVertical = placement === 'vertical';
+  var canToggle = showVertical && showCollapse;
+  var showMini = showVertical && mini;
+
+  var _useState2 = React.useState(null),
+      containerElement = _useState2[0],
+      setContainerElement = _useState2[1];
+
+  var _useState3 = React.useState(),
+      _useState3$ = _useState3[0],
+      containerWidth = _useState3$ === void 0 ? 0 : _useState3$,
+      setContainerWidth = _useState3[1];
+
+  useResizeObserver.useResizeObserver({
+    element: containerElement,
+    disabled: showVertical,
+    getSize: function getSize(element) {
+      var itemRect = element.getBoundingClientRect();
+      return itemRect.width;
+    },
+    onResize: function onResize(el, width) {
+      setContainerWidth(width);
+    }
+  });
+
+  var _useState4 = React.useState(0),
+      tagMaxCount = _useState4[0],
+      setTagMaxCount = _useState4[1];
+
+  var mergedTagList = React.useMemo(function () {
+    if (showVertical) return data;
+    if (containerWidth < MIN_WIDTH) return data;
+    return data.slice(0, Math.min(data.length, containerWidth / MIN_WIDTH));
+  }, [showVertical, data, containerWidth]);
+  var restTagList = React.useMemo(function () {
+    if (tagMaxCount > 0) return data.slice(tagMaxCount);
+    return [];
+  }, [data, tagMaxCount]);
+  var getTagWidth = React.useCallback(function (index) {
+    if (!containerElement) return MIN_WIDTH;
+    var elements = containerElement.getElementsByClassName('hi-v4-menu-item');
+    var element = elements && elements[index];
+    if (!element) return MIN_WIDTH;
+    return element.getBoundingClientRect().width;
+  }, [containerElement]);
+  React.useLayoutEffect(function () {
+    if (showVertical) return;
+    var tagMaxCount = 0;
+
+    if (typeAssertion.isArrayNonEmpty(mergedTagList)) {
+      var len = mergedTagList.length;
+      var lastIndex = len - 1;
+      var totalWidth = 72; // 更多
+
+      for (var i = 0; i < len; ++i) {
+        var currentTagWidth = getTagWidth(i);
+
+        if (currentTagWidth === undefined) {
+          break;
+        }
+
+        totalWidth += currentTagWidth;
+
+        if (lastIndex === 0 && totalWidth <= containerWidth || i === lastIndex - 1 && totalWidth + getTagWidth(lastIndex) <= containerWidth) {
+          tagMaxCount = lastIndex;
+          break;
+        } else if (totalWidth > containerWidth) {
+          tagMaxCount = i - 1;
+          break;
+        }
+      }
+    } else {
+      tagMaxCount = 0;
+    } // 保底要展示 1 个
+
+
+    setTagMaxCount(typeAssertion.isArrayNonEmpty(mergedTagList) && tagMaxCount < 1 ? 1 : tagMaxCount + 1);
+  }, [showVertical, getTagWidth, containerWidth, mergedTagList]);
+
+  var renderFooter = function renderFooter() {
+    var collapseNode = canToggle ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classname.cx(prefixCls + "__toggle"),
+      onClick: miniToggleAction.not
+    }, mini ? /*#__PURE__*/React__default["default"].createElement(icons.MenuUnfoldOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.MenuFoldOutlined, null)) : null;
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, typeAssertion.isFunction(footerRender) ? footerRender({
+      collapsed: showMini,
+      collapseNode: collapseNode
+    }) : collapseNode);
+  };
+
+  var cls = classname.cx(prefixCls, className, prefixCls + "--" + placement, mini && prefixCls + "--mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+    ref: useMergeRefs.useMergeRefs(ref, setContainerElement),
     role: role,
     className: cls
-  }, rest), /*#__PURE__*/React__default['default'].createElement(context['default'].Provider, {
+  }, rest), /*#__PURE__*/React__default["default"].createElement(context["default"].Provider, {
     value: {
       placement: placement,
       expandedType: expandedType,
@@ -136,31 +258,55 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       closePopper: closePopper,
       closeAllPopper: closeAllPopper,
       activeParents: activeParents,
-      activeId: _activeId,
-      expandedIds: _expandedIds
+      activeId: activeId,
+      expandedIds: expandedIds
     }
-  }, /*#__PURE__*/React__default['default'].createElement("ul", {
+  }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: classname.cx(prefixCls + "__wrapper")
-  }, data.map(function (item) {
-    return canToggle && mini ? /*#__PURE__*/React__default['default'].createElement(Tooltip__default['default'], {
+  }, mergedTagList.map(function (item, index) {
+    return showMini ? /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
       title: item.title,
       key: item.id,
       placement: "right"
-    }, /*#__PURE__*/React__default['default'].createElement(MenuItem.MenuItem, Object.assign({}, item, {
-      level: 1
-    }))) : /*#__PURE__*/React__default['default'].createElement(MenuItem.MenuItem, Object.assign({}, item, {
+    }, /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, Object.assign({}, item, {
+      level: 1,
+      render: renderMenuItemMini,
+      raw: item
+    }))) : /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, Object.assign({
+      hidden: !showVertical && index >= tagMaxCount
+    }, item, {
       key: item.id,
-      level: 1
+      level: 1,
+      raw: item
     }));
-  })), canToggle ? /*#__PURE__*/React__default['default'].createElement("div", {
-    className: classname.cx(prefixCls + "__toggle"),
-    onClick: onToggle
-  }, mini ? /*#__PURE__*/React__default['default'].createElement(icons.MenuUnfoldOutlined, null) : /*#__PURE__*/React__default['default'].createElement(icons.MenuFoldOutlined, null)) : null));
+  }), showVertical || restTagList.length === 0 ? null : /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, {
+    key: MENU_MORE_ID,
+    id: MENU_MORE_ID,
+    title: "\u66F4\u591A",
+    children: restTagList
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: prefixCls + "__footer"
+  }, renderFooter())));
 });
 
 if (env.__DEV__) {
   Menu.displayName = 'Menu';
 }
+/**
+ * Mini 模式下渲染 item
+ */
+
+
+var renderMenuItemMini = function renderMenuItemMini(menu) {
+  if (typeof menu.icon !== 'undefined') {
+    return menu.icon;
+  }
+
+  if (typeof menu.title === 'string') {
+    return menu.title.substring(0, 1);
+  }
+
+  return menu.title;
+};
 
 exports.Menu = Menu;
-//# sourceMappingURL=Menu.js.map