funda-ui 4.7.624 → 4.7.625

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

@@ -1,139 +0,0 @@
-/**
- * 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

@@ -1,104 +0,0 @@
-/**
- * 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

@@ -1,45 +0,0 @@
-/**
- * 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

@@ -1,277 +0,0 @@
-/**
- * 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

@@ -1,39 +0,0 @@
-/**
- * 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

@@ -1,83 +0,0 @@
-/**
- * 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;
-