fix(DropdownMenu): fix hiding group subitems (#1444)

gravity-ui · Mar 22, 2024 · 4cf7d39 · 4cf7d39
1 parent 1fbbd37
commit 4cf7d39
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 19 deletions.
diff --git a/src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx b/src/components/DropdownMenu/__stories__/DropdownMenu.stories.tsx
@@ -10,7 +10,13 @@ import {cn} from '../../utils/cn';
 import {DropdownMenu} from '../DropdownMenu';
 import type {DropdownMenuItem} from '../DropdownMenu';
 
-import {options, optionsAssorted, optionsWithGroups, optionsWithSubItems} from './options';
+import {
+    options,
+    optionsAssorted,
+    optionsWithGroups,
+    optionsWithNestedItems,
+    optionsWithNestedItemsAndGroups,
+} from './options';
 
 import './DropdownMenu.stories.scss';
 
@@ -44,12 +50,21 @@ WithGroups.args = {
 };
 WithGroups.storyName = 'Options with groups';
 
-const WithSubmenuTemplate: StoryFn = (args) => <DropdownMenu {...args} />;
-export const WithSubmenu = WithSubmenuTemplate.bind({});
-WithSubmenu.args = {
-    items: optionsWithSubItems,
+// ----------------------------------------
+const WithNestedItemsTemplate: StoryFn = (args) => <DropdownMenu {...args} />;
+export const WithNestedItems = WithNestedItemsTemplate.bind({});
+WithNestedItems.args = {
+    items: optionsWithNestedItems,
+};
+WithNestedItems.storyName = 'With nested items';
+
+// ----------------------------------------
+const WithNestedItemsAndGroupsTemplate: StoryFn = (args) => <DropdownMenu {...args} />;
+export const WithNestedItemsAndGroups = WithNestedItemsAndGroupsTemplate.bind({});
+WithNestedItemsAndGroups.args = {
+    items: optionsWithNestedItemsAndGroups,
 };
-WithSubmenu.storyName = 'Submenu';
+WithNestedItemsAndGroups.storyName = 'With nested items and groups';
 
 // ----------------------------------------
 const AssortedTemplate: StoryFn = (args) => <DropdownMenu {...args} />;

diff --git a/src/components/DropdownMenu/__stories__/options.tsx b/src/components/DropdownMenu/__stories__/options.tsx
@@ -81,7 +81,7 @@ export const optionsWithGroups: DropdownMenuItemMixed<unknown>[] = [
     ],
 ];
 
-export const optionsWithSubItems: DropdownMenuItem<unknown>[] = [
+export const optionsWithNestedItems: DropdownMenuItem<unknown>[] = [
     {
         action: () => console.log('==> action "Edit" called'),
         text: 'Edit',
@@ -129,6 +129,58 @@ export const optionsWithSubItems: DropdownMenuItem<unknown>[] = [
     },
 ];
 
+export const optionsWithNestedItemsAndGroups: DropdownMenuItem<unknown>[][] = [
+    [
+        {
+            action: () => console.log('==> action "Edit" called'),
+            text: 'Edit',
+        },
+    ],
+    [
+        {
+            action: () => console.log('==> action "Delete" called'),
+            text: 'Delete',
+            theme: 'danger',
+        },
+        {
+            text: 'Other',
+            items: [
+                {
+                    action: () => console.log('==> action "Select" called'),
+                    text: 'Select',
+                    items: [
+                        {
+                            action: () => console.log('==> action "Select one" called'),
+                            text: 'One',
+                        },
+                        {
+                            action: () => console.log('==> action "Select all" called'),
+                            text: 'All',
+                        },
+                    ],
+                },
+                {
+                    action: () => console.log('==> action "Copy" called'),
+                    text: 'Copy',
+                },
+                {
+                    text: 'Move to',
+                    items: [
+                        {
+                            action: () => console.log('==> action "Move to Folder 1" called'),
+                            text: 'Folder 1',
+                        },
+                        {
+                            action: () => console.log('==> action "Move to Folder 2" called'),
+                            text: 'Folder 2',
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+];
+
 export const optionsAssorted: DropdownMenuItem<unknown>[] = [
     {
         action: () => console.log('==> normal item action called'),

diff --git a/src/components/DropdownMenu/utils/toItemList.ts b/src/components/DropdownMenu/utils/toItemList.ts
@@ -1,42 +1,44 @@
 export function toItemList<
     Item extends {hidden?: boolean; items?: (Item | Item[])[]},
     ListItem extends {items?: ListItem[]; path: number[]},
->(items: (Item | Item[])[], separator: ListItem, path: number[] = []): ListItem[] {
+>(items: (Item | Item[])[], separator: ListItem, path: number[] = [], startIndex = 0): ListItem[] {
     const updatedItems: ListItem[] = [];
     let addedGroup = false;
-    let index = -1;
+    let index = startIndex;
 
     for (const item of items) {
         if (Array.isArray(item)) {
-            const groupItemsList = toItemList(item, separator, [...path, index]);
-            if (groupItemsList.length === 0) {
-                continue;
-            }
+            const groupItems = toItemList(item, separator, path, index);
+
             if (updatedItems.length !== 0) {
                 updatedItems.push(separator);
             }
-            for (const groupItem of groupItemsList) {
-                groupItem.path[path.length] = ++index;
-            }
-            updatedItems.push(...groupItemsList);
+
+            updatedItems.push(...groupItems);
+            index += groupItems.length;
             addedGroup = true;
         } else {
             if (item.hidden) {
                 continue;
             }
+
             if (addedGroup) {
                 updatedItems.push(separator);
             }
 
-            const updatedItem = {...item} as unknown as ListItem;
-            updatedItem.path = [...path, ++index];
+            const updatedItem = {
+                ...item,
+                path: [...path, index++],
+            } as unknown as ListItem;
+
             if (item.items) {
                 updatedItem.items = toItemList<Item, ListItem>(
                     item.items,
                     separator,
                     updatedItem.path,
                 );
             }
+
             updatedItems.push(updatedItem);
             addedGroup = false;
         }