Merge pull request #1560 from easyops-cn/steve/actions-opened-keys

feat(actions): support activeKeys

Author: weareoutman

bricks/basic/src/actions/index.spec.tsx

@@ -196,4 +196,100 @@ describe("eo-actions", () => {
       document.body.removeChild(element);
     });
   });
+
+  test("activeKeys", async () => {
+    const element = document.createElement("eo-actions") as EoActions;
+    element.actions = [
+      {
+        text: "a",
+        key: "a",
+        items: [
+          {
+            text: "a-1",
+            key: "a-1",
+          },
+          {
+            text: "a-2",
+            key: "a-2",
+          },
+        ],
+      },
+      {
+        text: "b",
+        key: "b",
+        items: [
+          {
+            text: "b-1",
+            key: "b-1",
+          },
+          {
+            text: "b-2",
+            key: "b-2",
+          },
+        ],
+      },
+    ];
+
+    act(() => {
+      document.body.appendChild(element);
+    });
+
+    const popovers = element.shadowRoot?.querySelectorAll(".popover");
+    const firstSubMenuItem = popovers?.[0]?.querySelector(
+      "eo-menu-item"
+    ) as HTMLElement;
+    const firstSubMenuItemChild =
+      firstSubMenuItem?.nextElementSibling?.querySelector(
+        "eo-menu-item"
+      ) as HTMLElement;
+    const secondSubMenuItem = popovers?.[1]?.querySelector(
+      "eo-menu-item"
+    ) as HTMLElement;
+
+    expect(firstSubMenuItem.classList.contains("menu-item-active")).toBe(false);
+    expect(firstSubMenuItemChild.classList.contains("menu-item-active")).toBe(
+      false
+    );
+    expect(secondSubMenuItem.classList.contains("menu-item-active")).toBe(
+      false
+    );
+
+    element.activeKeys = ["a"];
+    await act(async () => {
+      await (global as any).flushPromises();
+    });
+    expect(firstSubMenuItem.classList.contains("menu-item-active")).toBe(true);
+    expect(firstSubMenuItemChild.classList.contains("menu-item-active")).toBe(
+      false
+    );
+    expect(secondSubMenuItem.classList.contains("menu-item-active")).toBe(
+      false
+    );
+
+    element.activeKeys = ["a", "a-1"];
+    await act(async () => {
+      await (global as any).flushPromises();
+    });
+    expect(firstSubMenuItem.classList.contains("menu-item-active")).toBe(true);
+    expect(firstSubMenuItemChild.classList.contains("menu-item-active")).toBe(
+      true
+    );
+    expect(secondSubMenuItem.classList.contains("menu-item-active")).toBe(
+      false
+    );
+
+    element.activeKeys = ["b"];
+    await act(async () => {
+      await (global as any).flushPromises();
+    });
+    expect(firstSubMenuItem.classList.contains("menu-item-active")).toBe(false);
+    expect(firstSubMenuItemChild.classList.contains("menu-item-active")).toBe(
+      false
+    );
+    expect(secondSubMenuItem.classList.contains("menu-item-active")).toBe(true);
+
+    act(() => {
+      document.body.removeChild(element);
+    });
+  });
 });

bricks/basic/src/actions/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { EventEmitter, createDecorators } from "@next-core/element";
 import { ReactNextElement, wrapBrick } from "@next-core/react-element";
 import "@next-core/theme";
@@ -39,15 +39,43 @@ interface SubMenuItemComProps {
   index: number;
   action: SubMenuAction;
   checkedKeys: (string | number)[] | undefined;
+  activeKeys: (string | number)[] | undefined;
   onSubMenuClick: (action: SimpleAction) => void;
 }
 
 function SubMenuItemCom({
   index,
   action,
   checkedKeys,
+  activeKeys,
   onSubMenuClick,
 }: SubMenuItemComProps) {
+  const popoverRef = useRef<Popover>(null);
+  const [checked, opened] = useMemo(() => {
+    let keyIndex = -1;
+    if (activeKeys && action.key) {
+      for (let i = 0; i < activeKeys.length; i++) {
+        if (activeKeys[i] === action.key) {
+          keyIndex = i;
+          break;
+        }
+      }
+    }
+    if (keyIndex === -1) {
+      return [false, false];
+    }
+    if (keyIndex === activeKeys!.length - 1) {
+      return [true, false];
+    }
+    return [true, true];
+  }, [action.key, activeKeys]);
+
+  useEffect(() => {
+    if (popoverRef.current) {
+      popoverRef.current.active = opened;
+    }
+  }, [opened]);
+
   return (
     <WrappedPopover
       data-index={index}
@@ -58,27 +86,46 @@ function SubMenuItemCom({
       distance={4}
       anchorDisplay="block"
       strategy="fixed"
+      ref={popoverRef}
     >
       <WrappedMenuItem
         slot="anchor"
         className={classnames("sub-menu-item-label", {
           "menu-item-danger": action.danger,
+          "menu-item-active": checked,
         })}
         icon={action.icon}
         disabled={action.disabled}
       >
         {action.text}
       </WrappedMenuItem>
       <div className="sub-menu-wrapper">
-        {action?.items.map((innerItem: SimpleAction, innerIndex: number) => {
-          const menuItem = (
+        {action?.items.map((innerItem, innerIndex: number, list) => {
+          if (isDivider(innerItem)) {
+            if (innerIndex === 0 || innerIndex === list.length - 1) {
+              return null;
+            }
+            return <div key={innerIndex} className="menu-item-divider" />;
+          }
+          const menuItem = (innerItem as SubMenuAction)?.items?.length ? (
+            <SubMenuItemCom
+              index={innerIndex}
+              action={innerItem as SubMenuAction}
+              checkedKeys={checkedKeys}
+              activeKeys={activeKeys}
+              onSubMenuClick={onSubMenuClick}
+            />
+          ) : (
             <React.Fragment>
               <WrappedMenuItem
                 className={classnames({
                   "menu-item-danger": innerItem.danger,
                   "menu-item-selected":
                     !isNil(innerItem.key) &&
                     checkedKeys?.includes(innerItem.key),
+                  "menu-item-active":
+                    !isNil(innerItem.key) &&
+                    activeKeys?.includes(innerItem.key),
                 })}
                 icon={innerItem.icon}
                 disabled={innerItem.disabled}
@@ -141,7 +188,7 @@ export interface SimpleAction {
 }
 
 export interface SubMenuAction extends SimpleAction {
-  items: SimpleAction[];
+  items: Action[];
   placement?: Placement;
 }
 
@@ -155,6 +202,7 @@ export interface ActionsProps {
   actions?: Action[];
   itemDraggable?: boolean;
   checkedKeys?: (string | number)[];
+  activeKeys?: (string | number)[];
   themeVariant?: "default" | "elevo";
 }
 
@@ -189,13 +237,21 @@ class EoActions extends ReactNextElement implements ActionsProps {
   accessor actions: Action[] | undefined;
 
   /**
-   * actions选中项配置
+   * actions 选中项配置
    */
   @property({
     attribute: false,
   })
   accessor checkedKeys: (string | number)[] = [];
 
+  /**
+   * actions 激活项配置，用于菜单项的选择和展开，因按菜单层级顺序依次列出当前激活的菜单项
+   */
+  @property({
+    attribute: false,
+  })
+  accessor activeKeys: (string | number)[] = [];
+
   /**
    * action中的菜单项是否可拖拽
    */
@@ -253,6 +309,7 @@ class EoActions extends ReactNextElement implements ActionsProps {
         onItemDragStart={this.#handleItemDragStart}
         onItemDragEnd={this.#handleItemDragEnd}
         checkedKeys={this.checkedKeys}
+        activeKeys={this.activeKeys}
       />
     );
   }
@@ -268,6 +325,7 @@ export interface ActionsComponentProps extends ActionsProps {
 export function EoActionsComponent({
   actions,
   checkedKeys,
+  activeKeys,
   onActionClick,
   itemDraggable,
   onItemDragStart,
@@ -293,16 +351,19 @@ export function EoActionsComponent({
                   index={index}
                   action={action as SubMenuAction}
                   checkedKeys={checkedKeys}
+                  activeKeys={activeKeys}
                   onSubMenuClick={(action: SimpleAction) => {
                     onActionClick?.(action);
                   }}
-                ></SubMenuItemCom>
+                />
               ) : (
                 <WrappedMenuItem
                   className={classnames({
                     "menu-item-danger": action.danger,
                     "menu-item-selected":
                       !isNil(action.key) && checkedKeys?.includes(action.key),
+                    "menu-item-active":
+                      !isNil(action.key) && activeKeys?.includes(action.key),
                   })}
                   draggable={itemDraggable}
                   icon={action.icon}

bricks/basic/src/actions/styles.shadow.css

@@ -59,6 +59,8 @@ eo-link {
 .menu-item-danger:not([disabled])::part(menu-item) {
   color: var(--theme-red-color);
 }
+
+.menu-item-active::part(menu-item),
 .menu-item-selected::part(menu-item) {
   font-weight: 600;
   background-color: var(--app-bar-dropdown-menu-item-hover-bg);