Feat(web-twig): Add autoclose feature to Toast component

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

Hide file tree

Showing 3 changed files with 39 additions and 2 deletions.
diff --git a/apps/web-twig-demo/assets/scripts/toast-dynamic.ts b/apps/web-twig-demo/assets/scripts/toast-dynamic.ts
@@ -3,9 +3,11 @@ import { Toast } from '@lmc-eu/spirit-web/src/js/index.esm';
 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,
     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,
@@ -27,7 +29,7 @@ export const clearQueue = (event, containerId) => {
 
     if (instance instanceof Toast && instance?.isShown) {
       instance?.hide();
-      cleared++;
+      cleared += 1;
     }
   });
 
@@ -38,6 +40,13 @@ export const clearQueue = (event, containerId) => {
   }
 };
 
+declare global {
+  interface Window {
+    addDynamicToast: (event: Event, containerId: string) => void;
+    clearQueue: (event: Event, containerId: string) => void;
+  }
+}
+
 // Make functions available in the global scope
 window.addDynamicToast = addDynamicToast;
 window.clearQueue = clearQueue;

diff --git a/packages/web-twig/src/Resources/components/Toast/README.md b/packages/web-twig/src/Resources/components/Toast/README.md
@@ -326,11 +326,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-twig/src/Resources/components/Toast/stories/ToastDynamicToastQueue.twig b/packages/web-twig/src/Resources/components/Toast/stories/ToastDynamicToastQueue.twig
@@ -21,6 +21,20 @@
     };
 </script>
 
+<!-- Dynamic queue demo: start -->
+<script type="module">
+    // 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>
     <fieldset onchange="setToastCollapsing(event, '#toast-example')" style="border: 0;">
         <Checkbox name="is-collapsible" autocomplete="off" id="toast-is-collapsible" isChecked label="Collapsible" />
@@ -58,6 +72,18 @@
             </Select>
             <Checkbox name="has-icon" autocomplete="off" id="toast-has-icon" isChecked label="Has icon" />
             <Checkbox name="is-dismissible" autocomplete="off" id="toast-is-dismissible" isChecked label="Dismissible" />
+            <Checkbox name="enable-auto-close" autocomplete="off" id="toast-enable-auto-close" isChecked label="Enable AutoClose" />
+            <TextField
+                autocomplete="off"
+                type="number"
+                min="0"
+                max="60000"
+                step="500"
+                label="AutoClose interval (ms)"
+                name="auto-close-interval"
+                id="toast-auto-close-interval"
+                value="3000"
+            />
             <TextArea
                 autocomplete="off"
                 label="Message"