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

lmc-eu · May 16, 2024 · add117e · add117e
1 parent fc52ea0
commit add117e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 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;
     }
   });
 
@@ -39,7 +41,7 @@ export const clearQueue = (event, containerId) => {
 };
 
 // Make functions available in the global scope
-window.addDynamicToast = addDynamicToast;
-window.clearQueue = clearQueue;
+(window as any).addDynamicToast = addDynamicToast;
+(window as any).clearQueue = clearQueue;
 
 export default addDynamicToast;
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="10000"
+                step="500"
+                label="AutoClose interval (ms)"
+                name="auto-close-interval"
+                id="toast-auto-close-interval"
+                value="3000"
+            />
             <TextArea
                 autocomplete="off"
                 label="Message"