funda-ui 4.7.615 → 4.7.624

package/publish/lib/esm/Utils/hooks/useIsMobile.tsx

@@ -0,0 +1,139 @@
+/**
+ * Determine whether it is the mobile terminal of the specified breakpoint
+ * * 
+ * @usage:
+ * 
+
+const App = () => {
+
+    const isMobile = useIsMobile();
+
+    return (
+        <div>
+            {isMobile ? (
+                <p>This content is hidden on mobile devices.</p>
+            ) : (
+                <p>This content is visible on larger screens.</p>
+            )}
+        </div>
+    );
+}
+
+
+ */
+import { useEffect, useState } from 'react';
+
+const useIsMobile = (breakpoint: number = 600): boolean => {
+    const [isMobile, setIsMobile] = useState<boolean>(false);
+    const [isMounted, setIsMounted] = useState<boolean>(false);
+
+    useEffect(() => {
+        // Set the mounted state to true after the component has mounted
+        setIsMounted(true);
+
+        const handleResize = () => {
+            if (typeof window !== 'undefined') {
+
+                const detectDeviceType = (): 'mobile' | 'tablet' | 'desktop' => {
+                    // 1. First check if window and navigator are available (SSR compatibility)
+                    if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+                        return 'desktop'; // Default to desktop
+                    }
+                
+                    // 2. Get user agent string
+                    const ua = navigator.userAgent.toLowerCase();
+                    
+                    // 3. Get platform info
+                    const platform = navigator.platform ? navigator.platform.toLowerCase() : '';
+                    
+                    // 4. Check screen characteristics using window.matchMedia
+                    const isTouch = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
+                                   
+                    const isPortrait = window.matchMedia('(orientation: portrait)').matches;
+                    const isLandscape = window.matchMedia('(orientation: landscape)').matches;
+                    
+                    // 5. Get screen dimensions
+                    const screenWidth = window.screen.width;
+                    const screenHeight = window.screen.height;
+                    const minScreenSize = Math.min(screenWidth, screenHeight);
+                    const maxScreenSize = Math.max(screenWidth, screenHeight);
+                
+                    // Define device characteristics
+                    const isTablet = (
+                        // Traditional UA detection
+                        /ipad/.test(ua) || 
+                        (/android/.test(ua) && !/mobile/.test(ua)) ||
+                        /tablet/.test(ua) ||
+                        /playbook/.test(ua) ||
+                        /nexus (7|9|10)/.test(ua) ||
+                        /sm-t/.test(ua) ||
+                        /huawei(.*)mediapad/.test(ua) ||
+                        
+                        // Special detection for iPad Pro and newer iPads
+                        (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) ||
+                        
+                        // Screen size characteristics (tablets typically fall within this range)
+                        (minScreenSize >= breakpoint && maxScreenSize <= 1366 && isTouch) ||
+                        
+                        // Specific device detection
+                        /kindle|silk|kftt|kfot|kfjwa|kfjwi|kfsowi|kfthwa|kfthwi|kfapwa|kfapwi/i.test(ua)
+                    );
+                
+                    const isMobile = (
+                        !isTablet && ( // Prevent tablets from being detected as phones
+                            // Traditional mobile device detection
+                            /iphone|ipod|android.*mobile|windows phone|mobi/.test(ua) ||
+                            
+                            // Screen size characteristics (phones typically smaller than 600px)
+                            (minScreenSize < breakpoint && isTouch) ||
+                            
+                            // Additional mobile device detection
+                            /blackberry|\bbb\d+|meego|webos|palm|phone|pocket|mobile|mini|iemobile/i.test(ua)
+                        )
+                    );
+                
+                    // 6. Comprehensive decision logic
+                    if (isMobile) {
+                        // Additional check for small tablets
+                        if (maxScreenSize >= 1024 && isTouch) {
+                            return 'tablet';
+                        }
+                        return 'mobile';
+                    }
+                    
+                    if (isTablet) {
+                        // Additional check for touch-enabled laptops
+                        if (maxScreenSize > 1366 && /windows/.test(ua)) {
+                            return 'desktop';
+                        }
+                        return 'tablet';
+                    }
+                
+                    // 7. Check for touch-enabled laptops
+                    if (isTouch && /windows/.test(ua) && maxScreenSize > 1366) {
+                        return 'desktop';
+                    }
+                
+                    return 'desktop';
+                };
+
+                setIsMobile(detectDeviceType() === 'mobile');
+            }
+        };
+
+        // Add event listener for resize
+        window.addEventListener('resize', handleResize);
+        // Call the handler once to set the initial state
+        handleResize();
+
+        // Cleanup the event listener on component unmount
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [breakpoint]);
+
+    // Only return the isMobile state if the component is mounted
+    return isMounted ? isMobile : false;
+};
+
+export default useIsMobile;

package/publish/lib/esm/Utils/hooks/useKeyPress.tsx

@@ -0,0 +1,104 @@
+/**
+ * Listens for changes in the pressed state of a given key
+ * 
+ * @usage:
+
+const App = () => {
+    const escPressed = useKeyPress({
+        keyCode: 'Escape',
+        handleUp: (key, event) => { },
+        handleDown: async (key, event) => {
+            // do something
+            event.preventDefault();
+            // await xxxxx();
+            console.log(key);
+        },
+        spyElement: window,
+    }, []);
+
+    const multiplePressed = useKeyPress({
+        keyCode: ['ArrowUp', 'ArrowDown', 'Enter', 'NumpadEnter'],
+        handleUp: (key, event) => { },
+        handleDown: (key, event) => {
+            // do something
+            event.preventDefault();
+            console.log(key);
+        },
+        spyElement: window
+    }, [myDep1, myDep2]);
+
+
+    return (
+        <div className="app">{escPressed ? 'Escape' : null}</div>
+    );
+};
+
+ */
+
+import { useState, useEffect } from 'react';
+
+export interface UseKeyPressProps {
+    keyCode: string | string[];
+    handleDown?: (key: string, event: KeyboardEvent) => void;
+    handleUp?: (key: string, event: KeyboardEvent) => void;
+    spyElement?: any;
+}
+
+const useKeyPress = ({ 
+    keyCode, 
+    handleDown, 
+    handleUp,
+    spyElement = typeof window === 'undefined' ? null : window,
+}: UseKeyPressProps, deps: any[]): boolean => {
+    const [keyPressed, setKeyPressed] = useState(false);
+    const multipleKeys = Array.isArray(keyCode);
+
+    // `Escape`, `Enter`, `Alt`, `Control`, `CapsLock`, `Shift`, `ArrowUp`, `ArrowDown`, `ArrowLeft`, `ArrowRight` `w`, `e`, ...
+    const eventHandlerDown = (event: KeyboardEvent) => {
+        const key = event.code;
+
+        if (multipleKeys) {
+            if (keyCode.includes(key)) {
+                setKeyPressed(true);
+                if (typeof handleDown === 'function') handleDown(key, event);
+            }
+        } else {
+            if (key === keyCode) {
+                setKeyPressed(true);
+                if (typeof handleDown === 'function') handleDown(key, event);
+            }
+        }
+    };
+
+    const eventHandlerUp = (event: KeyboardEvent) => {
+        const key = event.code;
+
+        if (multipleKeys) {
+            if (keyCode.includes(key)) {
+                setKeyPressed(false);
+                if (typeof handleUp === 'function') handleUp(key, event);
+            }
+        } else {
+            if (key === keyCode) {
+                setKeyPressed(false);
+                if (typeof handleUp === 'function') handleUp(key, event);
+            }
+        }
+    };
+
+    useEffect(() => {
+        spyElement?.addEventListener('keydown', eventHandlerDown);
+        spyElement?.addEventListener('keyup', eventHandlerUp);
+
+        return () => {
+            spyElement?.removeEventListener('keydown', eventHandlerDown);
+            spyElement?.removeEventListener('keyup', eventHandlerUp);
+        };
+    }, deps);
+
+    return keyPressed;
+};
+
+
+export default useKeyPress;
+

package/publish/lib/esm/Utils/hooks/useSessionStorageListener.tsx

@@ -0,0 +1,45 @@
+/**
+ * Session Storage Listener
+ * 
+ * @usage:
+
+const App = () => {
+    const myValue = useSessionStorageListener("myKey");
+
+    useEffect(() => {
+    console.log("sessionStorage change:", myValue);
+    }, [myValue]);
+};
+
+ */
+import { useEffect, useState } from "react";
+
+const useSessionStorageListener = (key: string) => {
+    const [value, setValue] = useState(sessionStorage.getItem(key) || "");
+
+    useEffect(() => {
+        const handleStorageChange = (event: Event) => {
+            if (event instanceof CustomEvent && event.detail.key === key) {
+                setValue(event.detail.value);
+            }
+        };
+
+        window.addEventListener("sessionStorageChange", handleStorageChange);
+
+        return () => window.removeEventListener("sessionStorageChange", handleStorageChange);
+    }, [key]);
+
+    return value;
+};
+
+// interception sessionStorage.setItem
+const originalSetItem = sessionStorage.setItem;
+sessionStorage.setItem = function (key, value) {
+    const event = new CustomEvent("sessionStorageChange", {
+        detail: { key, value },
+    });
+    window.dispatchEvent(event);
+    originalSetItem.apply(this, [key, value]);
+};
+
+export default useSessionStorageListener;

package/publish/lib/esm/Utils/hooks/useStreamController.tsx

@@ -0,0 +1,277 @@
+/**
+ * Stream Controller
+ * 
+ * @usage:
+
+// Use in component
+const streamController = useStreamController({
+    onChunk: async (chunk: string, index: number) => {
+        // start (Execute it only once)
+        if (index === 0) {
+            
+        }
+        
+        // Streaming data is JSON split by rows
+        const lines = chunk.split("\n").filter(line => line.trim() !== "");
+
+        // Process each data chunk
+        console.log('Received chunk:', chunk);
+    },
+    onComplete: async (lastContent: string) => {
+        // Process when stream is completed
+        console.log('Stream completed');
+        
+        // Display AI reply
+        console.log('AI reply:', lastContent);
+
+    },
+    onError: (error) => {
+        // Error handling
+        console.error('Stream error:', error);
+    },
+    onAbort: () => {
+        // Abort processing
+        console.log('Stream aborted');
+    }
+});
+
+// Start stream
+const response = await fetch(url);
+await streamController.start(response);
+
+// Pause stream
+streamController.pause();
+
+// Resume stream
+streamController.resume();
+
+// Abort stream
+streamController.abort();
+
+// Check status
+const isActive = streamController.isActive();
+const isPaused = streamController.isPaused();
+
+ */
+
+
+import { useRef, useCallback, useEffect } from 'react';
+
+export interface StreamControllerOptions {
+    onChunk?: (chunk: string, index: number) => void;
+    onComplete?: (lastContent: string) => void;
+    onError?: (error: any) => void;
+    onAbort?: () => void;
+}
+
+export interface StreamController {
+    start: (response: Response) => Promise<void>;
+    pause: () => void;
+    resume: () => void;
+    abort: () => void;
+    isActive: () => boolean;
+    isPaused: () => boolean;
+}
+
+export const useStreamController = (options: StreamControllerOptions = {}): StreamController => {
+    const streamController = useRef<ReadableStreamDefaultController | null>(null);
+    const reader = useRef<ReadableStreamDefaultReader | null>(null);
+    const activeStream = useRef<ReadableStream | null>(null);
+    const responseReader = useRef<ReadableStreamDefaultReader | null>(null);
+    const paused = useRef<boolean>(false);
+    const active = useRef<boolean>(false);
+    const abortController = useRef<AbortController>(new AbortController());
+    const textDecoder = useRef<TextDecoder>(new TextDecoder("utf-8"));  // Get the decoding of UTF8
+
+    // To avoid the "Uncaught (in promise) TypeError: Failed to execute 'cancel' on 'ReadableStream': Cannot cancel a locked stream" error, 
+    // (1) you need to safely release the reader.
+    // (2) cleanup() also requires asynchronous state
+    const releaseReader = useCallback(async (readerRef: React.MutableRefObject<ReadableStreamDefaultReader | null>) => {
+        if (readerRef.current) {
+            try {
+                await readerRef.current.cancel();
+            } catch (e) {
+                console.warn('Error cancelling reader:', e);
+            }
+    
+            try {
+                readerRef.current.releaseLock();
+            } catch (e) {
+                console.warn('Error releasing reader lock:', e);
+            }
+            readerRef.current = null;
+        }
+    }, []);
+
+    const cleanup = useCallback(async () => {
+        // First release all readers
+        await releaseReader(reader);
+        await releaseReader(responseReader);
+    
+        // Then try to cancel the stream
+        if (activeStream.current) {
+            try {
+                await activeStream.current.cancel();
+            } catch (e) {
+                console.warn('Error cancelling stream:', e);
+            }
+            activeStream.current = null;
+        }
+    
+        streamController.current = null;
+        active.current = false;
+        paused.current = false;
+    }, [releaseReader]);
+
+    // Process chunks of data
+    const processChunk = useCallback(async (chunk: string, index: number) => {
+        try {
+            options.onChunk?.(chunk, index);
+        } catch (error) {
+            options.onError?.(error);
+        }
+    }, [options]);
+
+    // Start processing the stream
+    const startProcessing = useCallback(async () => {
+        if (!reader.current || !active.current) return;
+
+        //
+        let counter = 0;
+
+
+        // Store the final content and bind it to loading
+        let lastContent: string = '';
+
+        while (active.current) {
+            try {
+
+                if (paused.current) {
+                    await new Promise(resolve => setTimeout(resolve, 100));
+                    continue;
+                }
+
+                const { done, value } = await reader.current.read();
+
+                if (done) {
+                    options.onComplete?.(lastContent);
+                    await cleanup();
+                    break;
+                }
+
+                // Decode the content
+                const chunkStr = textDecoder.current.decode(value as Uint8Array, { stream: true });
+                lastContent += chunkStr;
+
+                await processChunk(chunkStr, counter);
+                counter++;
+
+            } catch (error: any) {
+                if (error.name === 'AbortError') {
+                    options.onAbort?.();
+                } else {
+                    options.onError?.(error);
+                }
+                await cleanup();
+                break;
+            }
+            
+        }
+    }, [options, cleanup, processChunk]);
+
+
+    // Start streaming
+    const start = useCallback(async (response: Response) => {
+        await cleanup();
+  
+        // Get Reader
+        reader.current = response.body!.getReader();
+
+        try {
+
+            const stream = new ReadableStream({
+                start(controller) {
+                    streamController.current = controller;
+                },
+                async pull(controller) {
+                    try {
+                        const { done, value } = await reader.current!.read();
+                        
+                        if (done) {
+                            controller.close();
+                            return;
+                        }
+
+                        // Decode the content
+                        const chunkStr = textDecoder.current.decode(value as Uint8Array, { stream: true });
+
+                        controller.enqueue(chunkStr);
+                    } catch (error) {
+                        controller.error(error);
+                    }
+                },
+                cancel() {
+                    response.body?.cancel();
+                }
+            });
+
+            activeStream.current = stream;
+            active.current = true;
+            paused.current = false;
+
+            // Start processing immediately
+            await startProcessing();
+        } catch (error) {
+            options.onError?.(error);
+            cleanup();
+        }
+        
+ 
+    }, [options, cleanup, startProcessing]);
+
+    
+
+    // Pause streaming
+    const pause = useCallback(() => {
+        paused.current = true;
+    }, []);
+
+    // Resume streaming
+    const resume = useCallback(() => {
+        paused.current = false;
+    }, []);
+
+    // Abort streaming
+    const abort = useCallback(async () => {
+        abortController.current.abort();
+        await cleanup();
+    }, [cleanup]);
+
+    // Check if stream is active
+    const isActive = useCallback(() => {
+        return active.current;
+    }, []);
+
+    // Check if stream is paused
+    const isPaused = useCallback(() => {
+        return paused.current;
+    }, []);
+
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            cleanup().catch(console.error);
+        };
+    }, [cleanup]);
+
+    return {
+        start,
+        pause,
+        resume,
+        abort,
+        isActive,
+        isPaused
+    };
+};
+
+export default useStreamController;

package/publish/lib/esm/Utils/hooks/useThrottle.tsx

@@ -0,0 +1,39 @@
+/**
+ * Limiting the rate of execution
+ * 
+ * @usage:
+
+const App = () => {
+    const [count, setCount] = useState(0);
+    const handleClick = useThrottle(() => setCount(count + 1), 500, [count]);
+
+    return (
+        <div className="app">
+            <button onClick={handleClick}>click</button>
+            <p>click {count} time</p>
+        </div>
+    );
+};
+
+ */
+import { useRef, useCallback } from "react";
+
+const useThrottle = <T extends (...args: any[]) => void>(
+    fn: T,
+    delay: number,
+    dependence: any[]
+): T => {
+    const ref = useRef<{ lastTime: number }>({ lastTime: 0 });
+
+    return useCallback((...args: any[]) => {
+        const now = Date.now();
+
+        if (now - ref.current.lastTime >= delay) {
+            fn(...args);
+            ref.current.lastTime = now;
+        }
+    }, dependence) as any;
+};
+
+export default useThrottle;
+

package/publish/lib/esm/Utils/hooks/useWindowScroll.tsx

@@ -0,0 +1,83 @@
+/**
+ * Listens for scrolls the window to a particular place in the document
+ * 
+ * @usage:
+
+const App = () => {
+    const [scrollData, windowScrollUpdate] = useWindowScroll({
+        performance: ['debounce', 500],   // "['debounce', 500]" or "['throttle', 500]"
+        handle: (scrollData) => {
+            // do something
+            console.log(scrollData);
+        }
+    });
+};
+
+ */
+import { useEffect, useState } from "react";
+import { debounce, throttle } from "../libs/performance";
+
+export type PerformanceType = ["debounce" | "throttle", number];
+
+export type ScrollData = {
+    x: number;
+    y: number;
+};
+
+export type UseWindowScrollProps = {
+    enabled?: boolean;
+    performance: PerformanceType;
+    handle?: (scrollData: ScrollData) => void;
+};
+
+const useWindowScroll = ({
+    enabled,
+    performance,
+    handle
+}: UseWindowScrollProps): [ScrollData, () => void] => {
+    let windowScrollUpdate: any;
+    const [performanceName, performanceLimit] = performance;
+
+    const [scrollData, setScrollData] = useState<ScrollData>({
+        x: 0,
+        y: 0
+    });
+
+    const eventHandlerScroll = (e: Event) => {
+        const doc = document.documentElement;
+        const left =
+            (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
+        const top =
+            (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+
+        const res: ScrollData = {
+            x: left,
+            y: top
+        };
+
+        setScrollData(res);
+
+        if (typeof handle === "function") handle(res);
+    };
+
+    if (performanceName === "debounce")
+        windowScrollUpdate = debounce(eventHandlerScroll, parseFloat(performanceLimit as never));
+    if (performanceName === "throttle")
+        windowScrollUpdate = throttle(eventHandlerScroll, parseFloat(performanceLimit as never));
+
+    useEffect(() => {
+        window.addEventListener("scroll", windowScrollUpdate);
+        window.addEventListener("touchmove", windowScrollUpdate);
+
+        return () => {
+            window.removeEventListener("scroll", windowScrollUpdate);
+            window.removeEventListener("touchmove", windowScrollUpdate);
+        };
+    }, []);
+
+    return [scrollData, windowScrollUpdate];
+};
+
+
+export default useWindowScroll;
+