Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(fuselage-toastbar): Pause ToastBar timer while hovering #1406

Merged
merged 14 commits into from
Jul 18, 2024
6 changes: 6 additions & 0 deletions .changeset/eight-needles-push.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@rocket.chat/fuselage-toastbar": minor
"@rocket.chat/fuselage": minor
---

feat(fuselage-toastbar): Pause ToastBar timer when hovering
23 changes: 17 additions & 6 deletions packages/fuselage-toastbar/src/ToastBarTimed.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ToastBar } from '@rocket.chat/fuselage';
import type { ReactElement } from 'react';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';

import type { ToastBarPayload } from './ToastBarContext';
import { useToastBarDismiss } from './ToastBarContext';
Expand All @@ -11,19 +11,30 @@ const ToastBarTimed = ({
id,
message,
}: ToastBarPayload): ReactElement => {
const timeInSeconds = time * 1000;
const [shouldPause, setShouldPause] = useState(false);
const dismissToastMessage = useToastBarDismiss();

useEffect(() => {
const timeOut = setTimeout(() => {
dismissToastMessage(id);
}, time * 1000);
const initialTime = Date.now();
const interval = setInterval(() => {
if (shouldPause) {
return;
}
dougfabris marked this conversation as resolved.
Show resolved Hide resolved

return () => clearTimeout(timeOut);
}, []);
if (Date.now() - initialTime >= timeInSeconds) {
dismissToastMessage(id);
}
}, timeInSeconds);

return () => clearInterval(interval);
}, [shouldPause]);

return (
<ToastBar
variant={type}
onMouseEnter={() => setShouldPause(true)}
onMouseLeave={() => setShouldPause(false)}
dougfabris marked this conversation as resolved.
Show resolved Hide resolved
children={message}
onClose={dismissToastMessage}
id={id}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -112,4 +112,8 @@ $toastbar-progressbar-background-color: theme(
background-color: $toastbar-progressbar-background-color;
}
}

&:hover &_progressbar::after {
animation-play-state: paused;
}
}
1 change: 1 addition & 0 deletions packages/fuselage/src/components/ToastBar/ToastBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export function ToastBar({
&::after {
width: 0%;
animation: ${progressBar} ${time}s;
animation-fill-mode: forwards;
}
`;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ exports[`[ToastBar Rendering] renders Default without crashing 1`] = `
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-1rc3wl5 rcx-toastbar_progressbar"
class="rcx-box rcx-box--full rcx-css-1ej4z39 rcx-toastbar_progressbar"
/>
</div>
</div>
Expand Down Expand Up @@ -57,7 +57,7 @@ exports[`[ToastBar Rendering] renders Error without crashing 1`] = `
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-1rc3wl5 rcx-toastbar_progressbar"
class="rcx-box rcx-box--full rcx-css-1ej4z39 rcx-toastbar_progressbar"
/>
</div>
</div>
Expand Down Expand Up @@ -89,7 +89,7 @@ exports[`[ToastBar Rendering] renders Success without crashing 1`] = `
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-1rc3wl5 rcx-toastbar_progressbar"
class="rcx-box rcx-box--full rcx-css-1ej4z39 rcx-toastbar_progressbar"
/>
</div>
</div>
Expand Down Expand Up @@ -119,7 +119,7 @@ exports[`[ToastBar Rendering] renders TinyText without crashing 1`] = `
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-1rc3wl5 rcx-toastbar_progressbar"
class="rcx-box rcx-box--full rcx-css-1ej4z39 rcx-toastbar_progressbar"
/>
</div>
</div>
Expand Down Expand Up @@ -167,7 +167,7 @@ exports[`[ToastBar Rendering] renders WithCloseButton without crashing 1`] = `
</div>
</div>
<div
class="rcx-box rcx-box--full rcx-css-1rc3wl5 rcx-toastbar_progressbar"
class="rcx-box rcx-box--full rcx-css-1ej4z39 rcx-toastbar_progressbar"
/>
</div>
</div>
Expand Down
Loading