From b14d69aca3a557989f5283c294594ac474695df8 Mon Sep 17 00:00:00 2001
From: Herway <hqw6@qq.com>
Date: Fri, 27 Dec 2024 13:47:16 +0800
Subject: [PATCH] fix: inability to update toast duration dynamically #529

Inability to update toast duration dynamically

closed #529
---
 src/index.tsx            |  4 ++++
 test/src/app/page.tsx    | 17 +++++++++++++++++
 test/tests/basic.spec.ts | 16 ++++++++++++++++
 3 files changed, 37 insertions(+)

diff --git a/src/index.tsx b/src/index.tsx
index a3ea512..d831bdf 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -124,6 +124,10 @@ const Toast = (props: ToastProps) => {
 
   offset.current = React.useMemo(() => heightIndex * gap + toastsHeightBefore, [heightIndex, toastsHeightBefore]);
 
+  React.useEffect(() => {
+    remainingTime.current = duration;
+  }, [duration]);
+
   React.useEffect(() => {
     // Trigger enter animation without using CSS animation
     setMounted(true);
diff --git a/test/src/app/page.tsx b/test/src/app/page.tsx
index 6730447..83db7d4 100644
--- a/test/src/app/page.tsx
+++ b/test/src/app/page.tsx
@@ -171,6 +171,23 @@ export default function Home({ searchParams }: any) {
       >
         Updated Toast
       </button>
+      <button
+        data-testid="update-toast-duration"
+        className="button"
+        onClick={() => {
+          const toastId = toast('My Unupdated Toast, Updated After 3 Seconds', {
+            duration: 10000,
+          });
+          setTimeout(() => {
+            toast('My Updated Toast, Close After 1 Second', {
+              id: toastId,
+              duration: 1000,
+            });
+          }, 3000);
+        }}
+      >
+        Updated Toast Duration
+      </button>
       <button
         data-testid="string-description"
         className="button"
diff --git a/test/tests/basic.spec.ts b/test/tests/basic.spec.ts
index c40c712..bb2d695 100644
--- a/test/tests/basic.spec.ts
+++ b/test/tests/basic.spec.ts
@@ -178,6 +178,22 @@ test.describe('Basic functionality', () => {
     await expect(page.getByText('My Updated Toast')).toHaveCount(1);
   });
 
+  test('should update toast content and duration after 3 seconds', async ({ page }) => {
+    await page.getByTestId('update-toast-duration').click();
+
+    const initialToast = page.getByText('My Unupdated Toast, Updated After 3 Seconds');
+    await expect(initialToast).toBeVisible();
+
+    await page.waitForTimeout(3000);
+    const updatedToast = page.getByText('My Updated Toast, Close After 1 Second');
+    await expect(updatedToast).toBeVisible();
+
+    await expect(initialToast).not.toBeVisible();
+
+    await page.waitForTimeout(1200);
+    await expect(updatedToast).not.toBeVisible();
+  });
+
   test('cancel button is rendered with custom styles', async ({ page }) => {
     await page.getByTestId('custom-cancel-button-toast').click();
     const button = await page.locator('[data-cancel]');