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/notifications): improve notification transitions

Browse Source
This commit is contained in:
Luke
2023-01-02 21:50:49 +01:00
parent 59f513ef01
commit 440a7564a3
1 changed files with 114 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
web/src/features/notifications/NotificationWrapper.tsx
View File

@@ -3,7 +3,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { toast, Toaster, ToastPosition } from 'react-hot-toast';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import ReactMarkdown from 'react-markdown';
import { Avatar, createStyles, Group, Stack, Box, Text } from '@mantine/core';
import { Avatar, createStyles, Group, Stack, Box, Text, keyframes } from '@mantine/core';
import React from 'react';
export interface NotificationProps {
@@ -49,6 +49,73 @@ const useStyles = createStyles((theme) => ({
},
}));
// I hate this
const enterAnimationTop = keyframes({
from: {
opacity: 0,
transform: 'translateY(-30px)',
},
to: {
opacity: 1,
transform: 'translateY(0px)',
},
});
const enterAnimationBottom = keyframes({
from: {
opacity: 0,
transform: 'translateY(30px)',
},
to: {
opacity: 1,
transform: 'translateY(0px)',
},
});
const exitAnimationTop = keyframes({
from: {
opacity: 1,
transform: 'translateY(0px)',
},
to: {
opacity: 0,
transform: 'translateY(-100%)',
},
});
const exitAnimationRight = keyframes({
from: {
opacity: 1,
transform: 'translateX(0px)',
},
to: {
opacity: 0,
transform: 'translateX(100%)',
},
});
const exitAnimationLeft = keyframes({
from: {
opacity: 1,
transform: 'translateX(0px)',
},
to: {
opacity: 0,
transform: 'translateX(-100%)',
},
});
const exitAnimationBottom = keyframes({
from: {
opacity: 1,
transform: 'translateY(0px)',
},
to: {
opacity: 0,
transform: 'translateY(100%)',
},
});
const Notifications: React.FC = () => {
const { classes } = useStyles();
@@ -68,39 +135,56 @@ const Notifications: React.FC = () => {
data.icon = data.type === 'error' ? 'xmark' : data.type === 'success' ? 'check' : 'info';
}
toast(
<Box style={data.style} className={`${classes.container}`}>
<Group noWrap spacing={12}>
{data.icon && (
<>
{!data.iconColor ? (
<Avatar
color={data.type === 'error' ? 'red' : data.type === 'success' ? 'teal' : 'blue'}
radius="xl"
size={(data.title && !data.description) || (data.description && !data.title) ? 28 : undefined}
>
<FontAwesomeIcon icon={data.icon} fixedWidth size="lg" />
</Avatar>
) : (
<FontAwesomeIcon icon={data.icon} style={{ color: data.iconColor }} fixedWidth size="lg" />
)}
</>
)}
<Stack spacing={0}>
{data.title && <Text className={classes.title}>{data.title}</Text>}
{data.description && <ReactMarkdown className={classes.description}>{data.description}</ReactMarkdown>}
</Stack>
</Group>
</Box>,
toast.custom(
(t) => (
<Box
sx={{
animation: t.visible
? `${position?.includes('bottom') ? enterAnimationBottom : enterAnimationTop} 0.2s ease-out forwards`
: `${
position?.includes('right')
? exitAnimationRight
: position?.includes('left')
? exitAnimationLeft
: position === 'top-center'
? exitAnimationTop
: position
? exitAnimationBottom
: exitAnimationRight
} 0.4s ease-in forwards`,
}}
style={{
...data.style,
}}
className={`${classes.container}`}
>
<Group noWrap spacing={12}>
{data.icon && (
<>
{!data.iconColor ? (
<Avatar
color={data.type === 'error' ? 'red' : data.type === 'success' ? 'teal' : 'blue'}
radius="xl"
size={(data.title && !data.description) || (data.description && !data.title) ? 28 : undefined}
>
<FontAwesomeIcon icon={data.icon} fixedWidth size="lg" />
</Avatar>
) : (
<FontAwesomeIcon icon={data.icon} style={{ color: data.iconColor }} fixedWidth size="lg" />
)}
</>
)}
<Stack spacing={0}>
{data.title && <Text className={classes.title}>{data.title}</Text>}
{data.description && <ReactMarkdown className={classes.description}>{data.description}</ReactMarkdown>}
</Stack>
</Group>
</Box>
),
{
id: data.id?.toString(),
duration: data.duration || 3000,
position: position || 'top-right',
style: {
padding: 0,
boxShadow: 'none',
backgroundColor: 'transparent',
},
}
);
});