FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-17 23:16:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): scale fade transition

Browse Source
This commit is contained in:
Luke
2022-12-31 15:03:16 +01:00
parent 8722d25171
commit 2a1e7ff632
5 changed files with 147 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
web/src/features/menu/context/ContextMenu.tsx
View File

@@ -6,6 +6,7 @@ import ContextButton from './components/ContextButton';
import { fetchNui } from '../../../utils/fetchNui';
import ReactMarkdown from 'react-markdown';
import HeaderButton from './components/HeaderButton';
import ScaleFade from '../../../transitions/ScaleFade';
const openMenu = (id: string | undefined) => {
fetchNui<ContextMenuProps>('openContext', { id: id, back: true });
@@ -49,30 +50,28 @@ const ContextMenu: React.FC = () => {
});
return (
<Transition mounted={visible} transition="pop" duration={100} exitDuration={100}>
{(styles) => (
<Box style={styles} sx={{ position: 'absolute', top: '15%', right: '25%' }} w={320} h={580}>
<Flex justify="center" align="center" mb={10} gap={6}>
{contextMenu.menu && (
<HeaderButton icon="chevron-left" iconSize={16} handleClick={() => openMenu(contextMenu.menu)} />
)}
<Box sx={{ borderRadius: 4, flex: '1 85%' }} bg="dark.6">
<Text color="dark.0" p={6} align="center">
<ReactMarkdown>{contextMenu.title}</ReactMarkdown>
</Text>
</Box>
<HeaderButton icon="xmark" canClose={contextMenu.canClose} iconSize={18} handleClick={closeContext} />
</Flex>
<Box sx={{ height: 560, overflowY: 'scroll' }}>
<Stack spacing={3}>
{Object.entries(contextMenu.options).map((option, index) => (
<ContextButton option={option} key={`context-item-${index}`} />
))}
</Stack>
<Box sx={{ position: 'absolute', top: '15%', right: '25%' }} w={320} h={580}>
<ScaleFade visible={visible}>
<Flex justify="center" align="center" mb={10} gap={6}>
{contextMenu.menu && (
<HeaderButton icon="chevron-left" iconSize={16} handleClick={() => openMenu(contextMenu.menu)} />
)}
<Box sx={{ borderRadius: 4, flex: '1 85%' }} bg="dark.6">
<Text color="dark.0" p={6} align="center">
<ReactMarkdown>{contextMenu.title}</ReactMarkdown>
</Text>
</Box>
<HeaderButton icon="xmark" canClose={contextMenu.canClose} iconSize={18} handleClick={closeContext} />
</Flex>
<Box sx={{ height: 560, overflowY: 'scroll' }}>
<Stack spacing={3}>
{Object.entries(contextMenu.options).map((option, index) => (
<ContextButton option={option} key={`context-item-${index}`} />
))}
</Stack>
</Box>
)}
</Transition>
</ScaleFade>
</Box>
);
};