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

feat(web/menu): tooltip description support

Browse Source
This commit is contained in:
Luke
2022-08-01 12:03:00 +02:00
committed by Luke
parent 4236dd2bfd
commit 7b147b04fc
2 changed files with 59 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -60,7 +60,7 @@ RegisterCommand('testMenu', function()
end, end,
options = { options = {
{label = 'Nice option'}, {label = 'Nice option'},
{label = 'Nice header', values = {'Option1', 'option2', 'option3'}} {label = 'Nice header', values = {'Option1', 'option2', 'option3'}, description = 'Tooltip description'}
} }
}, function(selected, scrollIndex) }, function(selected, scrollIndex)
print(selected, scrollIndex) print(selected, scrollIndex)

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

@@ -1,4 +1,4 @@
import { Box, Stack } from "@chakra-ui/react"; import { Box, Stack, Tooltip } from "@chakra-ui/react";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { useNuiEvent } from "../../../hooks/useNuiEvent"; import { useNuiEvent } from "../../../hooks/useNuiEvent";
import { debugData } from "../../../utils/debugData"; import { debugData } from "../../../utils/debugData";
@@ -11,6 +11,7 @@ import { fetchNui } from "../../../utils/fetchNui";
export interface MenuItem { export interface MenuItem {
label: string; label: string;
values?: string[]; values?: string[];
description?: string;
icon?: IconProp; icon?: IconProp;
} }
@@ -28,8 +29,17 @@ debugData<MenuSettings>([
title: "Vehicle garage", title: "Vehicle garage",
items: [ items: [
{ label: "Option 1", icon: "heart" }, { label: "Option 1", icon: "heart" },
{ label: "Option 2", icon: "basket-shopping" }, {
{ label: "Vehicle class", values: ["Nice", "Super nice", "Extra nice"], icon: "tag" }, label: "Option 2",
icon: "basket-shopping",
description: "Tooltip description 1",
},
{
label: "Vehicle class",
values: ["Nice", "Super nice", "Extra nice"],
icon: "tag",
description: "Tooltip description 2",
},
{ label: "Option 1" }, { label: "Option 1" },
{ label: "Option 2" }, { label: "Option 2" },
{ label: "Vehicle class", values: ["Nice", "Super nice", "Extra nice"] }, { label: "Vehicle class", values: ["Nice", "Super nice", "Extra nice"] },
@@ -140,45 +150,55 @@ const ListMenu: React.FC = () => {
return ( return (
<> <>
{visible && ( {visible && (
<Box <Tooltip
position="absolute" label={menu.items[selected].description}
pointerEvents="none" isOpen={menu.items[selected].description ? true : false}
pt={menu.position === "top-left" || menu.position === "top-right" ? 5 : 0} // maxWidth="sm"
pl={menu.position === "top-left" || menu.position === "bottom-left" ? 5 : 0} bg="#25262B"
pr={menu.position === "top-right" || menu.position === "bottom-right" ? 5 : 0} color="#909296"
pb={menu.position === "bottom-left" || menu.position === "bottom-right" ? 5 : 0} placement="bottom"
right={menu.position === "top-right" || menu.position === "bottom-right" ? 1 : undefined} borderRadius="md"
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} mt={menu.position === "top-left" || menu.position === "top-right" ? 5 : 0}
overflow="hidden" ml={menu.position === "top-left" || menu.position === "bottom-left" ? 5 : 0}
borderRadius="md" mr={menu.position === "top-right" || menu.position === "bottom-right" ? 5 : 0}
bg="#141517" mb={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> </Tooltip>
)} )}
</> </>
); );