funda-ui 4.5.682 → 4.5.711

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

@@ -0,0 +1,74 @@
+/**
+ * Provides a convenient way to create and manage intervals
+ * 
+ * @usage:
+
+const App = () => {
+    const [count, setCount] = useState(0);
+    const [list, setList] = useState([]);
+
+    const { startTimer, stopTimer } = useInterval(() => {
+        setCount(count + 1);
+    }, 1000);
+
+    const { startTimer: startTimerGetList, stopTimer: stopTimerGetList } = useInterval(() => {
+        setList((prevState) => {
+            return [...prevState, Math.random()]
+        });
+    }, 1000, false);
+
+    const handleGetList = () => {
+        startTimerGetList();
+    };
+
+    useEffect(() => {
+        handleGetList();
+    }, []);
+
+    return (
+        <div className="app">{count}{list.join(',')}</div>
+    );
+};
+
+ */
+import { useEffect, useRef, useCallback } from "react";
+
+const useInterval = (fn: () => void, delay: number | null, enabled: boolean = true): {
+    startTimer: any,
+    stopTimer: any
+} => {
+    const ref = useRef<any>(null);
+  
+    const intervalIdRef = useRef<any>(null);
+    const startTimer = useCallback(() => {
+        intervalIdRef.current = setInterval(() => {
+            ref.current && ref.current();
+        }, delay as number);
+    }, [ref]);
+
+    const stopTimer = useCallback(() => {
+        clearInterval(intervalIdRef.current);
+        intervalIdRef.current = null;
+    }, []);
+
+    useEffect(() => {
+        ref.current = fn;
+    }, [fn]);
+
+
+    useEffect(() => {
+        if (enabled) {
+            startTimer();
+            return () => stopTimer();
+        }
+    }, [enabled]);
+
+    return {
+        startTimer,
+        stopTimer
+    };
+
+};
+
+export default useInterval;
+

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

@@ -0,0 +1,56 @@
+/**
+ * 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 = 768): 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 (window) {
+                setIsMobile(window.innerWidth <= breakpoint);
+            }
+        };
+
+        // 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/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;
+

package/publish/lib/esm/Utils/libs/anim.ts

@@ -0,0 +1,96 @@
+
+import {
+    easeLinear,
+    easeInQuad,
+    easeOutQuad,
+    easeInOutQuad
+} from './easing';
+    
+import {
+    setDefaultOptions
+} from './initDefaultOptions';
+
+
+/**
+ * Element Animate
+ * @public
+ * 
+ * @param  {HTMLElement} curElement      - Element of animation.
+ * @param  {?JSON} config                - Configuration of animation
+ * @param  {?string} easeType            - Types of easing animation.
+* @param  {?Function} callback           - Callback after animation ends
+ */
+function animateStyles(curElement: HTMLElement, config: any, easeType: string = 'linear', callback: () => void = () => {}): void {
+    if (typeof curElement === typeof undefined) return;
+
+    // Set a default configuration
+    config = setDefaultOptions({
+        "startHeight": 0,    // node.scrollHeight
+        "endHeight": 0,
+        "speed": 200, //ms
+    }, config);
+
+    const _endHeight: number = config.endHeight;
+    const _speed: number = config.speed;
+    let _startHeight: number = config.startHeight;
+ 
+    const duration: number = _speed;
+    const start: number = new Date().getTime();
+    const from: number = 0;
+    const to: number = 100;
+    let requestId: number;
+    const loop: () => void = function () {
+
+        //easing
+        const time: number = new Date().getTime() - start; //Work out the elapsed time
+        let val: number;
+
+        switch (easeType) {
+            case "linear":
+                val = easeLinear(time, from, to - from, duration);
+                break;
+            case "ease-in":
+                val = easeInQuad(time, from, to - from, duration);
+                break;
+            case "ease-out":
+                val = easeOutQuad(time, from, to - from, duration);
+                break;
+            case "ease-in-out":
+                val = easeInOutQuad(time, from, to - from, duration);
+                break;
+
+            default:
+                val = easeLinear(time, from, to - from, duration);
+        }
+
+        // Elapsed time in miliseconds
+        const percent: number = val / 100;
+
+        
+        // change height
+        if (curElement.clientHeight < _endHeight) {
+            curElement.style.height = _endHeight * percent + 'px';
+        } else {
+            if (_startHeight > 0) curElement.style.height = _startHeight - (_startHeight * percent) + 'px';
+        }
+
+        
+        //If the elapsed time is less than the speed (ms)
+        if (time < duration) {
+            requestId = window.requestAnimationFrame(loop);
+        } else {
+            // change height
+            curElement.style.height = _endHeight + 'px';
+            
+            if (typeof callback === 'function') callback();
+            
+            window.cancelAnimationFrame(requestId);
+        }
+    };
+    requestId = window.requestAnimationFrame(loop);
+}
+
+
+
+export default animateStyles;
+