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

refactor(nui): Better organize components

Browse Source
This commit is contained in:
Luke
2022-04-01 21:41:53 +02:00
parent c31fed2c41
commit 993b06e880
10 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
web/src/features/menu/ContextMenu.tsx Normal file
View File

@@ -0,0 +1,132 @@
import { useNuiEvent } from "../../hooks/useNuiEvent";
import { Box, Text, Flex, ScaleFade } from "@chakra-ui/react";
import { debugData } from "../../utils/debugData";
import { useEffect, useState } from "react";
import { ContextMenuProps } from "../../interfaces";
import Item from "./Item";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { fetchNui } from "../../utils/fetchNui";
debugData<ContextMenuProps>([
{
action: "showContext",
data: {
title: "Vehicle garage",
options: {
"Dinka Blista": {
description: "Super cool vehicle",
menu: "some_other_identifier",
metadata: {
Plate: "KLT 192",
Status: "In garage",
Health: "30%",
},
},
"Elegy Nitro": {
description: "Even cooler vehicle",
metadata: ["Plate: JGM 971", "Status: In garage"],
},
Burger: {
description: "Make a delicious burger",
metadata: {
Bun: 3,
Lettuce: 2,
Meat: 1,
Tomato: 1,
Cheese: 2,
},
},
},
},
},
]);
const openMenu = (id: string | undefined) => {
fetchNui<ContextMenuProps>("openContext", id);
};
const ContextMenu: React.FC = () => {
const [visible, setVisible] = useState(false);
const [contextMenu, setContextMenu] = useState<ContextMenuProps>({
title: "",
options: { "": { description: "", metadata: [] } },
});
// Hides the context menu on ESC
useEffect(() => {
if (!visible) return;
const keyHandler = (e: KeyboardEvent) => {
if (["Escape"].includes(e.code)) {
setVisible(false);
fetchNui("closeContext");
}
};
window.addEventListener("keydown", keyHandler);
return () => window.removeEventListener("keydown", keyHandler);
}, [visible]);
useNuiEvent("hideContext", () => setVisible(false));
useNuiEvent<ContextMenuProps>("showContext", async (data) => {
if (visible) {
setVisible(false);
await new Promise((resolve) => setTimeout(resolve, 100));
}
setContextMenu(data);
setVisible(true);
});
return (
<Flex
position="absolute"
w="75%"
h="80%"
justifyContent="flex-end"
alignItems="center"
>
<ScaleFade in={visible} unmountOnExit>
<Box w="xs" h={580}>
<Flex justifyContent="center" alignItems="center" mb={3}>
{contextMenu.menu && (
<Box
borderRadius="md"
bg="gray.800"
h="100%"
flex="1 15%"
textAlign="center"
marginRight={2}
p={2}
_hover={{ bg: "gray.700" }}
transition="300ms"
onClick={() => openMenu(contextMenu.menu)}
>
<FontAwesomeIcon icon="chevron-left" />
</Box>
)}
<Box borderRadius="md" bg="gray.800" flex="1 85%">
<Text
fontFamily="Poppins"
fontSize="md"
p={2}
textAlign="center"
fontWeight="light"
>
{contextMenu.title}
</Text>
</Box>
</Flex>
<Box maxH={560} overflowY="scroll">
{Object.entries(contextMenu.options).map((option, index) => (
<Item option={option} key={`context-item-${index}`} />
))}
</Box>
</Box>
</ScaleFade>
</Flex>
);
};
export default ContextMenu;

134
web/src/features/menu/Item.tsx Normal file
View File

@@ -0,0 +1,134 @@
import {
Portal,
Popover,
PopoverTrigger,
PopoverBody,
PopoverContent,
Box,
Text,
Flex,
Spacer,
} from "@chakra-ui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Option, ContextMenuProps } from "../../interfaces";
import { fetchNui } from "../../utils/fetchNui";
interface DataProps {
event?: string;
serverEvent?: string;
args?: any;
}
const openMenu = (id: string | undefined) => {
fetchNui<ContextMenuProps>("openContext", id);
};
const clickContext = (data: DataProps) => {
fetchNui("clickContext", data);
};
const Item: React.FC<{
option: [string, Option];
}> = ({ option }) => {
return (
<>
<Popover
placement="right-start"
trigger="hover"
eventListeners={{ scroll: true }}
isLazy
>
<PopoverTrigger>
<Box
bg="gray.800"
borderRadius="md"
h="fit-content"
w="100%"
p={2}
mb={1}
fontFamily="Poppins"
fontSize="md"
transition="300ms"
_hover={{ bg: "gray.700" }}
>
<Flex
w="100%"
onClick={() =>
option[1].menu
? openMenu(option[1].menu)
: clickContext({
event: option[1].event,
serverEvent: option[1].serverEvent,
args: option[1].args,
})
}
>
<Box>
<Box paddingBottom={1}>
<Text w="100%" fontWeight="medium">
{option[0]}
</Text>
</Box>
{option[1].description && (
<Box paddingBottom={1}>
<Text>{option[1].description}</Text>
</Box>
)}
</Box>
{option[1].menu && (
<>
<Spacer />
<Box
alignSelf="center"
justifySelf="center"
mr={4}
fontSize="xl"
>
<FontAwesomeIcon icon="chevron-right" />
</Box>
</>
)}
</Flex>
<Portal>
{option[1].metadata && (
<PopoverContent
fontFamily="Poppins"
bg="gray.800"
outline="none"
border="none"
w="fit-content"
maxW="2xs"
>
<PopoverBody>
{Array.isArray(option[1].metadata) ? (
option[1].metadata.map(
(metadata: string, index: number) => (
<Text key={`context-metadata-${index}`}>
{metadata}
</Text>
)
)
) : (
<>
{typeof option[1].metadata === "object" &&
Object.entries(option[1].metadata).map(
(metadata: { [key: string]: any }, index) => (
<Text key={`context-metadata-${index}`}>
{metadata[0]}: {metadata[1]}
</Text>
)
)}
</>
)}
</PopoverBody>
</PopoverContent>
)}
</Portal>
</Box>
</PopoverTrigger>
</Popover>
</>
);
};
export default Item;