feat(web/menu): add description support on list items

overextended · Oct 27, 2022 · 1127108 · 1127108
1 parent b354e08
commit 1127108
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 6 deletions.
diff --git a/package/client/resource/interface/menu.ts b/package/client/resource/interface/menu.ts
@@ -6,7 +6,7 @@ type ChangeFunction = (selected: number, scrollIndex: number | null, args: any |
 interface MenuOptions {
   label: string;
   icon?: IconName | [IconPrefix, IconName];
-  values?: string[];
+  values?: Array<string | { label: string; description: string }>;
   description?: string;
   defaultIndex?: number;
   args?: any;

diff --git a/resource/interface/client/menu.lua b/resource/interface/client/menu.lua
@@ -10,7 +10,7 @@ local keepInput = IsNuiFocusKeepingInput()
 ---@class MenuOptions
 ---@field label string
 ---@field icon? string
----@field values? string[]
+---@field values? Array<string | { label: string, description: string }>
 ---@field description? string
 ---@field defaultIndex? number
 ---@field args? any

diff --git a/web/src/features/dev/debug/menu.ts b/web/src/features/dev/debug/menu.ts
@@ -17,7 +17,11 @@ export const debugMenu = () => {
           },
           {
             label: 'Vehicle class',
-            values: ['Nice', 'Super nice', 'Extra nice'],
+            values: [
+              { label: 'nice', description: 'description 1' },
+              { label: 'even nicer', description: 'description 2' },
+              'pogchamp',
+            ],
             icon: 'tag',
             description: 'Tooltip description 2',
           },

diff --git a/web/src/features/menu/list/ListItem.tsx b/web/src/features/menu/list/ListItem.tsx
@@ -38,7 +38,12 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index,
               <Text color="#909296" textTransform="uppercase" fontSize={12} verticalAlign="middle">
                 {item.label}
               </Text>
-              <Text>{item.values[scrollIndex]}</Text>
+              <Text>
+                {typeof item.values[scrollIndex] === 'object'
+                  ? // @ts-ignore for some reason even checking the type TS still thinks it's a string
+                    item.values[scrollIndex].label
+                  : item.values[scrollIndex]}
+              </Text>
             </Stack>
             <Stack direction="row" spacing="sm" pr={3} justifyContent="center" alignItems="center">
               <FontAwesomeIcon icon="chevron-left" fontSize={16} color="#909296" />

diff --git a/web/src/features/menu/list/index.tsx b/web/src/features/menu/list/index.tsx
@@ -11,7 +11,7 @@ import React from 'react';
 
 export interface MenuItem {
   label: string;
-  values?: string[];
+  values?: Array<string | { label: string; description: string }>;
   description?: string;
   icon?: IconProp;
   defaultIndex?: number;
@@ -147,7 +147,12 @@ const ListMenu: React.FC = () => {
     <>
       {visible && (
         <Tooltip
-          label={menu.items[selected].description}
+          label={
+            Array.isArray(menu.items[selected].values) && typeof menu.items[selected].values === 'object'
+              ? // @ts-ignore
+                menu.items[selected].values[indexStates[selected]].description
+              : menu.items[selected].description
+          }
           isOpen={!!menu.items[selected].description}
           bg="#25262B"
           color="#909296"