FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-17 06:56:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(menu): split side and vertical scroll change handlers

Browse Source 
Resolves an issue where changing to the next button while scrolling a horizontal list would not trigger the onChange function for the previous button
This commit is contained in:
Luke
2022-08-04 13:12:58 +02:00
committed by Luke
parent c662368cd4
commit cf2c45687a
2 changed files with 39 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
resource/interface/client/menu.lua
View File

@@ -36,28 +36,27 @@ function lib.getOpenMenu() return openMenu end
RegisterNUICallback('confirmSelected', function(data, cb)
cb(1)
local selected = type(data) == 'number' and data+1 or data[1]
local selected = {data[1] + 1, data[2] and data[2] + 1} -- data = [selected, scrollIndex]
local menu = registeredMenus[openMenu]
if menu.options[selected].close ~= false then SetNuiFocus(false, false) end
local args = menu.options[selected].args
if type(data) == 'number' then
registeredMenus[openMenu].cb(data, nil, args)
else
registeredMenus[openMenu].cb(data[1], data[2], args)
end
if menu.options[selected[1]].close ~= false then SetNuiFocus(false, false) end
local args = menu.options[selected[1]].args
registeredMenus[openMenu].cb(selected[1], selected[2], args)
end)
RegisterNUICallback('changeIndex', function(data, cb)
cb(1)
if not registeredMenus[openMenu].onSideScroll then return end
local selected = {data[1] + 1, data[2] and data[2] + 1} -- data = [selected, scrollIndex]
local args = registeredMenus[openMenu].options[selected[1]].args
registeredMenus[openMenu].onSideScroll(selected[1], selected[2], args)
end)
RegisterNUICallback('changeSelected', function(data, cb)
cb(1)
if not registeredMenus[openMenu].onChange then return end
local selected = data
if type(selected) == 'number' then
local args = registeredMenus[openMenu].options[selected+1].args
registeredMenus[openMenu].onChange(selected, nil, args)
else
local args = registeredMenus[openMenu].options[selected[1]+1].args
registeredMenus[openMenu].onChange(selected[1], selected[2], args)
end
if not registeredMenus[openMenu].onSelected then return end
local selected = {data[1] + 1, data[2] and data[2] + 1} -- data = [selected, scrollIndex]
local args = registeredMenus[openMenu].options[selected[1]].args
registeredMenus[openMenu].onSelected(selected[1], selected[2], args)
end)
RegisterNUICallback('closeMenu', function(data, cb)
@@ -88,10 +87,17 @@ RegisterCommand('testMenu', function()
--lib.setMenuOptions('epic_menu', {label = 'Not nice'}, 1)
--lib.showMenu('epic_menu')
end,
onSelected = function(selected, scrollIndex, args)
print('selected: ', selected, scrollIndex)
end,
onSideScroll = function(selected, scrollIndex, args)
print('sideScroll: ', selected, scrollIndex)
end,
options = {
{label = 'Extra nice option', args = 'Hello there', close = false},
{label = 'Giga nice option'},
{label = 'Omega nice option'},
{label = 'Values', values={'hello', 'there', 'general', 'kenobi'}}
}
}, function(selected, scrollIndex, args)
print(selected, scrollIndex, args)

35
web/src/features/menu/list/index.tsx
View File

@@ -8,6 +8,7 @@ import FocusTrap from "focus-trap-react";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { fetchNui } from "../../../utils/fetchNui";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from "react";
export interface MenuItem {
label: string;
@@ -106,15 +107,20 @@ const ListMenu: React.FC = () => {
break;
case "Enter":
if (!menu.items[selected]) return;
fetchNui(
"confirmSelected",
Array.isArray(menu.items[selected].values) ? [selected, indexStates[selected]] : selected
);
fetchNui("confirmSelected", [selected, indexStates[selected]]).catch();
if (menu.items[selected].close === undefined || menu.items[selected].close) setVisible(false);
break;
}
};
useEffect(() => {
if (!menu.items[selected]?.values) return;
const timer = setTimeout(() => {
fetchNui("changeIndex", [selected, indexStates[selected]]).catch();
}, 100);
return () => clearTimeout(timer);
}, [indexStates]);
useEffect(() => {
if (!menu.items[selected]) return;
listRefs.current[selected]?.scrollIntoView({
@@ -124,13 +130,10 @@ const ListMenu: React.FC = () => {
listRefs.current[selected]?.focus({ preventScroll: true });
// debounces the callback to avoid spam
const timer = setTimeout(() => {
fetchNui(
"changeSelected",
Array.isArray(menu.items[selected].values) ? [selected, indexStates[selected]] : selected
);
}, 500);
fetchNui("changeSelected", [selected, indexStates[selected]]).catch();
}, 100);
return () => clearTimeout(timer);
}, [selected, menu, indexStates]);
}, [selected, menu]);
useEffect(() => {
if (!visible) return;
@@ -197,17 +200,11 @@ const ListMenu: React.FC = () => {
<FocusTrap active={visible}>
<Stack direction="column" p={2} overflowY="scroll">
{menu.items.map((item, index) => (
<>
<React.Fragment key={`menu-item-${index}`}>
{item.label && (
<ListItem
index={index}
item={item}
scrollIndex={indexStates[index]}
ref={listRefs}
key={`menu-item-${index}`}
/>
<ListItem index={index} item={item} scrollIndex={indexStates[index]} ref={listRefs} />
)}
</>
</React.Fragment>
))}
</Stack>
</FocusTrap>