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

Co-authored-by: dougfabris <devfabris@gmail.com>

.changeset/eight-needles-push.md

@@ -0,0 +1,6 @@
+---
+"@rocket.chat/fuselage-toastbar": minor
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage-toastbar): Pause ToastBar timer while hovering

packages/fuselage-toastbar/package.json

@@ -104,5 +104,8 @@
   },
   "volta": {
     "extends": "../../package.json"
+  },
+  "dependencies": {
+    "react-timing-hooks": "~4.0.2"
   }
 }

packages/fuselage-toastbar/src/ToastBarTimed.tsx

@@ -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';
@@ -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}
     />
   );
 };

packages/fuselage/src/components/ToastBar/ToastBar.tsx

@@ -12,6 +12,7 @@ export type ToastBarProps = {
   className?: string;
   children?: ReactNode;
   time?: number;
+  isPaused?: boolean;
   id?: string;
   onClose?: (id: string) => void;
   buttonLabel?: string;
@@ -22,6 +23,7 @@ export function ToastBar({
   className = '',
   variant = 'info',
   time = 5,
+  isPaused,
   id,
   onClose,
   buttonLabel = 'Dismiss alert',
@@ -59,6 +61,8 @@ export function ToastBar({
     &::after {
       width: 0%;
       animation: ${progressBar} ${time}s;
+      animation-fill-mode: forwards;
+      animation-play-state: ${isPaused ? 'paused' : 'running'};
     }
   `;
 

packages/fuselage/src/components/ToastBar/__snapshots__/ToastBar.spec.tsx.snap

@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>

yarn.lock

@@ -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"
@@ -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"