feat: Support submenu in popup menu (#442)

linz · Oct 26, 2023 · d3bbba6 · d3bbba6
1 parent 5a21bac
commit d3bbba6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git a/src/components/gridForm/GridFormPopoverMenu.tsx b/src/components/gridForm/GridFormPopoverMenu.tsx
@@ -3,7 +3,7 @@ import { Fragment, ReactElement, useCallback, useEffect, useRef, useState } from
 
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { GridSubComponentContext } from "../../contexts/GridSubComponentContext";
-import { FocusableItem, MenuDivider, MenuItem } from "../../react-menu3";
+import { FocusableItem, MenuDivider, MenuItem, SubMenu } from "../../react-menu3";
 import { ClickEvent } from "../../react-menu3/types";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { GridBaseRow } from "../Grid";
@@ -29,6 +29,7 @@ export interface SelectedMenuOptionResult<RowType extends GridBaseRow> extends M
 
 export interface MenuOption<RowType extends GridBaseRow> {
   label: ReactElement | string | MenuSeparatorType;
+  subMenu?: () => ReactElement;
   action?: (props: { selectedRows: RowType[]; menuOption: SelectedMenuOptionResult<RowType> }) => Promise<void>;
   disabled?: string | boolean;
   hidden?: boolean;
@@ -135,14 +136,25 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
             ) : (
               !item.hidden && (
                 <Fragment key={`${item.label}`}>
-                  <MenuItem
-                    key={`${item.label}`}
-                    onClick={(e: ClickEvent) => onMenuItemClick(e, item)}
-                    disabled={!!item.disabled}
-                    title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
-                  >
-                    {item.label as ReactElement | string}
-                  </MenuItem>
+                  {item.subMenu ? (
+                    <SubMenu
+                      key={`${item.label}`}
+                      disabled={!!item.disabled}
+                      label={item.label as string}
+                      title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
+                    >
+                      <item.subMenu />
+                    </SubMenu>
+                  ) : (
+                    <MenuItem
+                      key={`${item.label}`}
+                      onClick={(e: ClickEvent) => onMenuItemClick(e, item)}
+                      disabled={!!item.disabled}
+                      title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
+                    >
+                      {item.label as ReactElement | string}
+                    </MenuItem>
+                  )}
                   {item.subComponent && subComponentSelected === item && (
                     <FocusableItem className={"LuiDeprecatedForms"} key={`${item.label}_subcomponent`}>
                       {() => (

diff --git a/src/stories/grid/GridReadOnly.stories.tsx b/src/stories/grid/GridReadOnly.stories.tsx
@@ -23,6 +23,7 @@ import {
   GridProps,
   GridUpdatingContextProvider,
   GridWrapper,
+  MenuItem,
   useGridFilter,
   wait,
 } from "../..";
@@ -171,6 +172,10 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
                     await wait(1500);
                   },
                 },
+                {
+                  label: "Sub menu...",
+                  subMenu: () => <MenuItem>Find...</MenuItem>,
+                },
                 {
                   label: "Disabled item",
                   disabled: "Disabled for test",