From f64013cefee5f667bffcd344d786ca524848ea29 Mon Sep 17 00:00:00 2001
From: Ruslan Bekenev <furyinbox@gmail.com>
Date: Wed, 10 May 2023 10:58:31 +1000
Subject: [PATCH] Add ability to specify INFINITE_TIMEOUT

---
 README.md            | 11 +++++++++++
 example/src/App.vue  | 17 +++++++++++++++++
 src/Notification.vue |  8 ++++++--
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index ffe326b..0347703 100644
--- a/README.md
+++ b/README.md
@@ -145,6 +145,17 @@ this.$notify({
 
 The first argument is an object containing the data for the `Notification` element, it's important to specify the group where the notificatoins are going to be displayed, the second argument is the timeout. The default timeout is 3 seconds.
 
+If you need to keep the notification on the screen forever use `-1` as a timeout:
+
+```javascript
+this.$notify({
+  group: "foo",
+  title: "Success",
+  text: "Your account was registered!"
+}, -1) // it's not going to disappear automatically
+```
+
+
 ### Example with differents groups
 
 You can use the `NotificationGroup` component to have different types of notifications. For example, notifications error messages in top center and generic app notifications in bottom-right corner.
diff --git a/example/src/App.vue b/example/src/App.vue
index a7ec5a3..5849b12 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -9,6 +9,12 @@
       >
         Top notification
       </button>
+      <button
+        class="px-4 py-2 font-bold text-white bg-green-500 rounded hover:bg-green-600 focus:outline-none focus:ring"
+        @click="onClickTopInfinite"
+      >
+        Top notification infinite
+      </button>
       <button
         class="px-4 py-2 font-bold text-white bg-red-500 rounded hover:bg-red-600 focus:outline-none focus:ring"
         @click="onClickBot"
@@ -159,6 +165,17 @@ function onClickTop() {
   );
 }
 
+function onClickTopInfinite() {
+  notify(
+    {
+      group: "top",
+      title: "Success",
+      text: "I'm not going to disappear until you close me 😎",
+    },
+    -1
+  );
+ }
+
 function onClickBot() {
   notify(
     {
diff --git a/src/Notification.vue b/src/Notification.vue
index a5e669c..13a2223 100644
--- a/src/Notification.vue
+++ b/src/Notification.vue
@@ -68,13 +68,17 @@ const add = ({
   timeout?: number;
 }) => {
   const DEFAULT_TIMEOUT = 3000;
+  const INFINITE_TIMEOUT = -1;
 
   state.notifications.push(notification);
 
   state.timeouts[notification.id] = window.setTimeout(() => {
+    if (timeout === INFINITE_TIMEOUT) return;
+
     remove(notification.id);
-  }, timeout || DEFAULT_TIMEOUT);
-};
+
+    // use Math.max to make sure we don't pass INFINITE_TIMEOUT to setTimeout
+  }, Math.max(timeout || DEFAULT_TIMEOUT, 0)); };
 
 const close = (id: Notification["id"]) => {
   emit("close");