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

fix(nui): Don't display metadata popover if there is no metadata

Browse Source
This commit is contained in:
Luke
2022-03-27 19:10:44 +02:00
parent ac832d4840
commit edce4b4a82
2 changed files with 80 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/TextUI.tsx
View File

@@ -59,9 +59,7 @@ const TextUI: React.FC = () => {
borderRadius="md" borderRadius="md"
maxW="xs" maxW="xs"
> >
<Text> <ReactMarkdown>{data.text}</ReactMarkdown>
<ReactMarkdown>{data.text}</ReactMarkdown>
</Text>
</Box> </Box>
</ScaleFade> </ScaleFade>
</Flex> </Flex>

150
web/src/components/features/menu/Item.tsx
View File

@@ -16,84 +16,92 @@ const Item: React.FC<{
option: [string, Option]; option: [string, Option];
}> = ({ option }) => { }> = ({ option }) => {
return ( return (
<Popover <>
placement="right-start" <Popover
trigger="hover" placement="right-start"
eventListeners={{ scroll: true }} trigger="hover"
isLazy eventListeners={{ scroll: true }}
> isLazy
<PopoverTrigger> >
<Box <PopoverTrigger>
bg="gray.800" <Box
borderRadius="md" bg="gray.800"
h="fit-content" borderRadius="md"
w="100%" h="fit-content"
p={2} w="100%"
mb={1} p={2}
fontFamily="Poppins" mb={1}
fontSize="md" fontFamily="Poppins"
transition="300ms" fontSize="md"
_hover={{ bg: "gray.700" }} transition="300ms"
> _hover={{ bg: "gray.700" }}
<Flex w="100%"> >
<Box> <Flex w="100%">
<Box paddingBottom={1}> <Box>
<Text w="100%" fontWeight="medium">
{option[0]}
</Text>
</Box>
{option[1].description && (
<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 paddingBottom={1}>
<Text>{option[1].description}</Text>
</Box>
)}
</Box>
{option[1].subMenu && (
<>
<Spacer />
<Box
alignSelf="center"
justifySelf="center"
mr={4}
fontSize="xl"
>
<FontAwesomeIcon icon="chevron-right" />
</Box>
</>
)} )}
</Box> </Flex>
{option[1].subMenu && ( <Portal>
<> {option[1].metadata && (
<Spacer /> <PopoverContent
<Box fontFamily="Poppins"
alignSelf="center" bg="gray.800"
justifySelf="center" outline="none"
mr={4} border="none"
fontSize="xl" w="fit-content"
maxW="2xs"
> >
<FontAwesomeIcon icon="chevron-right" /> <PopoverBody>
</Box> {Array.isArray(option[1].metadata) ? (
</> option[1].metadata.map(
)} (metadata: string, index: number) => (
</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: 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}`}> <Text key={`context-metadata-${index}`}>
{metadata[0]}: {metadata[1]} {metadata}
</Text> </Text>
) )
)} )
</> ) : (
)} <>
</PopoverBody> {typeof option[1].metadata === "object" &&
</PopoverContent> Object.entries(option[1].metadata).map(
</Portal> (metadata: { [key: string]: any }, index) => (
</Box> <Text key={`context-metadata-${index}`}>
</PopoverTrigger> {metadata[0]}: {metadata[1]}
</Popover> </Text>
)
)}
</>
)}
</PopoverBody>
</PopoverContent>
)}
</Portal>
</Box>
</PopoverTrigger>
</Popover>
</>
); );
}; };