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

refactor(web/menu): planet menu data passing

Browse Source
This commit is contained in:
Luke
2023-01-20 12:08:46 +01:00
parent fcf33dbdfe
commit 6485ede5f8
1 changed files with 119 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
web/src/features/menu/planet/index.tsx
View File

@@ -1,6 +1,10 @@
import { ActionIcon, Box, Tooltip } from '@mantine/core'; import { ActionIcon, Box, Stack, Text, Transition } from '@mantine/core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { useState } from 'react';
import { useNuiEvent } from '../../../hooks/useNuiEvent';
import { debugData } from '../../../utils/debugData';
import { fetchNui } from '../../../utils/fetchNui';
const radius = 60; const radius = 60;
@@ -14,67 +18,131 @@ function getTransform(index: number, totalItems: number) {
return `translate(${x}px, ${y}px)`; return `translate(${x}px, ${y}px)`;
} }
const items: { icon: IconProp; label: string }[] = [ interface MenuItem {
{ icon: 'handcuffs', label: 'Arrest' }, icon: IconProp;
{ icon: 'warehouse', label: 'Garage' }, label: string;
{ icon: 'heart', label: 'Info' }, }
{ icon: 'handcuffs', label: 'Arrest' },
{ icon: 'warehouse', label: 'Garage' }, debugData<{ items: MenuItem[]; sub?: boolean }>([
{ icon: 'heart', label: 'Info' }, {
]; action: 'openPlanetMenu',
data: {
items: [
{ icon: 'palette', label: 'Paint' },
{ icon: 'warehouse', label: 'Garage' },
{ icon: 'handcuffs', label: 'Arrest' },
],
sub: false,
},
},
]);
const PlanetMenu: React.FC = () => { const PlanetMenu: React.FC = () => {
const [visible, setVisible] = useState(false);
const [menu, setMenu] = useState<{ items: MenuItem[]; sub?: boolean }>({
items: [],
sub: false,
});
const [currentItem, setCurrentItem] = useState({ label: '', visible: false });
useNuiEvent('openPlanetMenu', (data: { items: MenuItem[]; sub?: boolean }) => {
setMenu(data);
setVisible(true);
});
const handleItemClick = (index: number) => {
// fetchNui('planetClick', index)
// setVisible(false);
};
return ( return (
<Box <>
style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
}}
>
<ActionIcon variant="filled" radius="xl" size="xl" color="primary" sx={{ zIndex: 99 }} w={50} h={50}>
<FontAwesomeIcon fixedWidth icon="xmark" size="lg" />
</ActionIcon>
<Box <Box
sx={{ style={{
position: 'absolute', position: 'absolute',
top: '50%', top: '50%',
left: '50%', left: '50%',
transform: 'translate(-50%, -50%)', transform: 'translate(-50%, -50%)',
width: 120,
height: 120,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}} }}
> >
{items.map((item, index) => ( <>
<Box {visible && (
sx={(theme) => ({ <>
transform: getTransform(index, items.length), <ActionIcon variant="filled" radius="xl" size="xl" color="primary" sx={{ zIndex: 99 }} w={50} h={50}>
position: 'absolute', <FontAwesomeIcon fixedWidth icon="xmark" size="lg" />
width: 40, </ActionIcon>
height: 40, <Box
display: 'flex', sx={{
alignItems: 'center', position: 'absolute',
justifyContent: 'center', top: '50%',
borderRadius: '50%', left: '50%',
backgroundColor: theme.colors.dark[6], transform: 'translate(-50%, -50%)',
color: theme.colors.dark[0], width: 120,
boxShadow: theme.shadows.sm, height: 120,
padding: 12, display: 'flex',
'&:hover': { alignItems: 'center',
backgroundColor: theme.colors.dark[5], justifyContent: 'center',
cursor: 'pointer', }}
}, >
})} {menu.items.map((item, index) => (
> <Box
<FontAwesomeIcon icon={item.icon} fixedWidth /> onMouseEnter={() => setCurrentItem({ label: item.label, visible: true })}
</Box> onMouseLeave={() => setCurrentItem((prevState) => ({ ...prevState, visible: false }))}
))} onClick={() => handleItemClick(index)}
sx={(theme) => ({
transform: getTransform(index, menu.items.length),
position: 'absolute',
width: 40,
height: 40,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '50%',
backgroundColor: theme.colors.dark[6],
color: theme.colors.dark[0],
boxShadow: theme.shadows.sm,
padding: 12,
'&:hover': {
backgroundColor: theme.colors.dark[5],
cursor: 'pointer',
},
})}
>
<FontAwesomeIcon icon={item.icon} fixedWidth />
</Box>
))}
</Box>
</>
)}
</>
</Box> </Box>
</Box> <Stack
sx={{ position: 'absolute', width: '100%', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}
mt={120}
justify="center"
align="center"
>
<Transition transition="fade" mounted={currentItem.visible}>
{(styles) => (
<Box
style={styles}
sx={(theme) => ({
backgroundColor: theme.colors.dark[6],
color: theme.colors.dark[2],
padding: 8,
borderRadius: theme.radius.sm,
fontWeight: 500,
fontSize: 14,
boxShadow: theme.shadows.sm,
textAlign: 'center',
})}
>
<Text>{currentItem.label}</Text>
</Box>
)}
</Transition>
</Stack>
</>
); );
}; };