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): 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,
options = {
{label = 'Nice option'},
{label = 'Nice header', values = {'Option1', 'option2', 'option3'}}
{label = 'Nice header', values = {'Option1', 'option2', 'option3'}, description = 'Tooltip description'}
}
}, function(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 { useNuiEvent } from "../../../hooks/useNuiEvent";
import { debugData } from "../../../utils/debugData";
@@ -11,6 +11,7 @@ import { fetchNui } from "../../../utils/fetchNui";
export interface MenuItem {
label: string;
values?: string[];
description?: string;
icon?: IconProp;
}
@@ -28,8 +29,17 @@ debugData<MenuSettings>([
title: "Vehicle garage",
items: [
{ 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 2" },
{ label: "Vehicle class", values: ["Nice", "Super nice", "Extra nice"] },
@@ -140,45 +150,55 @@ const ListMenu: React.FC = () => {
return (
<>
{visible && (
<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}
<Tooltip
label={menu.items[selected].description}
isOpen={menu.items[selected].description ? true : false}
// maxWidth="sm"
bg="#25262B"
color="#909296"
placement="bottom"
borderRadius="md"
>
<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)}
position="absolute"
pointerEvents="none"
mt={menu.position === "top-left" || menu.position === "top-right" ? 5 : 0}
ml={menu.position === "top-left" || menu.position === "bottom-left" ? 5 : 0}
mr={menu.position === "top-right" || menu.position === "bottom-right" ? 5 : 0}
mb={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>
</Tooltip>
)}
</>
);