Feat(web): Add autoclose feature to Toast component

lmc-eu · May 16, 2024 · c61ebcf · c61ebcf
1 parent d8d3976
commit c61ebcf
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 0 deletions.
diff --git a/packages/web/src/js/Toast.ts b/packages/web/src/js/Toast.ts
@@ -10,6 +10,7 @@ import {
   CLASS_NAME_HIDDEN,
   CLASS_NAME_TRANSITIONING,
   CLASS_NAME_VISIBLE,
+  TOAST_AUTO_CLOSE_INTERVAL,
 } from './constants';
 import { enableDismissTrigger, enableToggleTrigger, executeAfterTransition, SpiritConfig } from './utils';
 import { EventHandler, SelectorEngine } from './dom';
@@ -50,9 +51,11 @@ const PROPERTY_NAME_FALLBACK_TRANSITION = 'opacity';
 type Color = keyof typeof COLOR_ICON_MAP;
 
 type Config = {
+  autoCloseInterval: number;
   color: Color;
   containerId: string;
   content: HTMLElement | string;
+  enableAutoClose: boolean;
   hasIcon: boolean;
   iconName: string;
   id: string;
@@ -254,6 +257,13 @@ class Toast extends BaseComponent {
     );
 
     this.isShown = true;
+
+    if (config.enableAutoClose) {
+      const timeoutId = setTimeout(() => {
+        this.hide();
+        clearInterval(timeoutId);
+      }, config.autoCloseInterval || TOAST_AUTO_CLOSE_INTERVAL);
+    }
   }
 
   finishHiding = (): void => {

diff --git a/packages/web/src/js/constants.ts b/packages/web/src/js/constants.ts
@@ -12,3 +12,5 @@ export const CLASS_NAME_HIDDEN = 'is-hidden';
 export const CLASS_NAME_OPEN = 'is-open';
 export const CLASS_NAME_TRANSITIONING = 'is-transitioning';
 export const CLASS_NAME_VISIBLE = 'is-visible';
+
+export const TOAST_AUTO_CLOSE_INTERVAL = 3000;
diff --git a/packages/web/src/scss/components/Toast/dynamic-toast.mjs b/packages/web/src/scss/components/Toast/dynamic-toast.mjs
@@ -3,9 +3,11 @@ import Toast from '../../../js/Toast';
 export const addDynamicToast = (event, containerId) => {
   const formElement = event.target.closest('form');
   const config = {
+    autoCloseInterval: formElement.querySelector('#toast-auto-close-interval').value,
     color: formElement.querySelector('#toast-color').value,
     containerId: containerId,
     content: formElement.querySelector('#toast-content').value,
+    enableAutoClose: formElement.querySelector('#toast-enable-auto-close').checked,
     hasIcon: formElement.querySelector('#toast-has-icon').checked,
     id: `my-dynamic-toast-${Date.now()}`,
     isDismissible: formElement.querySelector('#toast-is-dismissible').checked,

diff --git a/packages/web/src/scss/components/Toast/index.html b/packages/web/src/scss/components/Toast/index.html
@@ -138,6 +138,18 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
       import { addDynamicToast, clearQueue } from './dynamic-toast.mjs';
       window.addDynamicToast = addDynamicToast;
       window.clearQueue = clearQueue;
+
+      // Disable interval field if auto close is not checked.
+
+      const autoCloseIntervalField = document.getElementById('toast-auto-close-interval');
+      const enableAutoCloseCheckbox = document.getElementById('toast-enable-auto-close');
+
+      enableAutoCloseCheckbox.addEventListener('change', (event) => {
+        autoCloseIntervalField.disabled = !event.target.checked;
+      });
+
+      // Initialize the field state.
+      autoCloseIntervalField.disabled = !enableAutoCloseCheckbox.checked;
     </script>
 
     <form>
@@ -173,6 +185,16 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
               <span class="Checkbox__label">Dismissible</span>
             </span>
           </label>
+          <label for="toast-enable-auto-close" class="Checkbox">
+            <input type="checkbox" id="toast-enable-auto-close" class="Checkbox__input" name="enable-auto-close" autocomplete="off" checked />
+            <span class="Checkbox__text">
+              <span class="Checkbox__label">Enable AutoClose</span>
+            </span>
+          </label>
+          <div class="TextField">
+            <label for="textFieldDefault" class="TextField__label">AutoClose interval (ms)</label>
+            <input type="number" min="0" max="60000" step="500" value="3000" id="toast-auto-close-interval" name="auto-close-interval" class="TextField__input" name="default" />
+          </div>
           <div class="TextArea">
             <label for="toast-content" class="TextArea__label">Message</label>
             <textarea id="toast-content" class="TextArea__input" autocomplete="off">This is a new toast message.</textarea>