funda-ui 4.7.111 → 4.7.125

package/lib/esm/SplitterPanel/index.scss

@@ -0,0 +1,82 @@
+
+  /* ======================================================
+    <!-- Splitter Panel -->
+/* ====================================================== */
+.splitter-panel {
+
+    --splitter-panel-divider-color: rgba(0, 0, 0, 0.15);
+    --splitter-panel-divider-hover-color: rgba(210, 253, 253, .86);
+
+    display: flex;
+    position: relative;
+
+    .splitter-panel-left {
+        width: var(--splitter-panel-left-w, 0);
+    }
+
+    .splitter-panel-divider {
+        position: relative;
+        width: 1px;
+        cursor: col-resize;
+        padding: 0 2px;
+        transition: all 0.25s;
+        z-index: 1;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 1px;
+            height: 100%;
+            background: var(--splitter-panel-divider-color);
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -2px;
+            width: 5px;
+            height: 100%;
+        }
+
+
+        &:hover::after {
+            background: var(--splitter-panel-divider-hover-color);
+        }
+    }
+
+
+    .splitter-panel-right {
+        flex: 1;
+    }
+
+
+}
+
+
+
+.splitter-panel-vertical {
+    display: flex;
+    flex-direction: column;
+
+    .splitter-panel-top,
+    .splitter-panel-bottom {
+        min-height: 50px;
+    }
+
+}
+
+
+@media (max-width: 767px) {
+    .splitter-panel {
+        display: none !important;
+    }
+}
+
+@media (min-width: 768px) {
+    .splitter-panel-vertical {
+        display: none !important;
+    }
+}

package/lib/esm/SplitterPanel/index.tsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useState, useRef, useImperativeHandle } from 'react';
+
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+import useIsMobile from 'funda-utils/dist/cjs/useIsMobile';
+
+
+interface SplitterPanelSubProps {
+    children: React.ReactNode;
+  }
+  
+  const SplitterPanelLeft: React.FC<SplitterPanelSubProps> = ({ children }) => <>{children}</>;
+  const SplitterPanelRight: React.FC<SplitterPanelSubProps> = ({ children }) => <>{children}</>;
+  
+  interface SplitterPanelProps {
+      wrapperClassName?: string;
+      draggable?: boolean
+      initialWidth?: number;
+      minWidth?: number;
+      maxWidth?: number;
+      onDrag?: (type: 'dragStart' | 'dragEnd' | 'drag', leftWidth: number) => void; 
+      children?: React.ReactNode;
+  }
+  
+
+  const SplitterPanel: React.FC<SplitterPanelProps> & {
+    Left: typeof SplitterPanelLeft;
+    Right: typeof SplitterPanelRight;
+  } = (props) => {
+      const {
+          wrapperClassName,
+          draggable = true,
+          maxWidth,
+          minWidth = 100,
+          initialWidth = 200,
+          onDrag,
+          children
+      } = props;
+      
+    const containerRef = useRef<HTMLDivElement>(null);
+    const dividerRef = useRef<HTMLDivElement>(null);
+    const getDefaultWidth = () => {
+        if (typeof initialWidth === 'number') return initialWidth;
+        if (typeof minWidth === 'number') return minWidth;
+        return 200;
+    };
+    const [leftWidth, setLeftWidth] = useState<number>(getDefaultWidth());
+    const isMobile = useIsMobile();
+
+    // adjust split panel
+    const [dragging, setDragging] = useState<boolean>(false);
+
+    // Update only when initialWidth changes and is valid, and only when it has not been dragged
+    const hasDragged = useRef(false);
+
+    let left: React.ReactNode = null;
+    let right: React.ReactNode = null;
+
+    React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child)) return;
+        if (child.type === SplitterPanelLeft) left = child.props.children;
+        if (child.type === SplitterPanelRight) right = child.props.children;
+    });
+
+
+
+    // dragdrop
+    function handleSplitPanelsChange(clientX: number) {
+        if (!containerRef.current) return;
+        const containerLeft = containerRef.current.getBoundingClientRect().left;
+        const separatorXPosition = clientX - containerLeft;
+        const minWidthValue = minWidth || 100;
+        const maxWidthValue = maxWidth || window.innerWidth / 2;
+        if (dragging && separatorXPosition > minWidthValue && separatorXPosition < maxWidthValue) {
+            setLeftWidth(separatorXPosition);
+            onDrag?.('drag', separatorXPosition);
+            hasDragged.current = true;
+        }
+    }
+    function handleMouseDownSplitPanels(e: React.MouseEvent) {
+        setDragging(true);
+        onDrag?.('dragStart', leftWidth ?? initialWidth);
+    }
+    function handleTouchStartSplitPanels(e: React.TouchEvent) {
+        setDragging(true);
+        onDrag?.('dragStart', leftWidth ?? initialWidth);
+    }
+
+    function handleMouseMoveSplitPanels(e: MouseEvent) {
+        handleSplitPanelsChange(e.clientX);
+    }
+    function handleTouchMoveSplitPanels(e: TouchEvent) {
+        handleSplitPanelsChange(e.touches[0].clientX);
+    }
+
+    function handleMouseUpSplitPanels() {
+        setDragging(false);
+        onDrag?.('dragEnd', leftWidth ?? initialWidth);
+    }
+
+
+    useEffect(() => {
+        if (!draggable) return;
+    
+        // 事件监听用原生事件
+        document.addEventListener('mousemove', handleMouseMoveSplitPanels, false);
+        document.addEventListener('touchmove', handleTouchMoveSplitPanels, false);
+        document.addEventListener('mouseup', handleMouseUpSplitPanels, false);
+        document.addEventListener('touchend', handleMouseUpSplitPanels, false);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMoveSplitPanels, false);
+            document.removeEventListener('touchmove', handleTouchMoveSplitPanels, false);
+            document.removeEventListener('mouseup', handleMouseUpSplitPanels, false);
+            document.removeEventListener('touchend', handleMouseUpSplitPanels, false);
+        };
+    }, [draggable, dragging]);
+
+    useEffect(() => {
+        if (!hasDragged.current && typeof initialWidth === 'number') {
+            setLeftWidth(initialWidth);
+        }
+    }, [initialWidth]);
+
+    return (
+        <>
+        
+        {isMobile ? <>
+            <div className={combinedCls(
+                'splitter-panel-vertical',
+                clsWrite(wrapperClassName, '')
+            )}>
+                <div className="splitter-panel-top">{left}</div>
+                <div className="splitter-panel-bottom">{right}</div>
+            </div>
+
+        </> : <>
+            <div
+                className={combinedCls(
+                    'splitter-panel',
+                    clsWrite(wrapperClassName, '')
+                )}
+                ref={containerRef}
+            >
+           
+                <div 
+                    className="splitter-panel-left"
+                    style={{ "--splitter-panel-left-w": `${leftWidth}px` } as React.CSSProperties}
+                >
+                    {left}
+                </div>
+             
+                {/*<!--DIVIDER-->*/}
+                <div
+                    ref={dividerRef}
+                    className={`splitter-panel-divider ${dragging ? 'dragging' : ''}`}
+                    onMouseDown={handleMouseDownSplitPanels}
+                    onTouchStart={handleTouchStartSplitPanels}
+                    onTouchEnd={handleMouseUpSplitPanels}
+                />
+                {/*<!--/DIVIDER-->*/}
+    
+                <div className="splitter-panel-right">
+                    {right}
+                </div>
+            </div>
+        </>}
+
+    </>
+    )
+};
+
+SplitterPanel.Left = SplitterPanelLeft;
+SplitterPanel.Right = SplitterPanelRight;
+
+export default SplitterPanel;

package/lib/esm/Stepper/index.tsx

@@ -257,6 +257,8 @@ const Stepper = forwardRef<StepperRef, StepperProps>((props, ref) => {
                 '--stepper-progress-height': `${progress}%`
             } as React.CSSProperties;
         } else {
+            
+            const defaultProgress = (activeIndex / (panels.length - 1)) * 100;
             const firstItem = stepItems[0] as HTMLDivElement;
             const lastItem = stepItems[stepItems.length - 1] as HTMLDivElement;
             if (!firstItem || !lastItem) return {};
@@ -269,10 +271,10 @@ const Stepper = forwardRef<StepperRef, StepperProps>((props, ref) => {
             if (!currentItem) return {};
 
             const currentCenter = currentItem.offsetLeft + (currentItem.clientWidth / 2);
-            const progress = ((currentCenter - firstCenter) / totalWidth) * 100;
+            const progress = defaultProgress !== 0 && activeIndex > 0 ? defaultProgress : ((currentCenter - firstCenter) / totalWidth) * 100;
 
             return {
-                '--stepper-progress-width': `${progress}%`
+                '--stepper-progress-width': `${isNaN(progress) ? 0 : progress}%`
             } as React.CSSProperties;
         }
     };

package/lib/esm/Utils/hooks/useHistoryTracker.tsx

@@ -0,0 +1,403 @@
+/**
+ * History Tracker
+ * 
+ * @usage:
+
+const App = () => {
+    const { 
+        history, 
+        forwardHistory,
+        currentUrl, 
+        firstUrl, 
+        clearHistory,
+        goBack
+    } = useHistoryTracker({
+        onChange: ({ 
+            isReady,
+            history, 
+            forwardHistory,
+            currentUrl, 
+            firstUrl, 
+            canGoBack,
+            canGoForward
+        } : { 
+            isReady: boolean;
+            history: string[];
+            forwardHistory: string[];
+            currentUrl: string;
+            firstUrl: string;
+            canGoBack: boolean;
+            canGoForward: boolean;
+        }) => {
+            console.log('--> onChange: ',
+                isReady,
+                history, 
+                forwardHistory,
+                currentUrl, 
+                firstUrl, 
+                canGoBack,
+                canGoForward
+            );
+        }
+    });
+
+    return (
+        <div>
+
+            <div>
+                <h3>First URL:</h3>
+                <p>{firstUrl}</p>
+            </div>
+
+            <div>
+                <h3>Current URL:</h3>
+                <p>{currentUrl}</p>
+            </div>
+
+            <div>
+                <h3>History ({history.length}):</h3>
+                <ul>
+                    {history.map((url, index) => (
+                        <li key={index}>{url}</li>
+                    ))}
+                </ul>
+            </div>
+
+            <div>
+                <h3>Forward History ({forwardHistory.length}):</h3>
+                <ul>
+                    {forwardHistory.map((url, index) => (
+                        <li key={index}>{url}</li>
+                    ))}
+                </ul>
+            </div>
+
+
+            
+            <button onClick={clearHistory}>
+                Clear History
+            </button>
+
+            <button onClick={async () => {
+                try {
+                    const { 
+                        isReady,
+                        history, 
+                        forwardHistory,
+                        canGoBack,
+                        canGoForward
+                    } : { 
+                        isReady: boolean;
+                        history: string[];
+                        forwardHistory: string[];
+                        canGoBack: boolean;
+                        canGoForward: boolean;
+                    } = await goBack();
+
+                    console.log('--> goBack: ', 
+                        isReady,
+                        history, 
+                        forwardHistory,
+                        currentUrl, 
+                        firstUrl, 
+                        canGoBack,
+                        canGoForward
+                    );
+                } catch (error) {
+                    console.error('Navigation failed', error);
+                }
+
+            }}>
+               Back
+            </button>
+
+        </div>
+    );
+};
+
+ */
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+export type UseHistoryTrackerChangeFnType = (args: {
+    isReady: boolean;
+    history: string[];
+    forwardHistory: string[],
+    currentUrl: string;
+    firstUrl: string;
+    canGoBack: boolean;
+    canGoForward: boolean;
+}) => void;
+
+
+export type UseHistoryTrackerProps = {
+    onChange?: UseHistoryTrackerChangeFnType | null;
+};
+
+// Create a secure version of useLayoutEffect that is downgraded to useEffect when SSR
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+const useHistoryTracker = (props: UseHistoryTrackerProps) => {
+    const {
+        onChange
+    } = props;
+
+    const [isReady, setIsReady] = useState<boolean>(false);
+    const historyRef = useRef<string[]>([]);
+    const forwardHistoryRef = useRef<string[]>([]);
+    const firstUrlRef = useRef<string>('');
+    const [currentUrl, setCurrentUrl] = useState<string>('');
+    
+    const initialize = useCallback(() => {
+        if (typeof window === 'undefined') return;
+        
+        const currentLocation = window.location.href as string;
+        
+        // If the history is empty, set the first record
+        if (historyRef.current.length === 0) {
+            firstUrlRef.current = currentLocation;
+            historyRef.current = [currentLocation];
+            setCurrentUrl(currentLocation);
+
+            onChange?.({
+                isReady: false,
+                history: [currentLocation],
+                forwardHistory: [],
+                currentUrl: currentLocation,
+                firstUrl: currentLocation,
+                canGoBack: false,
+                canGoForward: false
+            });
+
+        }
+        
+        setIsReady(true);
+    }, []);
+
+    useIsomorphicLayoutEffect(() => {
+        initialize();
+    }, [initialize]);
+
+
+    const clearHistory = useCallback(() => {
+        if (typeof window === 'undefined') return;
+    
+        historyRef.current = [];
+        forwardHistoryRef.current = [];
+        firstUrlRef.current = '';
+        setCurrentUrl('');
+        
+        onChange?.({
+            isReady: true,
+            history: [],
+            forwardHistory: [],
+            currentUrl: '',
+            firstUrl: '',
+            canGoBack: false,
+            canGoForward: false
+
+        });
+    }, [onChange]); // only "onChange"
+
+    const goToHistory = useCallback((index: number) => {
+        if (typeof window === 'undefined') return;
+        if (index < 0 || index >= historyRef.current.length) return;
+        
+        const targetUrl = historyRef.current[index];
+        if (targetUrl && targetUrl !== window.location.href) {
+            window.location.href = targetUrl;
+        }
+    }, []);
+
+    const goBack = useCallback(() => {
+        if (typeof window === 'undefined') return Promise.reject('Window is undefined');
+        if (historyRef.current.length <= 1) return Promise.reject('Cannot go back');
+        
+        return new Promise((resolve) => {
+            // Moves the current URL into the forward history
+            const removedUrl = historyRef.current.pop() as string;
+            forwardHistoryRef.current.push(removedUrl);
+            
+            const newCurrentUrl = historyRef.current[historyRef.current.length - 1];
+            setCurrentUrl(newCurrentUrl);
+    
+            // Create initial data object
+            const data = {
+                isReady: true,
+                history: [...historyRef.current],
+                forwardHistory: [...forwardHistoryRef.current],
+                currentUrl: newCurrentUrl,
+                firstUrl: firstUrlRef.current,
+                canGoBack: canGoBack(),
+                canGoForward: canGoForward()
+            };
+            
+            // Notify about the history change
+            onChange?.(data);
+            
+            // Create one-time listener for popstate
+            const handlePopState = () => {
+                // Remove the listener after it's called
+                window.removeEventListener('popstate', handlePopState);
+                
+                // Get the final data after URL has changed
+                const finalData = {
+                    isReady: true,
+                    history: [...historyRef.current],
+                    forwardHistory: [...forwardHistoryRef.current],
+                    currentUrl: window.location.href,
+                    firstUrl: firstUrlRef.current,
+                    canGoBack: canGoBack(),
+                    canGoForward: canGoForward()
+                };
+                
+                resolve(finalData);
+            };
+    
+            // Add the listener
+            window.addEventListener('popstate', handlePopState);
+            
+            // Trigger the navigation
+            window.history.go(-1);
+        });
+    }, [onChange]);
+    
+    const goForward = useCallback(() => {
+        if (typeof window === 'undefined') return Promise.reject('Window is undefined');
+        if (forwardHistoryRef.current.length === 0) return Promise.reject('Cannot go forward');
+        
+        return new Promise((resolve) => {
+            // Take the URL from the forward history and add it to the main history
+            const nextUrl = forwardHistoryRef.current.pop() as string;
+            historyRef.current.push(nextUrl);
+            setCurrentUrl(nextUrl);
+            
+            // Create initial data object
+            const data = {
+                isReady: true,
+                history: [...historyRef.current],
+                forwardHistory: [...forwardHistoryRef.current],
+                currentUrl: nextUrl,
+                firstUrl: firstUrlRef.current,
+                canGoBack: canGoBack(),
+                canGoForward: canGoForward()
+            };
+            
+            onChange?.(data);
+            
+            // Create one-time listener for popstate
+            const handlePopState = () => {
+                // Remove the listener after it's called
+                window.removeEventListener('popstate', handlePopState);
+                
+                // Get the final data after URL has changed
+                const finalData = {
+                    isReady: true,
+                    history: [...historyRef.current],
+                    forwardHistory: [...forwardHistoryRef.current],
+                    currentUrl: window.location.href,
+                    firstUrl: firstUrlRef.current,
+                    canGoBack: canGoBack(),
+                    canGoForward: canGoForward()
+                };
+                
+                resolve(finalData);
+            };
+    
+            // Add the listener
+            window.addEventListener('popstate', handlePopState);
+            
+            // Trigger the navigation
+            window.history.go(1);
+        });
+    }, [onChange]);
+
+    const canGoBack = useCallback(() => {
+        return historyRef.current.length > 1;
+    }, []);
+
+    const canGoForward = useCallback(() => {
+        return forwardHistoryRef.current.length > 0;
+    }, []);
+
+
+    const handleUrlChange = useCallback(() => {
+        if (typeof window === 'undefined') return;
+
+        const newUrl = window.location.href;
+        
+        // If the history is empty, set to the first URL
+        if (historyRef.current.length === 0) {
+            firstUrlRef.current = newUrl;
+        }
+        
+        // Avoid recording the same URL
+        if (historyRef.current[historyRef.current.length - 1] !== newUrl) {
+            historyRef.current.push(newUrl);
+            
+            // Clear the advance history, as new navigation invalidates the advance history
+            forwardHistoryRef.current = [];
+            setCurrentUrl(newUrl);
+            
+            onChange?.({
+                isReady: true,
+                history: [...historyRef.current],
+                forwardHistory: [...forwardHistoryRef.current],
+                currentUrl: newUrl,
+                firstUrl: firstUrlRef.current || newUrl, // Make sure there is always a value
+                canGoBack: canGoBack(),
+                canGoForward: canGoForward()
+            });
+        }
+    }, [onChange]); // only "onChange"
+
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        // Listen for popstate events (browser forward/back)
+        window.addEventListener('popstate', handleUrlChange);
+        
+        // Listen for hashchange events
+        window.addEventListener('hashchange', handleUrlChange);
+
+        // Listen for DOM and property changes
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList' || mutation.type === 'attributes') {
+                    handleUrlChange();
+                }
+            });
+        });
+
+    
+        observer.observe(document.body, {
+            childList: true, // monitor the addition and deletion of child nodes
+            subtree: true, // monitor all descendant nodes
+            attributes: true, // monitor attribute changes
+            attributeFilter: ['href'] // only monitor changes in the href attribute
+        });
+
+        return () => {
+            window.removeEventListener('popstate', handleUrlChange);
+            window.removeEventListener('hashchange', handleUrlChange);
+            observer.disconnect();
+        };
+    }, [handleUrlChange]);
+
+
+    return {
+        isReady,
+        history: historyRef.current,
+        forwardHistory: forwardHistoryRef.current,
+        currentUrl,
+        firstUrl: firstUrlRef.current,
+        clearHistory,
+        goToHistory,
+        goBack,
+        goForward,
+        canGoBack,
+        canGoForward
+    };
+};
+
+export default useHistoryTracker;