Merge pull request #594 from easyops-cn/sailorshe/master/fixPopoverAn…

…dnavMenuOverflowStyle fix(): nav-menu & popover style
easyops-cn · Nov 8, 2023 · c9425c5 · c9425c5
2 parents 00430a7 + 50fad73
commit c9425c5
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 14 deletions.
diff --git a/bricks/basic/src/popover/index.tsx b/bricks/basic/src/popover/index.tsx
@@ -236,7 +236,7 @@ function PopoverComponent(props: PopoverComponentProps) {
                     scale: 0.9,
                   },
                 ],
-            { duration: 300, easing: "ease" }
+            { duration: 100, easing: "ease" }
           ));
 
         !visible && (popover.active = visible);
@@ -268,9 +268,11 @@ function PopoverComponent(props: PopoverComponentProps) {
     () => !visible && handleVisibleChange(true),
     [visible, handleVisibleChange]
   );
-  const handlePopoverClose = useCallback(() => {
-    handleVisibleChange(false);
-  }, [handleVisibleChange]);
+
+  const handlePopoverClose = useCallback(
+    () => handleVisibleChange(false),
+    [handleVisibleChange]
+  );
 
   const handleNotTrigger = (e: MouseEvent) => {
     e.stopPropagation();

diff --git a/bricks/nav/src/nav-menu/index.tsx b/bricks/nav/src/nav-menu/index.tsx
@@ -1,4 +1,10 @@
-import React, { CSSProperties, useEffect, useRef, useState } from "react";
+import React, {
+  CSSProperties,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { createDecorators } from "@next-core/element";
 import { getHistory } from "@next-core/runtime";
 import { ReactNextElement, wrapBrick } from "@next-core/react-element";
@@ -67,6 +73,7 @@ interface MenuItemComProps {
   topData?: boolean;
   selectedKey?: string[];
   showTooltip?: boolean;
+  overflow?: boolean;
 }
 interface SimpleMenuItemComProps extends MenuItemComProps {
   item: SidebarMenuSimpleItem;
@@ -123,6 +130,7 @@ function SubMenuItemCom({
   topData,
   showTooltip,
   selectedKey = [],
+  overflow,
 }: MenuGroupComProps) {
   return item.items?.length > 0 ? (
     <WrappedPopover
@@ -145,7 +153,11 @@ function SubMenuItemCom({
       >
         {renderSpanCom(item, !topData)}
       </WrappedMenuItem>
-      <div className="sub-menu-wrapper">
+      <div
+        className={classnames("sub-menu-wrapper", {
+          "overflow-menu-wrapper": overflow,
+        })}
+      >
         {item.items.map((innerItem) => (
           <React.Fragment key={innerItem.key}>
             <RenderMenuItemCom
@@ -424,6 +436,18 @@ function NavMenuComponent(props: NavMenuProps) {
     }
   }, []);
 
+  const overflowMenu = useMemo(
+    (): SidebarMenuItem => ({
+      type: "subMenu",
+      title: "···",
+      items: menu?.menuItems.slice(
+        overflowIndex,
+        menu.menuItems.length
+      ) as SidebarMenuItem[],
+    }),
+    [menu?.menuItems, overflowIndex]
+  );
+
   return (
     <div ref={navMenuWrapperRef} className="nav-menu-wrapper">
       {menu?.menuItems.map((item, index) => {
@@ -465,16 +489,10 @@ function NavMenuComponent(props: NavMenuProps) {
       })}
       <RenderMenuItemCom
         hidden={overflowIndex > (menu?.menuItems?.length ?? 0)}
-        item={{
-          type: "subMenu",
-          title: "···",
-          items: menu?.menuItems.slice(
-            overflowIndex,
-            menu.menuItems.length
-          ) as SidebarMenuItem[],
-        }}
+        item={overflowMenu}
         showTooltip={showTooltip}
         selectedKey={selectedKey}
+        overflow={true}
         topData={true}
       />
     </div>

diff --git a/bricks/nav/src/nav-menu/nav-menu.shadow.css b/bricks/nav/src/nav-menu/nav-menu.shadow.css
@@ -59,6 +59,11 @@ eo-link {
   overflow-y: auto;
 }
 
+.overflow-menu-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
 .sub-menu-wrapper > eo-menu-item {
   display: block;
   width: 100%;