funda-ui 4.7.615 → 4.7.624

package/publish/lib/esm/Toast/Item.tsx

@@ -0,0 +1,165 @@
+import React, { useRef, forwardRef } from 'react';
+
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
+export interface ItemProps extends React.ComponentPropsWithoutRef<any> {
+    depth: number;
+    index: number;
+    isNew: boolean;
+    uniqueID: string;
+
+    //
+    onlyOne?: boolean;
+    title?: string | React.ReactNode | boolean;
+    note?: string | React.ReactNode | boolean;
+    theme?: string | undefined;
+    message?: string | React.ReactNode;
+    schemeBody?: string;
+    schemeHeader?: string;
+    closeBtnColor?: string;
+    closeDisabled?: boolean;
+    autoCloseTime?: boolean | number;
+    lock?: boolean;
+    cascading?: boolean;
+    evStart?: (e: any) => void;
+    evPause?: (e: any) => void;
+    evClose?: (e: any, index: number, currentItem: HTMLDivElement) => void;
+    
+};
+
+const Item = forwardRef((props: ItemProps, externalRef: any) => {
+
+    const {
+        depth,
+        index,
+        isNew,
+        uniqueID,
+
+        //
+        onlyOne,
+        title,
+        note,
+        theme,
+        message,
+        lock,
+        cascading,
+        schemeBody,
+        schemeHeader,
+        closeBtnColor,
+        closeDisabled,
+        autoCloseTime,
+        evStart,
+        evPause,
+        evClose
+    } = props;
+
+    
+    const containerRef = useRef<HTMLDivElement>(null);
+    const hideTitle: boolean = (title === '' || title === false) && (note === '' || note === false);
+
+    return (
+        <>
+
+            <div
+                ref={containerRef}
+                id={`toast-${uniqueID}`}
+                data-toast-id={uniqueID}
+                data-new={isNew}
+                data-index={index}
+                className={combinedCls(
+                    'toast-container',
+                    {
+                        'only-one': onlyOne
+                    }
+                )} 
+                style={cascading ? {
+                    transform: `perspective(100px) translateZ(-${2 * index}px) translateY(${35 * index}px)`,
+                    zIndex: depth
+                } : {
+                    zIndex: depth
+                }}
+                onMouseEnter={evPause}
+                onMouseLeave={evStart}
+            >
+
+                {/* Bootstrap toast */}
+                <div 
+                    className={combinedCls(
+                        `toast fade show ${theme ? `bg-${theme}` : ''}`,
+                        clsWrite(schemeBody, '')
+                    )} 
+                    role="alert"
+                >
+                    {hideTitle ? null : <>
+                        <div 
+                            className={combinedCls(
+                                'toast-header',
+                                clsWrite(schemeHeader, '')
+                            )}
+                        >
+                            <strong className="me-auto">{title === '' || title === false ? '' : <>{title}</>}</strong>
+                            <small className="text-muted">{note === '' || note === false ? '' : <>{note}</>}</small>
+                            {!lock ? <>{!closeDisabled ? <button 
+                                data-close="1" 
+                                data-index={index} 
+                                tabIndex={-1} 
+                                type="button" 
+                                className="btn-close"
+                                onClick={(e: React.MouseEvent) => {
+                                    evClose?.(e, index, containerRef.current as HTMLDivElement);
+                                }}
+                            >
+                                <svg width="12px" height="12px" viewBox="0 0 16 16"><path fill={`${closeBtnColor ? closeBtnColor : '#000000'}`} d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z" fillRule="evenodd"></path></svg>
+                            </button> : null}</> : null}
+
+                        </div>
+                    </>}
+
+                    <div className="toast-body">
+                        {message}
+
+                        {hideTitle ? <>
+                            {!closeDisabled ? <button 
+                                data-close="1" 
+                                data-index={index} 
+                                tabIndex={-1} 
+                                type="button" 
+                                className="btn-close position-absolute top-0 end-0 me-2 mt-2"
+                                onClick={(e: React.MouseEvent) => {
+                                    evClose?.(e, index, containerRef.current as HTMLDivElement);
+                                }}
+                            >
+                                <svg width="12px" height="12px" viewBox="0 0 16 16"><path fill={`${closeBtnColor ? closeBtnColor : '#000000'}`} d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z" fillRule="evenodd"></path></svg>
+                            </button> : null}
+                        </> : null}
+
+
+                        {/* PROGRESS */}
+                        <div 
+                            ref={externalRef} 
+                            data-progress-index={index} 
+                            className={combinedCls(
+                                'progress active toast-progress',
+                                {
+                                    'd-none': autoCloseTime === false
+                                }
+                            )}
+                            role="progressbar"
+                        >
+                            <div className="progress-bar"></div>
+                        </div>
+                        {/* /PROGRESS */}
+
+
+                    </div>
+                </div>
+
+            </div>
+
+        </>
+    )
+});
+
+
+export default Item;

package/publish/lib/esm/Toast/Toast.tsx

@@ -0,0 +1,391 @@
+import React, { useRef, useEffect, useState, useCallback } from 'react';
+
+
+import RootPortal from 'funda-root-portal';
+import useComId from 'funda-utils/dist/cjs/useComId';
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
+import Item from './Item';
+
+import type { ToastOptions } from './types';
+
+export interface ToastProps {
+    data: Array<ToastOptions>;
+    
+    // default props
+    defaultWrapperClassName?: string;
+    defaultOnlyShowOne?: boolean;
+    defaultDirection?: ToastOptions['direction'];
+    defaultCascading?: boolean;
+    defaultReverseDisplay?: boolean;
+
+    onUpdate?: (updatedData: Array<ToastOptions>) => void; 
+}
+
+
+export const Toast: React.FC<ToastProps> = ({ 
+    data, 
+
+    // default props
+    defaultWrapperClassName,
+    defaultOnlyShowOne,
+    defaultDirection,
+    defaultCascading,
+    defaultReverseDisplay,
+
+    onUpdate,
+}) => {
+    const ANIM_SPEED = 300;
+    const DEFAULT_AUTO_CLOSE_TIME = 3000;
+    const uniqueID = useComId();
+    const rootRef = useRef<any>(null);
+
+    // action id
+    const [currentActionId, setCurrentActionId] = useState<string | number | null | undefined>(undefined);
+
+    // 追踪每个 toast 的动画状态
+    const [animatedToasts, setAnimatedToasts] = useState<Set<string>>(new Set());
+
+    // force display
+    const [initPopRoot, setInitPopRoot] = useState<boolean>(false);
+
+    // Get the global configuration from the first toast item (if it exists)
+    const firstToast = data[0] || {};
+    
+    // Use default values but allow individual toast overrides
+    const wrapperClassName = firstToast.wrapperClassName || defaultWrapperClassName;
+    const direction = firstToast.direction || defaultDirection;
+    const cascadingEnabled = typeof firstToast.cascading !== 'undefined' ? firstToast.cascading : defaultCascading;
+    const onlyShowOne = typeof firstToast.onlyShowOne !== 'undefined' ? firstToast.onlyShowOne : defaultOnlyShowOne;
+    const reverseDisplay = typeof firstToast.reverseDisplay !== 'undefined' ? firstToast.reverseDisplay : defaultReverseDisplay;
+
+    const depth: number = data.length + 1;
+
+    // Processes the order of data based on the "direction" and "reverseDisplay" parameters
+    const getProcessedData = useCallback(() => {
+        let processedData = [...data];
+      
+        if (
+            (direction?.startsWith('top-') || direction?.startsWith('vertical-')) && 
+            reverseDisplay
+        ) {
+            processedData.reverse();
+        } else if (
+            direction?.startsWith('bottom-') && 
+            !reverseDisplay
+        ) {
+            processedData.reverse();
+        }
+
+        // If only one is displayed, only the last one is returned
+        return onlyShowOne ? [processedData[processedData.length - 1]] : processedData;
+    }, [data, direction, reverseDisplay, onlyShowOne]);
+
+
+
+    // Store the status of each toast
+    const progressPausedRef = useRef<Map<string, boolean>>(new Map());
+    const progressObjRef = useRef<Map<string, any>>(new Map());
+    const progressIntervalRef = useRef<Map<string, NodeJS.Timeout | null>>(new Map());
+
+    const startProgressTimer = useCallback((el: any, toastId: string, i: number) => {
+        // If the toast already has a timer running, do not add it again
+        if (progressIntervalRef.current.has(toastId)) {
+            return;
+        }
+        const currentToast = data[i];
+
+        // progress animation
+        const PROGRESS_TRANSITION_TIME: any = typeof (currentToast.autoCloseTime) === 'undefined' || currentToast.autoCloseTime === false ? DEFAULT_AUTO_CLOSE_TIME as number : currentToast.autoCloseTime;
+
+        // init progress
+        let progressCurrentChunk = 100 / (PROGRESS_TRANSITION_TIME / 100);
+        el.firstChild.style.width = 100 + '%';
+        el.firstChild.ariaValueNow = 100;
+
+        // animation
+        const intervalId = setInterval(() => {
+            // console.log('toast setInterval');
+
+
+            if (!progressPausedRef.current.get(toastId)) {
+                const progPercent = 100 - progressCurrentChunk;
+
+                el.firstChild.style.width = progPercent + '%';
+                el.firstChild.ariaValueNow = progPercent;
+                progressCurrentChunk++;
+
+
+                //
+                if (progPercent === 0 || progPercent < 1) { // may be 0.xxx
+                    el.classList.add('complete');
+
+                    // stop current animation
+                    stopProgressTimer(toastId);
+
+                    // hide toast item
+                    const currentItem = el.closest('.toast-container');
+                    handleClose(null, i, currentItem);
+                }
+            }
+        }, PROGRESS_TRANSITION_TIME / 100);
+
+        // Save the timer ID
+        progressIntervalRef.current.set(toastId, intervalId);
+
+    }, [data]);
+
+    const clearAllProgressTimer = useCallback(() => {
+        progressIntervalRef.current.forEach((timer, id) => {
+            if (timer) {
+                clearInterval(timer);
+                progressIntervalRef.current.set(id, null);
+            }
+        });
+        progressIntervalRef.current.clear();
+    }, []);
+
+    const stopProgressTimer = useCallback((toastId: string) => {
+        const timer = progressIntervalRef.current.get(toastId);
+        if (timer) {
+            clearInterval(timer);
+            progressIntervalRef.current.delete(toastId);
+        }
+    }, []);
+
+
+    function handleProgressPaused(e: any) {
+        const toastId = e.currentTarget.dataset.toastId;
+        progressPausedRef.current.set(toastId, true);
+    }
+
+    function handleProgressStart(e: any) {
+        const toastId = e.currentTarget.dataset.toastId;
+        progressPausedRef.current.set(toastId, false);
+    }
+
+    function handleClose(e: any, index: number, currentItem: HTMLDivElement) {
+        if (typeof e !== 'undefined' && e !== null) e.preventDefault();
+        if (rootRef.current === null) return;
+
+        const curIndex = Number(index);
+        const currentToast = data[curIndex];
+        const toastId = currentToast.id as string;
+        const _list: HTMLDivElement[] = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
+        currentItem.classList.add('hide-start');
+
+
+        //Let the removed animation show
+        setTimeout(() => {
+            _list.forEach((node: any) => {
+                node.classList.remove('hide-start');
+            });
+
+            // remove current
+            currentItem.classList.add('hide-end');
+
+            // rearrange
+            if (cascadingEnabled) {
+                _list.filter((node: any) => !node.classList.contains('hide-end'))
+                    .forEach((node: any, k: number) => {
+                        node.style.transform = `perspective(100px) translateZ(-${2 * k}px) translateY(${35 * k}px)`;
+                    });
+            }
+
+
+            // stop all animations or current animation
+            stopProgressTimer(toastId);
+
+            // close callback
+            const currentToast = data[curIndex];
+            if (currentToast.onClose) {
+                currentToast.onClose(
+                    rootRef.current,
+                    curIndex,
+                    _list.filter((node: HTMLDivElement) => !node.classList.contains('hide-end'))
+                );
+            }
+
+            // After the animation ends, remove the item from the data source
+            if (onUpdate) {
+                const newData = [...data];
+                newData.splice(curIndex, 1);
+                onUpdate(newData);
+            }
+
+
+
+        }, ANIM_SPEED);
+    }
+
+    useEffect(() => {
+        if (initPopRoot) {
+            const $toast = rootRef.current;
+            if (!$toast) return;
+
+            // When "onlyShowOne" is true, only the latest toast is kept
+            //--------------
+            if (onlyShowOne && data.length > 1) {
+                // Clear all old timers
+                data.slice(0, -1).forEach((toast, index) => {
+                    stopProgressTimer(toast.id as string);
+                });
+
+                //Only keep the latest toast
+                if (onUpdate) {
+                    onUpdate([data[data.length - 1]]);
+                }
+                
+                return;
+            }
+
+
+            // Auto hide
+            //--------------
+            data.forEach((toast, i) => {
+                // auto close
+                const AUTO_CLOSE_TIME: any = typeof (toast.autoCloseTime) === 'undefined' || toast.autoCloseTime === false ? false : toast.autoCloseTime;
+                
+                if (AUTO_CLOSE_TIME !== false) {
+                    const el = progressObjRef.current.get(toast.id as string);
+                    if (el) {
+                        startProgressTimer(el, toast.id as string, i);
+                    }
+                }
+            });
+
+        }
+
+    }, [data, initPopRoot, onlyShowOne]);
+
+    // Handling animation when data changes
+    useEffect(() => {
+        if (initPopRoot && data.length > 0) {
+            // Add animation to the new toast
+            const newToasts = data.filter(toast => !animatedToasts.has(toast.id as string));
+            
+            if (newToasts.length > 0) {
+                // Keep the new toast hidden first
+                newToasts.forEach(toast => {
+                    const progressEl = progressObjRef.current.get(toast.id as string);
+                    if (progressEl) {
+                        const currentItem = progressEl.closest('.toast-container');
+                        currentItem.classList.add('animate-ready');
+                    }
+                });
+
+                // Use "requestAnimationFrame" to ensure the DOM is updated before adding animation classes
+                requestAnimationFrame(() => {
+                    setTimeout(() => {
+                        newToasts.forEach(toast => {
+                            const progressEl = progressObjRef.current.get(toast.id as string);
+                            if (progressEl) {
+                                const currentItem = progressEl.closest('.toast-container');
+                                currentItem.classList.remove('animate-ready');
+                                currentItem.classList.add('animate-in');
+                            }
+                        });
+                        
+                        // Update the animated toast list
+                        setAnimatedToasts(prev => {
+                            const newSet = new Set(prev);
+                            newToasts.forEach(toast => newSet.add(toast.id as string));
+                            return newSet;
+                        });
+                    }, 50); // A small delay ensures that animate-ready styles are applied
+                });
+            }
+        }
+    }, [data, initPopRoot]);
+
+    // Monitor the currently displayed toast id
+    useEffect(() => {
+        if (onlyShowOne && data.length > 0) {
+            const latestToast = data[data.length - 1];
+            setCurrentActionId(latestToast.actionId);
+        } else if (data.length > 0) {
+            const currentIds = data.map(toast => toast.actionId);
+            setCurrentActionId(currentIds[currentIds.length - 1]);
+        } else {
+            setCurrentActionId(null);
+        }
+    }, [data, onlyShowOne]);
+
+    // The timer and data are emptied each time "useToast().show()" is executed
+    useEffect(() => {
+        if (currentActionId === null || typeof currentActionId === 'undefined') return;
+        if (onUpdate) {
+            onUpdate([data[data.length - 1]]);
+        }
+
+        // Remove the global list of events, especially as scroll and interval.
+        //--------------
+        return () => {
+            clearAllProgressTimer();
+        };
+    }, [currentActionId]);
+
+
+    // init
+    useEffect(() => {
+        setInitPopRoot(true);
+
+        // Remove the global list of events, especially as scroll and interval.
+        //--------------
+        return () => {
+            clearAllProgressTimer();
+        };
+    }, []);
+
+
+    
+    
+    return (
+        <RootPortal show={initPopRoot} containerClassName="Toast">
+            <div
+                id={`toasts__wrapper-${uniqueID}`}
+                className={combinedCls(
+                    'toasts__wrapper',
+                    `toasts__wrapper--${direction}`,
+                    clsWrite(wrapperClassName, ''),
+                    {
+                        'toasts__wrapper--cascading': cascadingEnabled,
+                        'toasts__wrapper--only-one"': onlyShowOne
+                    }
+                )} 
+                ref={rootRef}
+            >
+                <div className="toasts">
+                    {getProcessedData().map((item, i) => (
+                        <Item
+                            ref={el => progressObjRef.current.set(item.id as string, el)}
+                            key={item.id}
+                            uniqueID={item.id}
+                            isNew={!progressObjRef.current.has(item.id as string)} // Mark the new toast
+                            onlyOne={data.length === 1}
+                            depth={depth - i}
+                            index={i}
+                            title={item.title}
+                            note={item.note}
+                            theme={item.theme}
+                            lock={item.lock}
+                            cascading={cascadingEnabled}
+                            schemeBody={item.schemeBody}
+                            schemeHeader={item.schemeHeader}
+                            closeBtnColor={item.closeBtnColor}
+                            closeDisabled={item.closeDisabled}
+                            message={item.message}
+                            autoCloseTime={item.autoCloseTime}
+                            evStart={handleProgressStart}
+                            evPause={handleProgressPaused}
+                            evClose={handleClose}
+                        />
+                    ))}
+                </div>
+            </div>
+        </RootPortal>
+    );
+};
+
+export default Toast;

package/publish/lib/esm/Toast/ToastContext.tsx

@@ -0,0 +1,104 @@
+import React, { createContext, useContext, useReducer } from 'react';
+import { Toast } from './Toast';
+import type { ToastOptions, ToastGlobalConfig } from './types';
+
+interface ToastItem extends ToastOptions {
+    id: string;
+}
+
+interface ToastContextState {
+    toasts: ToastItem[];
+    config: ToastGlobalConfig;
+}
+
+type ToastAction = 
+    | { type: 'ADD_TOAST'; payload: ToastItem }
+    | { type: 'REMOVE_TOAST'; payload: string }
+    | { type: 'REMOVE_ALL' }
+    | { type: 'UPDATE_CONFIG'; payload: ToastGlobalConfig };
+
+
+const defaultConfig: ToastGlobalConfig = {
+    defaultWrapperClassName: '',
+    defaultOnlyShowOne: false,
+    defaultDirection: 'bottom-center',
+    defaultCascading: false,
+    defaultReverseDisplay: false
+};
+
+
+const ToastContext = createContext<{
+    state: ToastContextState;
+    dispatch: React.Dispatch<ToastAction>;
+} | undefined>(undefined);
+
+const toastReducer = (state: ToastContextState, action: ToastAction): ToastContextState => {
+    switch (action.type) {
+        case 'ADD_TOAST':
+            return {
+                ...state,
+                toasts: [...state.toasts, action.payload],
+            };
+        case 'REMOVE_TOAST':
+            return {
+                ...state,
+                toasts: state.toasts.filter((toast) => toast.id !== action.payload),
+            };
+        case 'REMOVE_ALL':
+            return {
+                ...state,
+                toasts: [],
+            };
+        case 'UPDATE_CONFIG':
+            return {
+                ...state,
+                config: { ...state.config, ...action.payload }
+            };
+        default:
+            return state;
+    }
+};
+
+export const ToastProvider: React.FC<{ 
+    children: React.ReactNode;
+    config?: ToastGlobalConfig;
+}> = ({ children, config = {} }) => {
+    const [state, dispatch] = useReducer(toastReducer, { 
+        toasts: [],
+        config: { ...defaultConfig, ...config }
+    });
+
+    return (
+        <ToastContext.Provider value={{ state, dispatch }}>
+            {children}
+            <Toast 
+                data={state.toasts} 
+
+                // default props
+                defaultWrapperClassName={state.config.defaultWrapperClassName}
+                defaultDirection={state.config.defaultDirection}
+                defaultOnlyShowOne={state.config.defaultOnlyShowOne}
+                defaultCascading={state.config.defaultCascading}
+                defaultReverseDisplay={state.config.defaultReverseDisplay}
+
+                //
+                onUpdate={(updatedData) => {
+                    // Iterate through the current toasts and remove the toasts that are not in the "updatedData"
+                    state.toasts.forEach(toast => {
+                        if (!updatedData.find(item => item.id === toast.id)) {
+                            dispatch({ type: 'REMOVE_TOAST', payload: toast.id });
+                        }
+                    });
+                }} 
+            />
+        </ToastContext.Provider>
+    );
+};
+
+export const useToastContext = () => {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToastContext must be used within a ToastProvider');
+    }
+    return context;
+};