diff --git a/package/client/resource/interface/menu.ts b/package/client/resource/interface/menu.ts index 383598a..e0c0c35 100644 --- a/package/client/resource/interface/menu.ts +++ b/package/client/resource/interface/menu.ts @@ -10,7 +10,7 @@ interface MenuOptions { values?: Array; description?: string; defaultIndex?: number; - args?: any; + args?: Record; close?: boolean; } diff --git a/resource/interface/client/menu.lua b/resource/interface/client/menu.lua index 70cbd09..e7f3c85 100644 --- a/resource/interface/client/menu.lua +++ b/resource/interface/client/menu.lua @@ -14,7 +14,7 @@ local keepInput = IsNuiFocusKeepingInput() ---@field values? Array ---@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 - data[2] += 1 -- scrollIndex - end - - openMenu.onCheck(data[1], data[2], openMenu.options[data[1]].args, data[3]) + openMenu.onCheck(data[1], data[2], openMenu.options[data[1]].args) end) RegisterNUICallback('closeMenu', function(data, cb) diff --git a/web/src/features/menu/list/index.tsx b/web/src/features/menu/list/index.tsx index c46b7d7..c0f9724 100644 --- a/web/src/features/menu/list/index.tsx +++ b/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 - : 0 + indexStates[selected] + 1 <= menu.items[selected].values?.length! - 1 ? 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 - : menu.items[selected].values?.length! - 1 + indexStates[selected] - 1 >= 0 ? 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) { - setCheckedStates({ + if (menu.items[selected].checked !== undefined && !menu.items[selected].values) { + 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) => ( {item.label && ( - + )} ))}