Merge pull request #1121 from easyops-cn/sailorshe/master/navMenuFilter

fix(): nav-menu filter menuItems
easyops-cn · Jun 21, 2024 · ed7e3a0 · ed7e3a0
2 parents 6018d0d + 4404cfe
commit ed7e3a0
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 7 deletions.
diff --git a/bricks/nav/src/nav-menu/index.spec.ts b/bricks/nav/src/nav-menu/index.spec.ts
@@ -87,6 +87,11 @@ describe("eo-nav-menu", () => {
               },
             ],
           },
+          {
+            title: "filterItem",
+            type: "subMenu",
+            items: [],
+          },
         ],
       };
       document.body.appendChild(element);

diff --git a/bricks/nav/src/nav-menu/index.tsx b/bricks/nav/src/nav-menu/index.tsx
@@ -372,15 +372,28 @@ function NavMenuComponent(props: NavMenuProps) {
   );
   const { pathname, search } = location;
 
+  const menuItems = useMemo(() => {
+    return (menu?.menuItems ?? []).filter(
+      (item) =>
+        // 默认
+        item.type === "default" ||
+        // 没有类型
+        !item.type ||
+        // 分组类型并且没有子项，过滤
+        (["group", "subMenu"].includes(item.type) &&
+          (item as SidebarMenuGroup).items?.length)
+    );
+  }, [menu?.menuItems]);
+
   const selectedKey = useMemo(() => {
     const { selectedKeys } = initMenuItemAndMatchCurrentPathKeys(
-      menu?.menuItems ?? [],
+      menuItems ?? [],
       pathname,
       search,
       ""
     );
     return selectedKeys;
-  }, [menu?.menuItems, pathname, search]);
+  }, [menuItems, pathname, search]);
 
   useEffect(() => {
     const unListen: UnregisterCallback = history.listen((location) => {
@@ -434,17 +447,17 @@ function NavMenuComponent(props: NavMenuProps) {
     (): SidebarMenuItem => ({
       type: "subMenu",
       title: "···",
-      items: menu?.menuItems.slice(
+      items: menuItems.slice(
         overflowIndex,
-        menu.menuItems.length
+        menuItems.length
       ) as SidebarMenuItem[],
     }),
-    [menu?.menuItems, overflowIndex]
+    [menuItems, overflowIndex]
   );
 
   return (
     <div ref={navMenuWrapperRef} className="nav-menu-wrapper">
-      {menu?.menuItems.map((item, index) => {
+      {menuItems.map((item, index) => {
         const isHidden = overflowIndex <= index;
         return (
           <React.Fragment key={item.key}>
@@ -482,7 +495,7 @@ function NavMenuComponent(props: NavMenuProps) {
         );
       })}
       <RenderMenuItemCom
-        hidden={overflowIndex > (menu?.menuItems?.length ?? 0)}
+        hidden={overflowIndex > menuItems.length}
         item={overflowMenu}
         showTooltip={showTooltip}
         selectedKey={selectedKey}