feat: added ability to add a custom timeout (#892)

Co-authored-by: Clinton Medbery <[email protected]>
d2iq · Dec 2, 2022 · 070d362 · 070d362
1 parent 5bbd80e
commit 070d362
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 9 deletions.
diff --git a/packages/toaster/components/Toaster.tsx b/packages/toaster/components/Toaster.tsx
@@ -5,17 +5,21 @@ import { ToastProps } from "./Toast";
 import { toaster, preTransitionStyle, transitionStyles } from "../style";
 import { margin, marginAt, listReset } from "../../shared/styles/styleUtils";
 
-export const DELAY_TIME = 3000;
+export const DEFAULT_DELAY_TIME = 3000;
 const MARGINAL_DELAY = 1000;
 const animationDuration = 300;
 
 type Toast = React.ReactElement<ToastProps>;
 
 interface ToasterProps {
+  dismissTime?: number;
   children?: Toast | Toast[];
 }
 
-const Toaster = ({ children }: ToasterProps) => {
+const Toaster = ({
+  dismissTime = DEFAULT_DELAY_TIME,
+  children
+}: ToasterProps) => {
   const timeouts = React.useRef<number[]>([]);
 
   const [toasts, setToasts] = React.useState<Toast[]>([]);
@@ -35,7 +39,7 @@ const Toaster = ({ children }: ToasterProps) => {
         timeouts.current.push(
           window.setTimeout(() => {
             dismissToast(toast);
-          }, DELAY_TIME + MARGINAL_DELAY * index)
+          }, dismissTime + MARGINAL_DELAY * index)
         );
       }
     });

diff --git a/packages/toaster/stories/Toaster.stories.tsx b/packages/toaster/stories/Toaster.stories.tsx
@@ -106,6 +106,41 @@ export const AutoDismiss = () => {
   );
 };
 
+export const CustomDismissTimeAutoDismiss = () => {
+  const [toasts, setToasts] = React.useState<number[]>([]);
+
+  const removeToast = (id: number) => {
+    setToasts(toasts => toasts.filter(toast => toast !== id));
+  };
+
+  const handleToastAdd = () => {
+    const newToastId = addedToastId++;
+    setToasts(toasts => [...toasts, newToastId]);
+  };
+
+  return (
+    <div>
+      <Toaster dismissTime={5000}>
+        {toasts.map(toastId => {
+          const handleDismiss = () => {
+            removeToast(toastId);
+          };
+          return (
+            <Toast
+              autodismiss
+              id={`toast-${toastId}`}
+              key={toastId}
+              title={`New message ${toastId} disappearing in 5 seconds`}
+              onDismiss={handleDismiss}
+            />
+          );
+        })}
+      </Toaster>
+      <button onClick={handleToastAdd}>Make me toast</button>
+    </div>
+  );
+};
+
 export const WithDismissCallback = () => (
   <Toaster>
     {[

diff --git a/packages/toaster/tests/Toaster.test.tsx b/packages/toaster/tests/Toaster.test.tsx
@@ -7,7 +7,7 @@ import {
   waitForElementToBeRemoved
 } from "@testing-library/react";
 import { Toaster, Toast } from "../";
-import { DELAY_TIME } from "../components/Toaster";
+import { DEFAULT_DELAY_TIME } from "../components/Toaster";
 import userEvent from "@testing-library/user-event";
 
 describe("Toaster", () => {
@@ -53,7 +53,7 @@ describe("Toaster", () => {
     expect(dismissCallback).toHaveBeenCalledTimes(1);
   });
 
-  it("dismisses autodismiss toasts after specified time", async () => {
+  it("dismisses autodismiss toasts after a default time", async () => {
     jest.useFakeTimers();
     const title = "I Am Toast";
     const { getByText, queryByText } = render(
@@ -64,8 +64,36 @@ describe("Toaster", () => {
 
     expect(getByText(title)).toBeDefined();
 
+    await waitFor(() => {
+      expect(queryByText(title)).toBeInTheDocument();
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(DEFAULT_DELAY_TIME);
+    });
+
+    await waitFor(() => {
+      expect(queryByText(title)).not.toBeInTheDocument();
+    });
+  });
+
+  it("dismisses autodismiss toasts after specified time", async () => {
+    jest.useFakeTimers();
+    const title = "I Am Toast";
+    const { getByText, queryByText } = render(
+      <Toaster dismissTime={8000}>
+        <Toast id={0} autodismiss title={title} key={0} />
+      </Toaster>
+    );
+
+    expect(getByText(title)).toBeDefined();
+
+    await waitFor(() => {
+      expect(queryByText(title)).toBeInTheDocument();
+    });
+
     act(() => {
-      jest.advanceTimersByTime(DELAY_TIME);
+      jest.advanceTimersByTime(8000);
     });
 
     await waitFor(() => {
@@ -87,7 +115,7 @@ describe("Toaster", () => {
     fireEvent.mouseEnter(toasterList);
 
     act(() => {
-      jest.advanceTimersByTime(DELAY_TIME);
+      jest.advanceTimersByTime(DEFAULT_DELAY_TIME);
     });
 
     // is never removed because timeout was cleared
@@ -98,7 +126,7 @@ describe("Toaster", () => {
     fireEvent.mouseLeave(toasterList);
 
     act(() => {
-      jest.advanceTimersByTime(DELAY_TIME);
+      jest.advanceTimersByTime(DEFAULT_DELAY_TIME);
     });
 
     await waitFor(() => {
@@ -123,7 +151,7 @@ describe("Toaster", () => {
     expect(dismissCallback).not.toHaveBeenCalled();
 
     act(() => {
-      jest.advanceTimersByTime(DELAY_TIME);
+      jest.advanceTimersByTime(DEFAULT_DELAY_TIME);
     });
 
     expect(dismissCallback).toHaveBeenCalledTimes(1);