feat: Add progress bar to toast component

js/src/toast.js

@@ -9,6 +9,7 @@ import { defineJQueryPlugin, reflow } from './util/index'
 import EventHandler from './dom/event-handler'
 import BaseComponent from './base-component'
 import { enableDismissTrigger } from './util/component-functions'
+import SelectorEngine from './dom/selector-engine'
 
 /**
  * Constants
@@ -18,6 +19,8 @@ const NAME = 'toast'
 const DATA_KEY = 'bs.toast'
 const EVENT_KEY = `.${DATA_KEY}`
 
+const CLASS_PROGRESS_BAR = '.toast-progress'
+
 const EVENT_MOUSEOVER = `mouseover${EVENT_KEY}`
 const EVENT_MOUSEOUT = `mouseout${EVENT_KEY}`
 const EVENT_FOCUSIN = `focusin${EVENT_KEY}`
@@ -145,6 +148,7 @@ class Toast extends BaseComponent {
       return
     }
 
+    this._toggleProgressBar(this._config.delay)
     this._timeout = setTimeout(() => {
       this.hide()
     }, this._config.delay)
@@ -186,6 +190,7 @@ class Toast extends BaseComponent {
 
   _clearTimeout() {
     clearTimeout(this._timeout)
+    this._toggleProgressBar(null)
     this._timeout = null
   }
 
@@ -203,6 +208,23 @@ class Toast extends BaseComponent {
       }
     })
   }
+
+  _toggleProgressBar(time) {
+    const progressBarElement = SelectorEngine.findOne(CLASS_PROGRESS_BAR, this._element)
+    if (!progressBarElement) {
+      return
+    }
+
+    if (time) {
+      progressBarElement.classList.add('animated')
+      progressBarElement.style.animationDuration = `${time}ms`
+      // reflow(progressBarElement)
+      return
+    }
+
+    progressBarElement.classList.remove('animated')
+    reflow(progressBarElement)
+  }
 }
 
 /**