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) RegisterNUICallback('changeSelected', function(data, cb)
cb(1) cb(1)
if registeredMenus[openMenu].onChange then if not registeredMenus[openMenu].onChange then return end
local selected = data local selected = data
if type(selected) == 'number' then if type(selected) == 'number' then
registeredMenus[openMenu].onChange(selected) registeredMenus[openMenu].onChange(selected)
else else
registeredMenus[openMenu].onChange(selected[1], selected[2]) registeredMenus[openMenu].onChange(selected[1], selected[2])
end
end end
end) end)
@@ -50,7 +49,6 @@ RegisterCommand('testMenu', function()
lib.registerMenu({ lib.registerMenu({
id = 'epic_menu', id = 'epic_menu',
title = 'Nice menu', title = 'Nice menu',
position = 'top-right',
onChange = function(selected, scrollIndex) onChange = function(selected, scrollIndex)
print(selected, scrollIndex) print(selected, scrollIndex)
end, end,
@@ -60,6 +58,17 @@ RegisterCommand('testMenu', function()
} }
}, function(selected, scrollIndex) }, function(selected, scrollIndex)
print(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) end)
lib.showMenu('epic_menu') lib.showMenu('epic_menu')
end) end)

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

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