feat(web/context): allow manually sorting the options

In order to have the options in the same order as defined, you need to not use keys, instead a normal index table and define the title for the option
overextended · May 8, 2022 · 62d4812 · 62d4812
1 parent 1080efb
commit 62d4812
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 24 deletions.
diff --git a/web/src/features/menu/ContextMenu.tsx b/web/src/features/menu/ContextMenu.tsx
@@ -12,31 +12,27 @@ debugData<ContextMenuProps>([
     action: "showContext",
     data: {
       title: "Vehicle garage",
-      options: {
-        "Dinka Blista": {
-          description: "Super cool vehicle",
-          menu: "some_other_identifier",
-          metadata: {
-            Plate: "KLT 192",
-            Status: "In garage",
-            Health: "30%",
-          },
+      options: [
+        { title: "Empty button" },
+        {
+          title: "Example button",
+          description: "Example button description",
+          metadata: { ["Value 1"]: "Some value", ["Value 2"]: 300 },
         },
-        "Elegy Nitro": {
-          description: "Even cooler vehicle",
-          metadata: ["Plate: JGM 971", "Status: In garage"],
+        {
+          title: "Menu button",
+          menu: "other_example_menu",
+          description: "Takes you to another menu",
+          metadata: ["It also has metadata support"],
         },
-        Burger: {
-          description: "Make a delicious burger",
-          metadata: {
-            Bun: 3,
-            Lettuce: 2,
-            Meat: 1,
-            Tomato: 1,
-            Cheese: 2,
-          },
+        {
+          title: "Event button",
+          description: "Open a menu and send event data",
+          arrow: true,
+          event: "some_event",
+          args: { value1: 300, value2: "Other value" },
         },
-      },
+      ],
     },
   },
 ]);

diff --git a/web/src/features/menu/Item.tsx b/web/src/features/menu/Item.tsx
@@ -68,7 +68,7 @@ const Item: React.FC<{
               <Box>
                 <Box paddingBottom={option[1].description ? 1 : 0}>
                   <Text w="100%" fontWeight="medium">
-                    {option[0]}
+                    {option[1].title ? option[1].title : option[0]}
                   </Text>
                 </Box>
                 {option[1].description && (

diff --git a/web/src/interfaces/context.ts b/web/src/interfaces/context.ts
@@ -1,5 +1,6 @@
 export interface Option {
   menu?: string;
+  title?: string;
   description?: string;
   arrow?: boolean;
   metadata?: string[] | { [key: string]: any };
@@ -15,5 +16,5 @@ export interface Options {
 export interface ContextMenuProps {
   title: string;
   menu?: string;
-  options: Options;
+  options: Options | Option[];
 }