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

fix(notify): reset circle animation on notification re-trigger with id (#559)

Browse Source 
Resolves #554 

* fix(notify): prevent duration not showing in notifications with id

* fix(notify): add toast key to reset circle animation

* refactor(web/notify): use ref for key counter instead of state

---------

Co-authored-by: Luke <39926192+LukeWasTakenn@users.noreply.github.com>
This commit is contained in:
RrybaN
2024-04-27 21:33:34 +08:00
committed by GitHub
parent 8261156c53
commit 8bb3b5a835
1 changed files with 11 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@ import { useNuiEvent } from '../../hooks/useNuiEvent';
import { toast, Toaster } from 'react-hot-toast'; import { toast, Toaster } from 'react-hot-toast';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import { Box, Center, createStyles, Group, keyframes, RingProgress, Stack, Text, ThemeIcon } from '@mantine/core'; import { Box, Center, createStyles, Group, keyframes, RingProgress, Stack, Text, ThemeIcon } from '@mantine/core';
import React from 'react'; import React, { useRef } from 'react';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import type { NotificationProps } from '../../typings'; import type { NotificationProps } from '../../typings';
import MarkdownComponents from '../../config/MarkdownComponents'; import MarkdownComponents from '../../config/MarkdownComponents';
@@ -111,8 +111,13 @@ const durationCircle = keyframes({
const Notifications: React.FC = () => { const Notifications: React.FC = () => {
const { classes } = useStyles(); const { classes } = useStyles();
const toastKeyRef = useRef(0);
useNuiEvent<NotificationProps>('notify', (data) => { useNuiEvent<NotificationProps>('notify', (data) => {
const toastId = data.id?.toString();
if (toastId) toastKeyRef.current++;
if (!data.title && !data.description) return; if (!data.title && !data.description) return;
let iconColor: string; let iconColor: string;
@@ -190,6 +195,7 @@ const Notifications: React.FC = () => {
<> <>
{data.showDuration ? ( {data.showDuration ? (
<RingProgress <RingProgress
key={toastKeyRef.current}
size={38} size={38}
thickness={2} thickness={2}
sections={[{ value: 100, color: iconColor }]} sections={[{ value: 100, color: iconColor }]}
@@ -201,7 +207,7 @@ const Notifications: React.FC = () => {
animationDuration: `${duration}ms`, animationDuration: `${duration}ms`,
}, },
margin: -3, margin: -3,
} },
}} }}
label={ label={
<Center> <Center>
@@ -211,12 +217,7 @@ const Notifications: React.FC = () => {
size={32} size={32}
variant={tinycolor(iconColor).getAlpha() === 0 ? undefined : 'light'} variant={tinycolor(iconColor).getAlpha() === 0 ? undefined : 'light'}
> >
<LibIcon <LibIcon icon={data.icon} fixedWidth color={iconColor} animation={data.iconAnimation} />
icon={data.icon}
fixedWidth
color={iconColor}
animation={data.iconAnimation}
/>
</ThemeIcon> </ThemeIcon>
</Center> </Center>
} }
@@ -229,12 +230,7 @@ const Notifications: React.FC = () => {
variant={tinycolor(iconColor).getAlpha() === 0 ? undefined : 'light'} variant={tinycolor(iconColor).getAlpha() === 0 ? undefined : 'light'}
style={{ alignSelf: !data.alignIcon || data.alignIcon === 'center' ? 'center' : 'start' }} style={{ alignSelf: !data.alignIcon || data.alignIcon === 'center' ? 'center' : 'start' }}
> >
<LibIcon <LibIcon icon={data.icon} fixedWidth color={iconColor} animation={data.iconAnimation} />
icon={data.icon}
fixedWidth
color={iconColor}
animation={data.iconAnimation}
/>
</ThemeIcon> </ThemeIcon>
)} )}
</> </>
@@ -254,7 +250,7 @@ const Notifications: React.FC = () => {
</Box> </Box>
), ),
{ {
id: data.id?.toString(), id: toastId,
duration: duration, duration: duration,
position: position || 'top-right', position: position || 'top-right',
} }