Merge pull request #31 from srcrip/add-infinite-duration-toasts

Add infinite duration toasts
srcrip · Dec 31, 2024 · 7393c41 · 7393c41
2 parents bdc33a6 + 1975e87
commit 7393c41
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 6 deletions.
diff --git a/assets/js/live_toast/live_toast.ts b/assets/js/live_toast/live_toast.ts
@@ -239,12 +239,15 @@ export function createLiveToastHook(duration = 6000, maxItems = 3) {
         durationOverride = Number.parseInt(this.el.dataset.duration)
       }
 
-      window.setTimeout(async () => {
-        // animate this element sliding down, opacity to 0, with delay time
-        await animateOut.bind(this)()
+      // you can set duration to 0 for infinite duration, basically
+      if (durationOverride !== 0) {
+        window.setTimeout(async () => {
+          // animate this element sliding down, opacity to 0, with delay time
+          await animateOut.bind(this)()
 
-        this.pushEventTo('#toast-group', 'clear', { id: this.el.id })
-      }, durationOverride + removalTime)
+          this.pushEventTo('#toast-group', 'clear', { id: this.el.id })
+        }, durationOverride + removalTime)
+      }
     }
   }
 }
diff --git a/demo/lib/demo_web/live/tabs/demo.html.heex b/demo/lib/demo_web/live/tabs/demo.html.heex
@@ -75,7 +75,11 @@
   </div>
 
   <p class="mt-6 mb-4">
-    You can also use arbitrary severity levels. If you want to add another level like "warning", refer to [the documentation here](https://hexdocs.pm/live_toast/readme.html#custom-severity-levels).
+    You can also use arbitrary severity levels. If you want to add another level like "warning", refer to <.link
+      href="https://hexdocs.pm/live_toast/readme.html#custom-severity-levels"
+      class="text-blue-700 hover:text-blue-500 underline"
+    >the
+      documentation here</.link>.
   </p>
   <div class="flex flex-wrap gap-3">
     <.button phx-click="flash" phx-value-kind="warn">
@@ -84,6 +88,54 @@
   </div>
 </div>
 
+<div class="mb-12">
+  <h2 class="text-lg font-semibold mb-3">Duration</h2>
+  <p class="mt-2 mb-4">
+    You can set the duration of different toasts. If you set duration to 0, they will stay until dismissed (like
+    flashes). The default duration is 6000ms.
+  </p>
+  <div class="flex flex-wrap gap-3">
+    <.button phx-click={
+      JS.push("toast",
+        value: %{
+          "kind" => "info",
+          "title" => "Duration",
+          "body" => "This toast will stay for 1000ms.",
+          "duration" => 1000
+        }
+      )
+    }>
+      Short Toast
+    </.button>
+
+    <.button phx-click={
+      JS.push("toast",
+        value: %{
+          "kind" => "info",
+          "title" => "Duration",
+          "body" => "This toast will stay for 8000ms.",
+          "duration" => 8000
+        }
+      )
+    }>
+      Long Toast
+    </.button>
+
+    <.button phx-click={
+      JS.push("toast",
+        value: %{
+          "kind" => "info",
+          "title" => "Duration",
+          "body" => "This toast will stay until dismissed.",
+          "duration" => 0
+        }
+      )
+    }>
+      Infinite Toast
+    </.button>
+  </div>
+</div>
+
 <div class="mb-12">
   <h2 class="text-lg font-semibold mb-3">Position</h2>
   <p class="mt-2 mb-4">