Simplified closing and replacement functionality

src/renderer/components/ft-toast/ft-toast.js

@@ -5,8 +5,7 @@ export default Vue.extend({
   name: 'FtToast',
   data: function () {
     return {
-      toasts: [
-      ],
+      toasts: [],
     }
   },
   mounted: function () {
@@ -16,39 +15,28 @@ export default Vue.extend({
     FtToastEvents.$off('toast.open', this.open)
   },
   methods: {
-    performAction: function (toast) {
-      toast.action()
-      this.close(toast)
+    performAction: function (index) {
+      this.toasts[index].action()
+      this.remove(index)
     },
     close: function (toast) {
-      clearTimeout(toast.timeout)
-      // Remove toasts when most recent toast has finished to avoid re-render
-      if (this.toasts.filter(toast => toast.isOpen).length === 1) {
       // Wait for fade-out to finish
-        setTimeout(this.clear, 300)
-      }
+      setTimeout(this.remove, 300, this.toasts.length)
+
       toast.isOpen = false
     },
     open: function (message, action, time) {
       const toast = { message: message, action: action || (() => { }), isOpen: false, timeout: null }
-      toast.timeout = setTimeout(this.close, time || 3000, toast)
+      toast.timeout = setTimeout(this.close, time || 6000, toast)
       setImmediate(() => { toast.isOpen = true })
       if (this.toasts.length > 4) {
-        for (let i = this.toasts.length - 1; i >= 0; i--) {
-          if (!this.toasts[i].isOpen) {
-            // Replace the first hidden toast starting from the bottom
-            return this.toasts.splice(i, 1, toast)
-          }
-        }
-        // Else replace the most recent
-        return this.toasts.splice(4, 1, toast)
+        this.remove(0)
       }
       this.toasts.push(toast)
     },
-    clear: function () {
-      if (this.toasts.every(toast => !toast.isOpen)) {
-        this.toasts = []
-      }
+    remove: function(index) {
+      const removed = this.toasts.splice(index, 1)
+      clearTimeout(removed.timeout)
     }
   },
 })

src/renderer/components/ft-toast/ft-toast.vue

@@ -5,7 +5,7 @@
       :key="'toast-' + index"
       class="toast"
       :class="{ closed: !toast.isOpen, open: toast.isOpen }"
-      @click="performAction(toast)"
+      @click="performAction(index)"
     >
       <p class="message">
         {{ toast.message }}