refactor(web/menu)!: pass scrollIndex or checked in the same value

If the button is a scroll button then `isScroll` is passed into args, if a button is a checkbox then `isCheck` is passed into args.

Requires `args` to always be of type `table`

package/client/resource/interface/menu.ts

@@ -10,7 +10,7 @@ interface MenuOptions {
   values?: Array<string | { label: string; description: string }>;
   description?: string;
   defaultIndex?: number;
-  args?: any;
+  args?: Record<any, any>;
   close?: boolean;
 }
 

resource/interface/client/menu.lua

@@ -14,7 +14,7 @@ local keepInput = IsNuiFocusKeepingInput()
 ---@field values? Array<string | { label: string, description: string }>
 ---@field description? string
 ---@field defaultIndex? number
----@field args? any
+---@field args? {[any]: any}
 ---@field close? boolean
 
 ---@class MenuProps
@@ -148,7 +148,7 @@ RegisterNUICallback('changeIndex', function(data, cb)
         data[2] += 1 -- scrollIndex
     end
 
-    openMenu.onSideScroll(data[1], data[2], openMenu.options[data[1]].args, data[3])
+    openMenu.onSideScroll(data[1], data[2], openMenu.options[data[1]].args)
 end)
 
 RegisterNUICallback('changeSelected', function(data, cb)
@@ -157,11 +157,23 @@ RegisterNUICallback('changeSelected', function(data, cb)
 
     data[1] += 1 -- selected
 
-    if data[2] then
+
+    local args = openMenu.options[data[1]].args
+
+    if args and type(args) ~= 'table' then
+        return error("Menu args must be passed as a table")
+    end
+
+    if not args then args = {} end
+    print(data[2], data[3])
+    if data[2] then args[data[3]] = true end
+    print(args.isScroll, args.isCheck)
+
+    if data[2] and not args.isCheck then
         data[2] += 1 -- scrollIndex
     end
 
-    openMenu.onSelected(data[1], data[2], openMenu.options[data[1]].args, data[3])
+    openMenu.onSelected(data[1], data[2], args)
 end)
 
 RegisterNUICallback('changeChecked', function(data, cb)
@@ -170,11 +182,7 @@ RegisterNUICallback('changeChecked', function(data, cb)
 
     data[1] += 1 -- selected
 
-    if data[2] then
+    openMenu.onCheck(data[1], data[2], openMenu.options[data[1]].args)
-        data[2] += 1 -- scrollIndex
-    end
-
-    openMenu.onCheck(data[1], data[2], openMenu.options[data[1]].args, data[3])
 end)
 
 RegisterNUICallback('closeMenu', function(data, cb)

web/src/features/menu/list/index.tsx

@@ -61,43 +61,28 @@ const ListMenu: React.FC = () => {
         });
         break;
       case 'ArrowRight':
-        if (Array.isArray(menu.items[selected].values)) {
+        if (Array.isArray(menu.items[selected].values))
           setIndexStates({
             ...indexStates,
             [selected]:
-              indexStates[selected] + 1 <= menu.items[selected].values?.length! - 1
+              indexStates[selected] + 1 <= menu.items[selected].values?.length! - 1 ? indexStates[selected] + 1 : 0,
-                ? indexStates[selected] + 1
-                : 0
           });
-        } else if (menu.items[selected].checked !== undefined) {
-          setCheckedStates({
-            ...checkedStates,
-            [selected]: !checkedStates[selected]
-          });
-        }
         break;
       case 'ArrowLeft':
-        if (Array.isArray(menu.items[selected].values)) {
+        if (Array.isArray(menu.items[selected].values))
           setIndexStates({
             ...indexStates,
             [selected]:
-              indexStates[selected] - 1 >= 0
+              indexStates[selected] - 1 >= 0 ? indexStates[selected] - 1 : menu.items[selected].values?.length! - 1,
-                ? indexStates[selected] - 1
-                : menu.items[selected].values?.length! - 1
           });
-        } else if (menu.items[selected].checked !== undefined) {
+
-          setCheckedStates({
-            ...checkedStates,
-            [selected]: !checkedStates[selected]
-          });
-        }
         break;
       case 'Enter':
         if (!menu.items[selected]) return;
-        if (menu.items[selected].checked !== undefined) {
+        if (menu.items[selected].checked !== undefined && !menu.items[selected].values) {
-          setCheckedStates({
+          return setCheckedStates({
             ...checkedStates,
-            [selected]: !checkedStates[selected]
+            [selected]: !checkedStates[selected],
           });
         }
         fetchNui('confirmSelected', [selected, indexStates[selected]]).catch();
@@ -113,10 +98,10 @@ const ListMenu: React.FC = () => {
     }
     if (menu.items[selected]?.checked === undefined) return;
     const timer = setTimeout(() => {
-      fetchNui('changeChecked', [selected, indexStates[selected], checkedStates[selected]]).catch();
+      fetchNui('changeChecked', [selected, checkedStates[selected]]).catch();
     }, 100);
     return () => clearTimeout(timer);
-  }, [checkedStates])
+  }, [checkedStates]);
 
   useEffect(() => {
     if (firstRenderRef.current) {
@@ -125,7 +110,7 @@ const ListMenu: React.FC = () => {
     }
     if (!menu.items[selected]?.values) return;
     const timer = setTimeout(() => {
-      fetchNui('changeIndex', [selected, indexStates[selected], checkedStates[selected]]).catch();
+      fetchNui('changeIndex', [selected, indexStates[selected]]).catch();
     }, 100);
     return () => clearTimeout(timer);
   }, [indexStates]);
@@ -139,7 +124,15 @@ const ListMenu: React.FC = () => {
     listRefs.current[selected]?.focus({ preventScroll: true });
     // debounces the callback to avoid spam
     const timer = setTimeout(() => {
-      fetchNui('changeSelected', [selected, indexStates[selected], checkedStates[selected]]).catch();
+      fetchNui('changeSelected', [
+        selected,
+        menu.items[selected].values
+          ? indexStates[selected]
+          : menu.items[selected].checked
+          ? checkedStates[selected]
+          : null,
+        menu.items[selected].values ? 'isScroll' : menu.items[selected].checked ? 'isCheck' : null,
+      ]).catch();
     }, 100);
     return () => clearTimeout(timer);
   }, [selected, menu]);
@@ -224,7 +217,13 @@ const ListMenu: React.FC = () => {
                   {menu.items.map((item, index) => (
                     <React.Fragment key={`menu-item-${index}`}>
                       {item.label && (
-                        <ListItem index={index} item={item} scrollIndex={indexStates[index]} checked={checkedStates[index]} ref={listRefs} />
+                        <ListItem
+                          index={index}
+                          item={item}
+                          scrollIndex={indexStates[index]}
+                          checked={checkedStates[index]}
+                          ref={listRefs}
+                        />
                       )}
                     </React.Fragment>
                   ))}