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