funda-ui 4.5.711 → 4.5.713

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

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

@@ -1,56 +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 = 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

@@ -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/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;
-

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

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