funda-ui 4.7.624 → 4.7.625

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

@@ -1,165 +0,0 @@
-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

@@ -1,391 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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;
-};