feat(ConfigMenu): Added actions entry value

HHogg · Dec 11, 2023 · f31ace8 · f31ace8
1 parent 1ea0819
commit f31ace8
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 24 deletions.
diff --git a/workspaces/package/src/ConfigMenu/ConfigMenu.tsx b/workspaces/package/src/ConfigMenu/ConfigMenu.tsx
@@ -25,7 +25,8 @@ export type MenuConfigEntryValue =
   | MenuConfigNumber
   | MenuConfigOneOf
   | MenuConfigManyOf
-  | MenuConfigAction;
+  | MenuConfigAction
+  | MenuConfigActions;
 
 export type MenuConfigBoolean = {
   type: 'boolean';
@@ -66,6 +67,14 @@ export type MenuConfigAction = {
   onAction: () => void;
 };
 
+export type MenuConfigActions = {
+  type: 'actions';
+  actions: {
+    label: string;
+    onAction: () => void;
+  }[];
+};
+
 const isBoolean = (value: MenuConfigEntryValue): value is MenuConfigBoolean =>
   value.type === 'boolean';
 
@@ -82,6 +91,9 @@ const isManyOf = (
 const isAction = (value: MenuConfigEntryValue): value is MenuConfigAction =>
   value.type === 'action';
 
+const isActions = (value: MenuConfigEntryValue): value is MenuConfigActions =>
+  value.type === 'actions';
+
 const getLabel = (entry: MenuConfigEntry) => {
   switch (entry.config.type) {
     case 'boolean':
@@ -101,7 +113,8 @@ const getLabel = (entry: MenuConfigEntry) => {
         return 'All';
       }
     case 'action':
-      return entry.label;
+    case 'actions':
+      return '';
   }
 };
 
@@ -123,25 +136,20 @@ export const ConfigMenu = ({
   const activeIndex = config.findIndex((entry) => entry.label === activeKey);
   const activeEntry = activeKey === __root ? undefined : config[activeIndex];
 
-  const createUpdateHandler =
-    (
-      entry: MenuConfigEntry,
-      value: Exclude<MenuConfigEntryValue, MenuConfigAction>['value']
-    ) =>
-    () => {
-      if (!isAction(entry.config)) {
-        // Todo: Why as needed here?
-        (
-          entry.config.onChange as (
-            v: Exclude<MenuConfigEntryValue, MenuConfigAction>['value']
-          ) => void
-        )(value);
-      }
+  const createUpdateHandler = (entry: MenuConfigEntry, value: any) => () => {
+    if (
+      isBoolean(entry.config) ||
+      isNumber(entry.config) ||
+      isOneOf(entry.config) ||
+      isManyOf(entry.config)
+    ) {
+      (entry.config.onChange as any)(value);
+    }
 
-      if (!isManyOf(entry.config)) {
-        setActiveKey(__root);
-      }
-    };
+    if (!isManyOf(entry.config)) {
+      setActiveKey(__root);
+    }
+  };
 
   return (
     <TransitionBox
@@ -252,6 +260,18 @@ export const ConfigMenu = ({
                   </MenuItemCheckBox>
                 )
             )}
+
+          {isActions(activeEntry.config) &&
+            activeEntry.config.actions.map((action) => (
+              <MenuItemAction
+                key={action.label}
+                onClick={() => {
+                  action.onAction();
+                  setActiveKey(__root);
+                }}
+                title={action.label}
+              />
+            ))}
         </Menu>
       )}
     </TransitionBox>

diff --git a/workspaces/package/src/ConfigMenu/MenuItemAction.tsx b/workspaces/package/src/ConfigMenu/MenuItemAction.tsx
@@ -4,7 +4,7 @@ import { Text } from '../Text/Text';
 import MenuItem, { MenuItemProps } from './MenuItem';
 
 type MenuItemNavigateProps = MenuItemProps & {
-  Icon: LucideIcon;
+  Icon?: LucideIcon;
   title: string;
 };
 
@@ -15,9 +15,11 @@ export default function MenuItemAction({
 }: MenuItemNavigateProps) {
   return (
     <MenuItem {...rest}>
-      <Box>
-        <Icon size="1rem" />
-      </Box>
+      {Icon && (
+        <Box>
+          <Icon size="1rem" />
+        </Box>
+      )}
 
       <Box grow minWidth="120px">
         <Text weight="x2">{title}</Text>

diff --git a/workspaces/site/src/docs/catalog/ConfigMenu.tsx b/workspaces/site/src/docs/catalog/ConfigMenu.tsx
@@ -93,6 +93,23 @@ const Item: CatalogueItem<{
             onAction: () => {},
           },
         },
+        {
+          label: 'Save As',
+          icon: SaveIcon,
+          config: {
+            type: 'actions',
+            actions: [
+              {
+                label: 'PNG',
+                onAction: () => {},
+              },
+              {
+                label: 'SVG',
+                onAction: () => {},
+              },
+            ],
+          },
+        },
       ];
 
       return (