Skip to content

Commit

Permalink
feat(fuselage-toastbar): Pause ToastBar timer while hovering (#1406)
Browse files Browse the repository at this point in the history
Co-authored-by: dougfabris <[email protected]>
  • Loading branch information
debdutdeb and dougfabris authored Jul 18, 2024
1 parent ed41c92 commit 781f4aa
Show file tree
Hide file tree
Showing 6 changed files with 36 additions and 13 deletions.
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 while hovering
3 changes: 3 additions & 0 deletions packages/fuselage-toastbar/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -104,5 +104,8 @@
},
"volta": {
"extends": "../../package.json"
},
"dependencies": {
"react-timing-hooks": "~4.0.2"
}
}
16 changes: 8 additions & 8 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 { useCountdown } from 'react-timing-hooks';

import type { ToastBarPayload } from './ToastBarContext';
import { useToastBarDismiss } from './ToastBarContext';
Expand All @@ -13,21 +13,21 @@ const ToastBarTimed = ({
}: ToastBarPayload): ReactElement => {
const dismissToastMessage = useToastBarDismiss();

useEffect(() => {
const timeOut = setTimeout(() => {
dismissToastMessage(id);
}, time * 1000);

return () => clearTimeout(timeOut);
}, []);
const [, { isPaused, pause, resume }] = useCountdown(time, 0, {
onEnd: () => dismissToastMessage(id),
startOnMount: true,
});

return (
<ToastBar
variant={type}
onPointerEnter={() => pause()}
onPointerLeave={() => resume()}
children={message}
onClose={dismissToastMessage}
id={id}
time={time}
isPaused={isPaused}
/>
);
};
Expand Down
4 changes: 4 additions & 0 deletions packages/fuselage/src/components/ToastBar/ToastBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export type ToastBarProps = {
className?: string;
children?: ReactNode;
time?: number;
isPaused?: boolean;
id?: string;
onClose?: (id: string) => void;
buttonLabel?: string;
Expand All @@ -22,6 +23,7 @@ export function ToastBar({
className = '',
variant = 'info',
time = 5,
isPaused,
id,
onClose,
buttonLabel = 'Dismiss alert',
Expand Down Expand Up @@ -59,6 +61,8 @@ export function ToastBar({
&::after {
width: 0%;
animation: ${progressBar} ${time}s;
animation-fill-mode: forwards;
animation-play-state: ${isPaused ? 'paused' : 'running'};
}
`;

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-h9ngh8 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-h9ngh8 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-h9ngh8 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-h9ngh8 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-h9ngh8 rcx-toastbar_progressbar"
/>
</div>
</div>
Expand Down
10 changes: 10 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -5763,6 +5763,7 @@ __metadata:
lint-staged: "npm:~13.2.1"
npm-run-all: "npm:^4.1.5"
prettier: "npm:~2.8.7"
react-timing-hooks: "npm:~4.0.2"
rimraf: "npm:~3.0.2"
storybook-dark-mode: "npm:~1.1.2"
ts-jest: "npm:~29.1.0"
Expand Down Expand Up @@ -23559,6 +23560,15 @@ __metadata:
languageName: node
linkType: hard

"react-timing-hooks@npm:~4.0.2":
version: 4.0.2
resolution: "react-timing-hooks@npm:4.0.2"
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 10/0d1c7b37e4d86932ad092ce248dd711521396ae36a91329bf6a8dfbdf904d7e45475946ead0e7991020a8546a0fb61d69c05d6bcbd417901b18932b83d688984
languageName: node
linkType: hard

"react-virtuoso@npm:~3.1.5":
version: 3.1.5
resolution: "react-virtuoso@npm:3.1.5"
Expand Down

0 comments on commit 781f4aa

Please sign in to comment.