Feat(web, web-twig, web-react) Toast AutoClose #DS-1251

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;

packages/web-react/src/components/Toast/README.md

@@ -353,9 +353,11 @@ const { show } = useToast();
          │                 ┌─⫸ ToastBar ID (required)
          │                 │
 show('Toast message', 'toast-id', {
+  autoCloseInterval: 3000  // Set interval in ms after ToastBar will be closed, default: 3000
   color: 'danger',         // Color variant, default: 'inverted'
-  iconName: 'download',    // Name of a custom icon to be shown along the message, default: undefined
+  enableAutoClose: true    // If true, ToastBar will close after `autoCloseInterval`, default: true
   hasIcon: true            // If true, an icon is shown along the message, default: false \*
+  iconName: 'download',    // Name of a custom icon to be shown along the message, default: undefined
   isDismissible: true      // If true, ToastBar can be dismissed by user, default: false
 });
 ```

packages/web-react/src/components/Toast/ToastContext.tsx

@@ -1,16 +1,20 @@
 import React, { FC, ReactNode, createContext, useCallback, useMemo, useReducer } from 'react';
 import { ToastColorType } from '../../types';
+import { delayedCallback } from '../../utils';
+import { DEFAULT_TOAST_AUTO_CLOSE_INTERVAL } from './constants';
 
 type ToastState = {
   queue: ToastItem[];
 };
 
 export interface ToastItem {
-  color: ToastColorType | undefined;
-  iconName: string | undefined;
+  autoCloseInterval?: number;
+  color?: ToastColorType;
+  enableAutoClose?: boolean;
   hasIcon: boolean;
-  isDismissible: boolean;
+  iconName?: string;
   id: string;
+  isDismissible: boolean;
   isOpen: boolean;
   message: string | JSX.Element;
 }
@@ -22,7 +26,14 @@ export interface ToastContextType extends ToastState {
   show: (
     text: string | JSX.Element,
     id: string,
-    options?: { color?: ToastColorType; iconName?: string; hasIcon?: boolean; isDismissible?: boolean },
+    options?: {
+      autoCloseInterval?: number;
+      color?: ToastColorType;
+      enableAutoClose?: boolean;
+      hasIcon?: boolean;
+      iconName?: string;
+      isDismissible?: boolean;
+    },
   ) => void;
 }
 
@@ -42,7 +53,14 @@ type ActionType =
       payload: {
         text: string | JSX.Element;
         toastId: string;
-        options?: { color?: ToastColorType; iconName?: string; hasIcon?: boolean; isDismissible?: boolean };
+        options?: {
+          autoCloseInterval?: number;
+          color?: ToastColorType;
+          enableAutoClose?: boolean;
+          hasIcon?: boolean;
+          iconName?: string;
+          isDismissible?: boolean;
+        };
       };
     }
   | { type: 'hide'; payload: { id: string } }
@@ -58,7 +76,9 @@ const reducer = (state: ToastState, action: ActionType): ToastState => {
       const newQueue = [
         ...currentQueue,
         {
+          autoCloseInterval: payload.options?.autoCloseInterval || DEFAULT_TOAST_AUTO_CLOSE_INTERVAL,
           color: payload.options?.color || undefined,
+          enableAutoClose: payload.options?.enableAutoClose || true,
           hasIcon: payload.options?.hasIcon || false,
           iconName: payload.options?.iconName,
           id: payload.toastId,
@@ -95,42 +115,58 @@ export const ToastProvider: FC<ToastProviderProps> = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialToastState);
   const { queue } = state;
 
+  const hide = useCallback((id: string) => {
+    dispatch({ type: 'hide', payload: { id } });
+  }, []);
+
+  const clear = useCallback(() => {
+    dispatch({ type: 'clear', payload: null });
+  }, []);
+
   const show = useCallback(
     (
       text: string | JSX.Element,
       toastId: string,
-      options?: { color?: ToastColorType; iconName?: string; hasIcon?: boolean; isDismissible?: boolean },
+      options?: {
+        autoCloseInterval?: number;
+        color?: ToastColorType;
+        enableAutoClose?: boolean;
+        hasIcon?: boolean;
+        iconName?: string;
+        isDismissible?: boolean;
+      },
     ) => {
       dispatch({ type: 'show', payload: { text, toastId, options } });
+
+      options?.enableAutoClose &&
+        delayedCallback(() => hide(toastId), options?.autoCloseInterval || DEFAULT_TOAST_AUTO_CLOSE_INTERVAL);
     },
     [],
   );
-
-  const hide = useCallback((id: string) => {
-    dispatch({ type: 'hide', payload: { id } });
-  }, []);
-
-  const clear = useCallback(() => {
-    dispatch({ type: 'clear', payload: null });
-  }, []);
-
   const setQueue = useCallback((newQueue: ToastItem[]) => {
     dispatch({ type: 'clear', payload: null });
 
     newQueue.forEach((item) => {
+      const enableAutoClose = item.enableAutoClose ?? true;
+      const autoCloseInterval = item.autoCloseInterval || DEFAULT_TOAST_AUTO_CLOSE_INTERVAL;
+
       dispatch({
         type: 'show',
         payload: {
           text: item.message,
           toastId: item.id,
           options: {
+            autoCloseInterval,
+            enableAutoClose,
             color: item.color,
+            hasIcon: item.hasIcon || false,
             iconName: item.iconName,
-            hasIcon: item.hasIcon,
-            isDismissible: item.isDismissible,
+            isDismissible: item.isDismissible || false,
           },
         },
       });
+
+      enableAutoClose && delayedCallback(() => hide(item.id), autoCloseInterval || DEFAULT_TOAST_AUTO_CLOSE_INTERVAL);
     });
   }, []);
 

packages/web-react/src/components/Toast/UncontrolledToast.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
+import { UncontrolledToastProps } from '../../types';
 import Toast from './Toast';
 import ToastBar from './ToastBar';
 import { useToast } from './useToast';
-import { UncontrolledToastProps } from '../../types';
 
 const UncontrolledToast = (props: UncontrolledToastProps) => {
   const { alignmentX, alignmentY, isCollapsible, closeLabel, ...restProps } = props;

packages/web-react/src/components/Toast/constants.ts

@@ -12,3 +12,5 @@ export const ICON_BOX_SIZE = 20;
 export const TOAST_BAR_CLOSE_BUTTON_LABEL_DEFAULT = 'Close';
 
 export const DEFAULT_TOAST_COLOR = 'inverted';
+
+export const DEFAULT_TOAST_AUTO_CLOSE_INTERVAL = 3000; // milliseconds

packages/web-react/src/components/Toast/demo/ToastDynamicToastQueue.tsx

@@ -11,6 +11,7 @@ import { TextField } from '../../TextField';
 import Toast from '../Toast';
 import ToastBar from '../ToastBar';
 import { ToastItem, ToastProvider } from '../ToastContext';
+import { DEFAULT_TOAST_AUTO_CLOSE_INTERVAL } from '../constants';
 import { useToast } from '../useToast';
 
 const ToastDynamicToastQueue = () => {
@@ -20,6 +21,8 @@ const ToastDynamicToastQueue = () => {
   const [colorValue, setColorValue] = useState<ToastColorType>('inverted');
   const [hasIconValue, setHasIconValue] = useState(true);
   const [isDismissibleValue, setIsDismissibleValue] = useState(true);
+  const [enableAutoCloseValue, setEnableAutoCloseValue] = useState(true);
+  const [autoCloseInterval, setAutoCloseInterval] = useState(DEFAULT_TOAST_AUTO_CLOSE_INTERVAL);
   const [messageValue, setMessageValue] = useState('This is a new toast message.');
 
   const { queue, show, hide, clear, setQueue } = useToast();
@@ -40,6 +43,7 @@ const ToastDynamicToastQueue = () => {
       hasIcon: true,
       isDismissible: true,
       iconName: undefined,
+      enableAutoClose: false,
     },
     {
       id: '2',
@@ -56,6 +60,7 @@ const ToastDynamicToastQueue = () => {
       hasIcon: true,
       isDismissible: true,
       iconName: undefined,
+      enableAutoClose: false,
     },
   ];
 
@@ -174,6 +179,25 @@ const ToastDynamicToastQueue = () => {
               isChecked={isDismissibleValue}
               onChange={() => setIsDismissibleValue(!isDismissibleValue)}
             />
+            <Checkbox
+              name="enable-autoClose"
+              id="toast-enable-autoClose"
+              label="Enable AutoClose"
+              isChecked={enableAutoCloseValue}
+              onChange={() => setEnableAutoCloseValue(!enableAutoCloseValue)}
+            />
+            <TextField
+              type="number"
+              min="0"
+              max="60000"
+              step="500"
+              value={autoCloseInterval}
+              onChange={(e) => setAutoCloseInterval(Number(e.currentTarget.value))}
+              isDisabled={!enableAutoCloseValue}
+              label="AutoClose interval (ms)"
+              name="autoCloseInterval"
+              id="toast-auto-close-interval"
+            />
             <TextArea
               label="Message"
               name="content"
@@ -186,9 +210,11 @@ const ToastDynamicToastQueue = () => {
               <Button
                 onClick={() => {
                   show(messageValue, `my-dynamic-toast-${Date.now().toString()}`, {
+                    autoCloseInterval,
                     color: colorValue,
                     hasIcon: hasIconValue,
                     isDismissible: isDismissibleValue,
+                    enableAutoClose: enableAutoCloseValue,
                   });
                 }}
               >
@@ -227,7 +253,7 @@ const ToastDynamicToastQueue = () => {
               iconName={iconName}
               isDismissible={isDismissible}
               onClose={() => hide(id)}
-              isOpen={!!isOpen && !!message}
+              isOpen={isOpen && !!message}
             >
               {message}
             </ToastBar>

packages/web-react/src/components/Toast/demo/UncontrolledToastDemo.tsx

@@ -44,6 +44,8 @@ const ShowToastButton = () => {
             iconName: 'download',
             isDismissible: true,
             hasIcon: true,
+            enableAutoClose: true,
+            autoCloseInterval: 1500,
           });
         }}
       >

packages/web-react/src/components/Toast/stories/ToastBar.stories.tsx

@@ -20,6 +20,9 @@ const meta: Meta<typeof ToastBar> = {
     },
     closeLabel: {
       control: 'text',
+      table: {
+        defaultValue: { summary: 'Close' },
+      },
     },
     color: {
       control: 'select',