Merge pull request #235 from Overbryd/fix/notification-timeout

Fix InlineNotification and ToastNotification timeout

src/Notification/InlineNotification.svelte

@@ -17,6 +17,12 @@
    */
   export let lowContrast = false;
 
+  /**
+   * Set the timeout duration (ms) to hide the notification after opening it
+   * @type {number} [timeout=0]
+   */
+  export let timeout = 0;
+
   /**
    * Set the `role` attribute
    * @type {string} [role="alert"]
@@ -47,14 +53,30 @@
    */
   export let iconDescription = "Closes notification";
 
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import NotificationIcon from "./NotificationIcon.svelte";
   import NotificationTextDetails from "./NotificationTextDetails.svelte";
   import NotificationButton from "./NotificationButton.svelte";
 
   const dispatch = createEventDispatcher();
 
-  $: open = true;
+  let open = true;
+  let timeoutId = undefined;
+
+  function close() {
+    open = false;
+    dispatch('close');
+  }
+
+  onMount(() => {
+    if (timeout) {
+      timeoutId = setTimeout(() => close(), timeout);
+    }
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  });
 </script>
 
 {#if open}
@@ -81,10 +103,7 @@
       <NotificationButton
         {iconDescription}
         {notificationType}
-        on:click={() => {
+        on:click={close} />
-          open = false;
-          dispatch('close');
-        }} />
     {/if}
   </div>
 {/if}

src/Notification/ToastNotification.svelte

@@ -18,7 +18,7 @@
   export let lowContrast = false;
 
   /**
-   * Set the timeout duration (ms) to hide the notification after closing it
+   * Set the timeout duration (ms) to hide the notification after opening it
    * @type {number} [timeout=0]
    */
   export let timeout = 0;
@@ -69,11 +69,14 @@
   let open = true;
   let timeoutId = undefined;
 
+  function close() {
+    open = false;
+    dispatch('close');
+  }
+
   onMount(() => {
     if (timeout) {
-      timeoutId = setTimeout(() => {
+      timeoutId = setTimeout(() => close(), timeout);
-        open = false;
-      }, timeout);
     }
 
     return () => {
@@ -102,10 +105,7 @@
       <NotificationButton
         {iconDescription}
         {notificationType}
-        on:click={() => {
+        on:click={close} />
-          open = false;
-          dispatch('close');
-        }} />
     {/if}
   </div>
 {/if}