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(nui): Add scale fade transition to context menu

Browse Source
This commit is contained in:
Luke
2022-03-26 09:59:26 +01:00
parent 331fb890c9
commit a3874965bc
1 changed files with 100 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
web/src/components/ContextMenu.tsx
View File

@@ -9,6 +9,7 @@ import {
PopoverContent, PopoverContent,
PopoverBody, PopoverBody,
Spacer, Spacer,
ScaleFade,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { debugData } from "../utils/debugData"; import { debugData } from "../utils/debugData";
@@ -81,106 +82,110 @@ const ContextMenu: React.FC = () => {
justifyContent="flex-end" justifyContent="flex-end"
alignItems="center" alignItems="center"
> >
<Box w="xs" h={580}> <ScaleFade in={visible} unmountOnExit>
<Box borderRadius="md" bg="gray.800" mb={3}> <Box w="xs" h={580}>
<Text <Box borderRadius="md" bg="gray.800" mb={3}>
fontFamily="Poppins" <Text
fontSize="md" fontFamily="Poppins"
p={2} fontSize="md"
textAlign="center" p={2}
fontWeight="light" textAlign="center"
> fontWeight="light"
{contextMenu.title}
</Text>
</Box>
<Box maxH={560} overflowY="scroll">
{Object.entries(contextMenu.options).map((option, index) => (
<Popover
placement="right-start"
trigger="hover"
eventListeners={{ scroll: true }}
isLazy
> >
<PopoverTrigger> {contextMenu.title}
<Box </Text>
bg="gray.800" </Box>
borderRadius="md" <Box maxH={560} overflowY="scroll">
h="fit-content" {Object.entries(contextMenu.options).map((option, index) => (
w="100%" <Popover
p={2} placement="right-start"
mb={1} trigger="hover"
fontFamily="Poppins" eventListeners={{ scroll: true }}
fontSize="md" isLazy
transition="300ms" >
_hover={{ bg: "gray.700" }} <PopoverTrigger>
key={`option-${index}`} <Box
> bg="gray.800"
{/* TODO: react-markdown (?) */} borderRadius="md"
<Flex w="100%"> h="fit-content"
<Box> w="100%"
<Box paddingBottom={1}> p={2}
<Text w="100%" fontWeight="medium"> mb={1}
{option[0]} fontFamily="Poppins"
</Text> fontSize="md"
</Box> transition="300ms"
{option[1].description && ( _hover={{ bg: "gray.700" }}
key={`option-${index}`}
>
{/* TODO: react-markdown (?) */}
<Flex w="100%">
<Box>
<Box paddingBottom={1}> <Box paddingBottom={1}>
<Text>{option[1].description}</Text> <Text w="100%" fontWeight="medium">
{option[0]}
</Text>
</Box> </Box>
)} {option[1].description && (
</Box> <Box paddingBottom={1}>
{option[1].subMenu && ( <Text>{option[1].description}</Text>
<> </Box>
<Spacer />
<Box
alignSelf="center"
justifySelf="center"
mr={4}
fontSize="xl"
>
<FontAwesomeIcon icon="chevron-right" />
</Box>
</>
)}
</Flex>
<Portal>
<PopoverContent
fontFamily="Poppins"
bg="gray.800"
outline="none"
border="none"
w="fit-content"
maxW="2xs"
>
<PopoverBody>
{option[1]?.metadata &&
Array.isArray(option[1].metadata) ? (
option[1].metadata.map((metadata: string, index) => (
<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> </Box>
</PopoverContent> {option[1].subMenu && (
</Portal> <>
</Box> <Spacer />
</PopoverTrigger> <Box
</Popover> alignSelf="center"
))} justifySelf="center"
mr={4}
fontSize="xl"
>
<FontAwesomeIcon icon="chevron-right" />
</Box>
</>
)}
</Flex>
<Portal>
<PopoverContent
fontFamily="Poppins"
bg="gray.800"
outline="none"
border="none"
w="fit-content"
maxW="2xs"
>
<PopoverBody>
{option[1]?.metadata &&
Array.isArray(option[1].metadata) ? (
option[1].metadata.map(
(metadata: string, index) => (
<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>
))}
</Box>
</Box> </Box>
</Box> </ScaleFade>
</Flex> </Flex>
); );
}; };