Feat(web): Add autoclose feature to Toast component

lmc-eu · May 21, 2024 · 4de4151 · 4de4151
1 parent a87c94f
commit 4de4151
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 3 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; // milliseconds
diff --git a/packages/web/src/scss/components/Toast/README.md b/packages/web/src/scss/components/Toast/README.md
@@ -373,11 +373,13 @@ Then configure and create a new Toast instance and call the `show` method on it,
 import Toast from '@lmc-eu/spirit-web/dist/js/Toast';
 
 const toast = new Toast(null, {
+  autoCloseInterval: 3000 // Set interval after ToastBar will be closed in ms, default: 3000
   color: 'informative', // One of ['inverted' (default), 'success', 'warning, 'danger', 'informative']
   containerId: 'toast-example', // Must match the ID of the Toast container in HTML
   content: 'Hello, this is my toast message!', // Can be plain text or HTML
+  enableAutoClose: true, // If true, ToastBar will close after `autoCloseInterval`, default: true
   hasIcon: true,
-  // iconName: 'info', // Optional icon name used as the #fragment in the SVG sprite URL
+  iconName: 'info', // Optional icon name used as the #fragment in the SVG sprite URL
   id: 'my-toast', // An ID is required for dismissible ToastBar
   isDismissible: true,
 });

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 = {
+    containerId,
+    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,
@@ -29,7 +31,7 @@ export const clearQueue = (event, containerId) => {
 
     if (instance instanceof Toast && instance?.isShown) {
       instance?.hide();
-      cleared++;
+      cleared += 1;
     }
   });
 

diff --git a/packages/web/src/scss/components/Toast/index.html b/packages/web/src/scss/components/Toast/index.html
@@ -138,6 +138,17 @@ <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>