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

feat(web/menu): initial list menu Lua api

Browse Source
This commit is contained in:
Luke
2022-07-31 12:54:40 +02:00
committed by Luke
parent aa9b1334f2
commit d48ca25c7b
3 changed files with 77 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
resource/interface/client/menu.lua Normal file
View File

@@ -0,0 +1,56 @@
local registeredMenus = {}
local openMenu = nil
function lib.registerMenu(data)
if not registeredMenus[data.id] then registeredMenus[data.id] = data end
end
function lib.showMenu(id)
if not registeredMenus[id] then return error('No menu of such id found.') end
local data = registeredMenus[id]
openMenu = id
SetNuiFocus(true, true)
SendNUIMessage({
action = 'setMenu',
data = {
position = data.position,
title = data.title,
items = data.options
}
})
end
function lib.getOpenMenu() return openMenu end
RegisterNUICallback('confirmSelected', function(data, cb)
cb(1)
-- print(data)
end)
RegisterNUICallback('changeSelected', function(data, cb)
cb(1)
if registeredMenus[openMenu].onChange then
local selected = data
if type(selected) == 'number' then
registeredMenus[openMenu].onChange(selected)
else
registeredMenus[openMenu].onChange(selected[1], selected[2])
end
end
end)
RegisterCommand('testMenu', function()
lib.registerMenu({
id = 'epic_menu',
title = 'Nice menu',
position = 'top-right',
onChange = function(selected, scrollIndex)
print(selected, scrollIndex)
end,
options = {
{label = 'Nice option'},
{label = 'Nice header', values = {'Option1', 'option2', 'option3'}}
}
})
lib.showMenu('epic_menu')
end)

6
web/src/features/menu/list/ListItem.tsx
View File

@@ -35,19 +35,19 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index,
style={{ marginRight: 20, marginLeft: 5 }}
/>
)}
{Array.isArray(item.value) ? (
{Array.isArray(item.values) ? (
<Flex justifyContent="center" alignItems="center" width="100%">
<Stack spacing={1}>
<Text color="#909296" textTransform="uppercase" fontSize={12} verticalAlign="middle">
{item.label}
</Text>
<Text>{item.value[scrollIndex]}</Text>
<Text>{item.values[scrollIndex]}</Text>
</Stack>
<Spacer />
<Stack direction="row" spacing="sm" mr={3} justifyContent="center" alignItems="center">
<FontAwesomeIcon icon="chevron-left" fontSize={16} color="#909296" />
<Text color="#909296" textTransform="uppercase" fontSize={14}>
{scrollIndex + 1}/{item.value.length}
{scrollIndex + 1}/{item.values.length}
</Text>
<FontAwesomeIcon icon="chevron-right" fontSize={16} color="#909296" />
</Stack>

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

@@ -10,7 +10,7 @@ import { fetchNui } from "../../../utils/fetchNui";
export interface MenuItem {
label: string;
value: string | string[];
values?: string[];
icon?: IconProp;
}
@@ -27,15 +27,15 @@ debugData<MenuSettings>([
// position: "bottom-left",
title: "Vehicle garage",
items: [
{ label: "Option 1", value: "option1", icon: "heart" },
{ label: "Option 2", value: "option2", icon: "basket-shopping" },
{ label: "Vehicle class", value: ["Nice", "Super nice", "Extra nice"], icon: "tag" },
{ label: "Option 1", value: "option1" },
{ label: "Option 2", value: "option2" },
{ label: "Vehicle class", value: ["Nice", "Super nice", "Extra nice"] },
{ label: "Option 1", value: "option1" },
{ label: "Option 2", value: "option2" },
{ label: "Vehicle class", value: ["Nice", "Super nice", "Extra nice"] },
{ label: "Option 1", icon: "heart" },
{ label: "Option 2", icon: "basket-shopping" },
{ label: "Vehicle class", values: ["Nice", "Super nice", "Extra nice"], icon: "tag" },
{ label: "Option 1" },
{ label: "Option 2" },
{ label: "Vehicle class", values: ["Nice", "Super nice", "Extra nice"] },
{ label: "Option 1" },
{ label: "Option 2" },
{ label: "Vehicle class", values: ["Nice", "Super nice", "Extra nice"] },
],
},
},
@@ -67,28 +67,27 @@ const ListMenu: React.FC = () => {
});
break;
case "ArrowRight":
if (!Array.isArray(menu.items[selected].value)) return;
if (!Array.isArray(menu.items[selected].values)) return;
setIndexStates({
...indexStates,
[selected]:
indexStates[selected] + 1 <= menu.items[selected].value.length - 1
indexStates[selected] + 1 <= menu.items[selected].values?.length! - 1
? indexStates[selected] + 1
: indexStates[selected],
});
break;
case "ArrowLeft":
if (!Array.isArray(menu.items[selected].value)) return;
if (!Array.isArray(menu.items[selected].values)) return;
setIndexStates({
...indexStates,
[selected]: indexStates[selected] - 1 >= 0 ? indexStates[selected] - 1 : indexStates[selected],
});
break;
case "Enter":
if (!menu.items[selected].values) return;
fetchNui(
"confirmSelected",
Array.isArray(menu.items[selected].value)
? menu.items[selected].value[indexStates[selected]]
: menu.items[selected].value
Array.isArray(menu.items[selected].values) ? [selected, indexStates[selected]] : selected
);
setVisible(false);
break;
@@ -96,15 +95,13 @@ const ListMenu: React.FC = () => {
};
useEffect(() => {
if (!menu.items[selected]?.value) return;
if (!menu.items[selected]) return;
listRefs.current[selected]?.focus();
// debounces the callback to avoid spam
const timer = setTimeout(() => {
fetchNui(
"changeSelected",
Array.isArray(menu.items[selected].value)
? menu.items[selected].value[indexStates[selected]]
: menu.items[selected].value
Array.isArray(menu.items[selected].values) ? [selected, indexStates[selected]] : selected
);
}, 500);
return () => clearTimeout(timer);
@@ -116,7 +113,7 @@ const ListMenu: React.FC = () => {
setVisible(true);
let arrayIndexes: { [key: number]: number } = {};
for (let i = 0; i < data.items.length; i++) {
if (Array.isArray(data.items[i].value)) arrayIndexes[i] = 0;
if (Array.isArray(data.items[i].values)) arrayIndexes[i] = 0;
}
setIndexStates(arrayIndexes);
listRefs.current[0]?.focus();