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

refactor(web/context): cache context option into a variable

Browse Source
This commit is contained in:
Luke
2022-11-05 11:20:59 +01:00
parent bee78ccdfc
commit 33b70b6f1c
1 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
web/src/features/menu/context/Item.tsx
View File

@@ -16,7 +16,7 @@ import { Option, ContextMenuProps } from '../../../interfaces/context';
import { fetchNui } from '../../../utils/fetchNui'; import { fetchNui } from '../../../utils/fetchNui';
const openMenu = (id: string | undefined) => { const openMenu = (id: string | undefined) => {
fetchNui<ContextMenuProps>('openContext', {id: id, back: false}); fetchNui<ContextMenuProps>('openContext', { id: id, back: false });
}; };
const clickContext = (id: string) => { const clickContext = (id: string) => {
@@ -26,6 +26,9 @@ const clickContext = (id: string) => {
const Item: React.FC<{ const Item: React.FC<{
option: [string, Option]; option: [string, Option];
}> = ({ option }) => { }> = ({ option }) => {
const button = option[1];
const buttonKey = option[0];
return ( return (
<> <>
<Popover placement="right-start" trigger="hover" eventListeners={{ scroll: true }} isLazy> <Popover placement="right-start" trigger="hover" eventListeners={{ scroll: true }} isLazy>
@@ -45,33 +48,33 @@ const Item: React.FC<{
<Flex <Flex
w="100%" w="100%"
alignItems="center" alignItems="center"
onClick={() => (option[1].menu ? openMenu(option[1].menu) : clickContext(option[0]))} onClick={() => (button.menu ? openMenu(button.menu) : clickContext(buttonKey))}
> >
{option[1]?.icon && ( {button?.icon && (
<FontAwesomeIcon <FontAwesomeIcon
fixedWidth fixedWidth
icon={option[1].icon} icon={button.icon}
fontSize={20} fontSize={20}
style={{ style={{
marginRight: 10, marginRight: 10,
justifySelf: 'center', justifySelf: 'center',
color: option[1].iconColor, color: button.iconColor,
}} }}
/> />
)} )}
<Box> <Box>
<Box paddingBottom={option[1].description ? 1 : 0}> <Box paddingBottom={button.description ? 1 : 0}>
<Text w="100%" fontWeight="medium"> <Text w="100%" fontWeight="medium">
{option[1].title ? option[1].title : option[0]} {button.title ? button.title : buttonKey}
</Text> </Text>
</Box> </Box>
{option[1].description && ( {button.description && (
<Box paddingBottom={1}> <Box paddingBottom={1}>
<Text>{option[1].description}</Text> <Text>{button.description}</Text>
</Box> </Box>
)} )}
</Box> </Box>
{(option[1].menu || option[1].arrow) && option[1].arrow !== false && ( {(button.menu || button.arrow) && button.arrow !== false && (
<> <>
<Spacer /> <Spacer />
<Box alignSelf="center" justifySelf="center" mr={4} fontSize="xl"> <Box alignSelf="center" justifySelf="center" mr={4} fontSize="xl">
@@ -81,7 +84,7 @@ const Item: React.FC<{
)} )}
</Flex> </Flex>
<Portal> <Portal>
{(option[1].metadata || option[1].image) && ( {(button.metadata || button.image) && (
<PopoverContent <PopoverContent
fontFamily="Poppins" fontFamily="Poppins"
bg="gray.800" bg="gray.800"
@@ -92,17 +95,17 @@ const Item: React.FC<{
> >
<PopoverBody> <PopoverBody>
<> <>
{option[1].image && <Image src={option[1].image} />} {button.image && <Image src={button.image} />}
{Array.isArray(option[1].metadata) ? ( {Array.isArray(button.metadata) ? (
option[1].metadata.map((metadata: string | { label: string; value: any }, index: number) => ( button.metadata.map((metadata: string | { label: string; value: any }, index: number) => (
<Text key={`context-metadata-${index}`}> <Text key={`context-metadata-${index}`}>
{typeof metadata === 'string' ? `${metadata}` : `${metadata.label}: ${metadata.value}`} {typeof metadata === 'string' ? `${metadata}` : `${metadata.label}: ${metadata.value}`}
</Text> </Text>
)) ))
) : ( ) : (
<> <>
{typeof option[1].metadata === 'object' && {typeof button.metadata === 'object' &&
Object.entries(option[1].metadata).map((metadata: { [key: string]: any }, index) => ( Object.entries(button.metadata).map((metadata: { [key: string]: any }, index) => (
<Text key={`context-metadata-${index}`}> <Text key={`context-metadata-${index}`}>
{metadata[0]}: {metadata[1]} {metadata[0]}: {metadata[1]}
</Text> </Text>