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): visibility handling

Browse Source
This commit is contained in:
Luke
2022-07-31 13:34:40 +02:00
committed by Luke
parent e97bd98726
commit 6ef17e83f5
2 changed files with 55 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -36,13 +36,12 @@ 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
if not registeredMenus[openMenu].onChange then return end
local selected = data
if type(selected) == 'number' then
registeredMenus[openMenu].onChange(selected)
else
registeredMenus[openMenu].onChange(selected[1], selected[2])
end
end)
@@ -50,7 +49,6 @@ RegisterCommand('testMenu', function()
lib.registerMenu({
id = 'epic_menu',
title = 'Nice menu',
position = 'top-right',
onChange = function(selected, scrollIndex)
print(selected, scrollIndex)
end,
@@ -60,6 +58,17 @@ RegisterCommand('testMenu', function()
}
}, function(selected, scrollIndex)
print(selected, scrollIndex)
lib.registerMenu({
id = 'more_epic_menu',
title = 'Nicer menu',
position = 'top-right',
options = {
{label = 'Extra nice option'},
{label = 'Giga nice option'},
{label = 'Omega nice option'},
}
}, function() end)
lib.showMenu('more_epic_menu')
end)
lib.showMenu('epic_menu')
end)

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

@@ -122,45 +122,47 @@ const ListMenu: React.FC = () => {
return (
<>
<Box
position="absolute"
pointerEvents="none"
pt={menu.position === "top-left" || menu.position === "top-right" ? 5 : 0}
pl={menu.position === "top-left" || menu.position === "bottom-left" ? 5 : 0}
pr={menu.position === "top-right" || menu.position === "bottom-right" ? 5 : 0}
pb={menu.position === "bottom-left" || menu.position === "bottom-right" ? 5 : 0}
right={menu.position === "top-right" || menu.position === "bottom-right" ? 1 : undefined}
left={menu.position === "bottom-left" ? 1 : undefined}
bottom={menu.position === "bottom-left" || menu.position === "bottom-right" ? 1 : undefined}
>
<Header title={menu.title} />
{visible && (
<Box
width="sm"
height="fit-content"
maxHeight={415}
overflow="hidden"
borderRadius="md"
bg="#141517"
fontFamily="Nunito"
borderTopLeftRadius="none"
borderTopRightRadius="none"
onKeyDown={(e) => moveMenu(e)}
position="absolute"
pointerEvents="none"
pt={menu.position === "top-left" || menu.position === "top-right" ? 5 : 0}
pl={menu.position === "top-left" || menu.position === "bottom-left" ? 5 : 0}
pr={menu.position === "top-right" || menu.position === "bottom-right" ? 5 : 0}
pb={menu.position === "bottom-left" || menu.position === "bottom-right" ? 5 : 0}
right={menu.position === "top-right" || menu.position === "bottom-right" ? 1 : undefined}
left={menu.position === "bottom-left" ? 1 : undefined}
bottom={menu.position === "bottom-left" || menu.position === "bottom-right" ? 1 : undefined}
>
<FocusTrap active={visible}>
<Stack direction="column" p={2} overflowY="scroll">
{menu.items.map((item, index) => (
<ListItem
index={index}
item={item}
scrollIndex={indexStates[index]}
ref={listRefs}
key={`menu-item-${index}`}
/>
))}
</Stack>
</FocusTrap>
<Header title={menu.title} />
<Box
width="sm"
height="fit-content"
maxHeight={415}
overflow="hidden"
borderRadius="md"
bg="#141517"
fontFamily="Nunito"
borderTopLeftRadius="none"
borderTopRightRadius="none"
onKeyDown={(e) => moveMenu(e)}
>
<FocusTrap active={visible}>
<Stack direction="column" p={2} overflowY="scroll">
{menu.items.map((item, index) => (
<ListItem
index={index}
item={item}
scrollIndex={indexStates[index]}
ref={listRefs}
key={`menu-item-${index}`}
/>
))}
</Stack>
</FocusTrap>
</Box>
</Box>
</Box>
)}
</>
);
};