Toast: fix timeout update: fix #24

Author: vrimar

src/components/toast/Toast.ts

@@ -45,6 +45,9 @@ export class Toast extends AbstractComponent<IToastAttrs> {
       this.startTimeout();
     } else if (prev.attrs.timeout! > 0 && vnode.attrs.timeout! <= 0) {
       this.clearTimeouts();
+    } else if (vnode.attrs.timeout! !== prev.attrs.timeout) {
+      this.clearTimeouts();
+      this.startTimeout();
     }
   }
 

src/components/toast/examples/declarative.ts

@@ -1,5 +1,5 @@
 import m from 'mithril';
-import { Button, Toaster, Toast } from '@/';
+import { Button, Toaster, Toast, Switch } from '@/';
 import { Example } from '@shared/examples';
 
 const EXAMPLE_SRC = 'components/toast/examples/declarative.ts';
@@ -11,9 +11,10 @@ interface INotification {
 
 export class ToastDeclarativeExample {
   private notifications: INotification[] = [];
+  private timeout: number = 3000;
 
   public view() {
-    return m(Example, { src: EXAMPLE_SRC }, [
+    return m(Example, { options: this.renderOptions(), src: EXAMPLE_SRC }, [
       m(Button, {
         label: 'Show toast',
         intent: 'primary',
@@ -24,7 +25,8 @@ export class ToastDeclarativeExample {
         toasts: this.notifications.map(notification => m(Toast, {
           key: notification.key,
           message: notification.message,
-          onDismiss: this.dismiss
+          onDismiss: this.dismiss,
+          timeout: this.timeout
         }))
       })
     ]);
@@ -41,4 +43,14 @@ export class ToastDeclarativeExample {
     const index = this.notifications.findIndex(x => x.key === key);
     this.notifications.splice(index, 1);
   }
+
+  private renderOptions() {
+    return [
+      m(Switch, {
+        checked: this.timeout === 0,
+        label: 'Timeout = 0',
+        onchange: () => this.timeout = this.timeout === 0 ? 3000 : 0
+      })
+    ];
+  }
 }