@koine/react 2.0.0-beta.73 → 2.0.0-beta.74

package/useAsyncFn.js

@@ -0,0 +1,26 @@
+import React, { useCallback, useRef, useState } from "react";
+import { useMountedState } from "./useMountedState";
+export let useAsyncFn = (fn, deps = [], initialState = { loading: false }) => {
+    const lastCallId = useRef(0);
+    const isMounted = useMountedState();
+    const [state, set] = useState(initialState);
+    const callback = useCallback((...args) => {
+        const callId = ++lastCallId.current;
+        if (!state.loading) {
+            set((prevState) => ({ ...prevState, loading: true }));
+        }
+        return fn(...args).then((value) => {
+            isMounted() &&
+                callId === lastCallId.current &&
+                set({ value, loading: false });
+            return value;
+        }, (error) => {
+            isMounted() &&
+                callId === lastCallId.current &&
+                set({ error, loading: false });
+            return error;
+        });
+    }, deps);
+    return [state, callback];
+};
+export default useAsyncFn;

package/useFirstMountState.d.ts

@@ -0,0 +1,2 @@
+export declare let useFirstMountState: () => boolean;
+export default useFirstMountState;

package/useFirstMountState.js

@@ -0,0 +1,10 @@
+import { useRef } from "react";
+export let useFirstMountState = () => {
+    const isFirst = useRef(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+};
+export default useFirstMountState;

package/useFixedOffset.d.ts

@@ -0,0 +1,2 @@
+export declare let useFixedOffset: (selector?: string) => import("react").MutableRefObject<number>;
+export default useFixedOffset;

package/useFixedOffset.js

@@ -0,0 +1,42 @@
+import { useRef } from "react";
+import { debounce } from "@koine/utils";
+import { $each, calculateFixedOffset, injectCss, listenResizeDebounced, } from "@koine/dom";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+const inject = (value) => {
+    injectCss("useFixedOffset", `html{scroll-padding-top: ${value}px}`);
+};
+export let useFixedOffset = (selector) => {
+    const fixedOffset = useRef(0);
+    useIsomorphicLayoutEffect(() => {
+        const update = () => {
+            const newFixedOffset = calculateFixedOffset();
+            fixedOffset.current = newFixedOffset;
+            inject(newFixedOffset);
+        };
+        update();
+        if (ResizeObserver) {
+            const observer = new ResizeObserver((entries) => {
+                let newFixedOffset = 0;
+                entries.forEach((entry) => {
+                    newFixedOffset += entry.contentRect.height;
+                });
+                fixedOffset.current = newFixedOffset;
+                const updateOnResize = debounce(() => inject(newFixedOffset), 400, true);
+                updateOnResize();
+            });
+            $each(selector || "[data-fixed]", ($el) => {
+                if (observer)
+                    observer.observe($el);
+            });
+            return () => {
+                observer?.disconnect();
+            };
+        }
+        else {
+            const listener = listenResizeDebounced(0, update);
+            return listener;
+        }
+    }, [selector]);
+    return fixedOffset;
+};
+export default useFixedOffset;

package/useFocus.d.ts

@@ -0,0 +1,2 @@
+export declare let useFocus: () => (import("react").RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | (() => void))[];
+export default useFocus;

package/useFocus.js

@@ -0,0 +1,9 @@
+import { useRef } from "react";
+export let useFocus = () => {
+    const elementRef = useRef(null);
+    const setFocus = () => {
+        elementRef.current && elementRef.current.focus();
+    };
+    return [elementRef, setFocus];
+};
+export default useFocus;

package/useInterval.d.ts

@@ -0,0 +1,2 @@
+export declare let useInterval: <T extends () => unknown>(callback: T, delay: number, deps?: unknown[]) => void;
+export default useInterval;

package/useInterval.js

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from "react";
+import { noop } from "@koine/utils";
+export let useInterval = (callback, delay, deps = []) => {
+    const savedCallback = useRef();
+    useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback, ...deps]);
+    useEffect(() => {
+        function tick() {
+            if (savedCallback.current)
+                savedCallback.current();
+        }
+        if (delay !== null) {
+            const id = setInterval(tick, delay);
+            return () => clearInterval(id);
+        }
+        return noop;
+    }, [delay]);
+};
+export default useInterval;

package/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,3 @@
+import { useLayoutEffect } from "react";
+export declare let useIsomorphicLayoutEffect: typeof useLayoutEffect;
+export default useIsomorphicLayoutEffect;

package/useIsomorphicLayoutEffect.js

@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from "react";
+import { isBrowser } from "@koine/utils";
+export let useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+export default useIsomorphicLayoutEffect;

package/useKeyUp.d.ts

@@ -0,0 +1,2 @@
+export declare let useKeyUp: (callback: (event: KeyboardEvent) => void, deps?: unknown[]) => void;
+export default useKeyUp;

package/useKeyUp.js

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+import { on } from "@koine/dom";
+export let useKeyUp = (callback, deps = []) => {
+    useEffect(() => {
+        const listener = on(window, "keyup", (event) => {
+            if (!event.ctrlKey &&
+                !event.altKey &&
+                !event.shiftKey &&
+                !event.metaKey) {
+                callback(event);
+            }
+        });
+        return listener;
+    }, [callback, ...deps]);
+};
+export default useKeyUp;

package/useMeasure.d.ts

@@ -0,0 +1,22 @@
+interface RectReadOnly {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+    [key: string]: number;
+}
+type HTMLOrSVGElement = HTMLElement | SVGElement;
+export type UseMeasureOptions = {
+    scroll?: boolean;
+};
+export type UseMeasureReturn = [
+    (element: HTMLOrSVGElement | null) => void,
+    RectReadOnly,
+    () => void
+];
+export declare let useMeasure: (options?: UseMeasureOptions) => UseMeasureReturn;
+export default useMeasure;

package/useMeasure.js

@@ -0,0 +1,119 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { debounce, noop } from "@koine/utils";
+import { listenResizeDebounced, listenScrollDebounced, off, on, } from "@koine/dom";
+let observer;
+let findScrollContainers = (element) => {
+    const result = [];
+    if (!element || element === document.body)
+        return result;
+    const { overflow, overflowX, overflowY } = window.getComputedStyle(element);
+    if ([overflow, overflowX, overflowY].some((prop) => prop === "auto" || prop === "scroll"))
+        result.push(element);
+    return [...result, ...findScrollContainers(element.parentElement)];
+};
+const keys = [
+    "x",
+    "y",
+    "top",
+    "bottom",
+    "left",
+    "right",
+    "width",
+    "height",
+];
+const areBoundsEqual = (a, b) => keys.every((key) => a[key] === b[key]);
+export let useMeasure = (options) => {
+    const { scroll = false } = options || {};
+    const [bounds, setBounds] = useState({
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0,
+        bottom: 0,
+        right: 0,
+        x: 0,
+        y: 0,
+    });
+    const state = useRef([
+        null,
+        null,
+        null,
+        bounds,
+    ]);
+    const mounted = useRef(false);
+    useEffect(() => {
+        mounted.current = true;
+        return () => void (mounted.current = false);
+    }, []);
+    const [forceRefresh, , scrollChange] = useMemo(() => {
+        const callback = (..._args) => {
+            const [element, , , lastBounds] = state.current;
+            if (!element)
+                return;
+            const size = element.getBoundingClientRect();
+            Object.freeze(size);
+            if (mounted.current && !areBoundsEqual(lastBounds, size)) {
+                state.current[3] = size;
+                setBounds(size);
+            }
+        };
+        const debouncedCallback = debounce(callback);
+        return [callback, debouncedCallback, debouncedCallback];
+    }, [setBounds]);
+    function removeListeners() {
+        const [, scrollContainers, resizeObserver] = state.current;
+        if (scrollContainers) {
+            scrollContainers.forEach((element) => off(element, "scroll", scrollChange));
+            state.current[1] = null;
+        }
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            state.current[2] = null;
+        }
+    }
+    function addListeners() {
+        const [element, scrollContainers] = state.current;
+        if (!element)
+            return;
+        if (!observer && ResizeObserver) {
+            observer = new ResizeObserver(scrollChange);
+            state.current[2] = observer;
+            observer.observe(element);
+            if (scroll && scrollContainers) {
+                scrollContainers.forEach((scrollContainer) => on(scrollContainer, "scroll", scrollChange, {
+                    capture: true,
+                    passive: true,
+                }));
+            }
+        }
+    }
+    const ref = (node) => {
+        if (!node || node === state.current[0])
+            return;
+        removeListeners();
+        state.current[0] = node;
+        state.current[1] = findScrollContainers(node);
+        addListeners();
+    };
+    useEffect(() => {
+        if (scroll) {
+            const listener = listenScrollDebounced(0, forceRefresh, 100);
+            return listener;
+        }
+        return noop;
+    }, [scroll, forceRefresh]);
+    useEffect(() => {
+        const listener = listenResizeDebounced(0, forceRefresh, 100);
+        return listener;
+    }, [forceRefresh]);
+    useEffect(() => {
+        removeListeners();
+        addListeners();
+    }, [scroll]);
+    useEffect(() => {
+        forceRefresh();
+        return removeListeners;
+    }, []);
+    return [ref, bounds, forceRefresh];
+};
+export default useMeasure;

package/useMountedState.d.ts

@@ -0,0 +1,2 @@
+export declare let useMountedState: () => (() => boolean);
+export default useMountedState;

package/useMountedState.js

@@ -0,0 +1,13 @@
+import { useCallback, useEffect, useRef } from "react";
+export let useMountedState = () => {
+    const mountedRef = useRef(false);
+    const get = useCallback(() => mountedRef.current, []);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    return get;
+};
+export default useMountedState;

package/useNavigateAway.d.ts

@@ -0,0 +1,3 @@
+export type UseNavigateAwayHandler = (event: BeforeUnloadEvent) => string | boolean;
+export declare let useNavigateAway: (handler: UseNavigateAwayHandler) => void;
+export default useNavigateAway;

package/useNavigateAway.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from "react";
+import { on } from "@koine/dom";
+export let useNavigateAway = (handler) => {
+    const beforeUnloadHandlerRef = useRef();
+    useEffect(() => {
+        beforeUnloadHandlerRef.current = (event) => {
+            const customMessageOrCondition = handler(event);
+            if (customMessageOrCondition) {
+                event.preventDefault();
+            }
+            if (typeof customMessageOrCondition === "string") {
+                return (event.returnValue = customMessageOrCondition);
+            }
+            if (event.defaultPrevented) {
+                return (event.returnValue = "");
+            }
+            return;
+        };
+    }, [handler]);
+    useEffect(() => {
+        const listenerBeforeunload = on(window, "beforeunload", (event) => beforeUnloadHandlerRef.current?.(event));
+        return listenerBeforeunload;
+    }, []);
+};
+export default useNavigateAway;

package/usePrevious.d.ts

@@ -0,0 +1,2 @@
+export declare let usePrevious: <T extends unknown>(state: T, defaulValue: T) => T;
+export default usePrevious;

package/usePrevious.js

@@ -0,0 +1,9 @@
+import { useState } from "react";
+export let usePrevious = (state, defaulValue) => {
+    const [tuple, setTuple] = useState([state, defaulValue]);
+    if (tuple[1] !== state) {
+        setTuple([tuple[1], state]);
+    }
+    return tuple[0];
+};
+export default usePrevious;

package/usePreviousRef.d.ts

@@ -0,0 +1,2 @@
+export declare let usePreviousRef: <T extends unknown>(value: T) => T | undefined;
+export default usePreviousRef;

package/usePreviousRef.js

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+export let usePreviousRef = (value) => {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+};
+export default usePreviousRef;

package/useReveal.d.ts

@@ -0,0 +1,13 @@
+export type UseRevealOptions = {
+    direction?: "left" | "right";
+    offsetStartY?: number;
+    offsetEndY?: number;
+    offsetStartX?: number | "all";
+};
+export declare let useReveal: <T extends HTMLElement = HTMLDivElement>({ direction, offsetStartY, offsetEndY, offsetStartX, }: UseRevealOptions) => {
+    ref: import("react").RefObject<T>;
+    startY: number;
+    endY: number;
+    startX: number;
+};
+export default useReveal;

package/useReveal.js

@@ -0,0 +1,42 @@
+import { useEffect, useRef, useState } from "react";
+export let useReveal = ({ direction = "left", offsetStartY = -2, offsetEndY = 0, offsetStartX = "all", }) => {
+    const ref = useRef(null);
+    const [startY, setStartY] = useState(0);
+    const [endY, setEndY] = useState(0);
+    const [startX, setStartX] = useState(0);
+    useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const rect = ref.current.getBoundingClientRect();
+        const scrollTop = window.scrollY || document.documentElement.scrollTop;
+        const elementHeight = rect.height;
+        const elementTop = rect.top;
+        const distanceTop = elementTop + scrollTop;
+        const offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
+        const offsetBottom = offsetEndY ? elementHeight * offsetEndY : offsetTop;
+        const startY = (distanceTop + offsetTop) / document.body.clientHeight;
+        const endY = (distanceTop + elementHeight + offsetBottom) / document.body.clientHeight;
+        let startX;
+        if (offsetStartX === "all") {
+            startX = direction === "left" ? -rect.right : rect.left;
+        }
+        else {
+            startX = rect.width * offsetStartX;
+            startX = direction === "left" ? -startX : startX;
+        }
+        setStartY(startY);
+        setEndY(endY);
+        setStartX(startX);
+    }, [
+        setStartY,
+        setEndY,
+        setStartX,
+        offsetStartY,
+        offsetEndY,
+        offsetStartX,
+        direction,
+    ]);
+    return { ref, startY, endY, startX };
+};
+export default useReveal;

package/useScrollPosition.d.ts

@@ -0,0 +1,7 @@
+type Position = {
+    x: number;
+    y: number;
+};
+type ElementRef = React.MutableRefObject<HTMLElement | undefined>;
+export declare let useScrollPosition: (effect: (currentPosition: Position, prevPosition: Position) => void, deps?: import("react").DependencyList, element?: ElementRef, boundingElement?: ElementRef, wait?: number) => void;
+export default useScrollPosition;

package/useScrollPosition.js

@@ -0,0 +1,58 @@
+import { useRef } from "react";
+import { isBrowser } from "@koine/utils";
+import { listenScroll } from "@koine/dom";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+const zeroPosition = { x: 0, y: 0 };
+const getClientRect = (element) => element?.getBoundingClientRect();
+const getScrollPosition = (element, boundingElement) => {
+    if (!isBrowser) {
+        return zeroPosition;
+    }
+    if (!boundingElement) {
+        return { x: window.scrollX, y: window.scrollY };
+    }
+    const targetPosition = getClientRect(element?.current || document.body);
+    const containerPosition = getClientRect(boundingElement.current);
+    if (!targetPosition) {
+        return zeroPosition;
+    }
+    return containerPosition
+        ? {
+            x: (containerPosition.x || 0) - (targetPosition.x || 0),
+            y: (containerPosition.y || 0) - (targetPosition.y || 0),
+        }
+        : { x: targetPosition.left, y: targetPosition.top };
+};
+export let useScrollPosition = (effect, deps = [], element, boundingElement, wait) => {
+    const position = useRef(getScrollPosition(null, boundingElement));
+    let throttleTimeout = null;
+    const callBack = () => {
+        const current = getScrollPosition(element, boundingElement);
+        effect(current, position.current);
+        position.current = current;
+        throttleTimeout = null;
+    };
+    useIsomorphicLayoutEffect(() => {
+        if (!isBrowser) {
+            return undefined;
+        }
+        const handleScroll = () => {
+            if (wait) {
+                if (throttleTimeout === null) {
+                    throttleTimeout = window.setTimeout(callBack, wait);
+                }
+            }
+            else {
+                callBack();
+            }
+        };
+        const listener = listenScroll(handleScroll, boundingElement?.current);
+        return () => {
+            listener();
+            if (throttleTimeout) {
+                clearTimeout(throttleTimeout);
+            }
+        };
+    }, deps);
+};
+export default useScrollPosition;

package/useScrollThreshold.d.ts

@@ -0,0 +1,2 @@
+export declare let useScrollThreshold: (threshold?: number, callback?: ((isAbove: boolean, isBelow: boolean) => void) | undefined) => boolean;
+export default useScrollThreshold;

package/useScrollThreshold.js

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useState } from "react";
+import { noop } from "@koine/utils";
+import { listenScroll } from "@koine/dom";
+export let useScrollThreshold = (threshold, callback) => {
+    const [isBelow, setIsBelow] = useState(false);
+    const handler = useCallback(() => {
+        if (threshold) {
+            const posY = window.scrollY;
+            const isAbove = posY < threshold;
+            const isBelow = posY > threshold;
+            setIsBelow(isBelow);
+            if (callback)
+                callback(isAbove, isBelow);
+        }
+    }, [threshold, callback]);
+    useEffect(() => {
+        if (threshold) {
+            const listener = listenScroll(handler);
+            handler();
+            return listener;
+        }
+        return noop;
+    }, [threshold, handler]);
+    return isBelow;
+};
+export default useScrollThreshold;

package/useScrollTo.d.ts

@@ -0,0 +1,2 @@
+export declare let useScrollTo: (id?: string, offset?: number) => void;
+export default useScrollTo;

package/useScrollTo.js

@@ -0,0 +1,18 @@
+import { isBrowser } from "@koine/utils";
+export let useScrollTo = (id = "", offset = 0) => {
+    if (!isBrowser) {
+        return;
+    }
+    const headerOffset = 0;
+    let element = document.getElementById(id);
+    let top = 0;
+    if (element && element.offsetParent) {
+        do {
+            top += element.offsetTop;
+        } while ((element = element.offsetParent));
+    }
+    top -= offset;
+    top -= headerOffset;
+    window.scroll(0, top);
+};
+export default useScrollTo;

package/useSmoothScroll.d.ts

@@ -0,0 +1,2 @@
+export declare let useSmoothScroll: (disregardAutomaticFixedOffset?: boolean) => (to?: number | string, customOffset?: number, callback?: () => void, fallbackTimeout?: number, behavior?: ScrollBehavior) => void;
+export default useSmoothScroll;

package/useSmoothScroll.js

@@ -0,0 +1,32 @@
+import { useCallback } from "react";
+import { isNumber } from "@koine/utils";
+import { getOffsetTopSlim, scrollTo } from "@koine/dom";
+import { useFixedOffset } from "./useFixedOffset";
+export let useSmoothScroll = (disregardAutomaticFixedOffset) => {
+    const fixedOffset = useFixedOffset();
+    const scroll = useCallback((to, customOffset, callback, fallbackTimeout, behavior) => {
+        let top = undefined;
+        let toIsElement = false;
+        if (isNumber(to)) {
+            top = to;
+        }
+        else if (to) {
+            const el = document.getElementById(to);
+            if (el) {
+                top = getOffsetTopSlim(el) - fixedOffset.current;
+                toIsElement = true;
+            }
+        }
+        if (isNumber(top)) {
+            top =
+                top +
+                    (customOffset || 0) +
+                    (disregardAutomaticFixedOffset || toIsElement
+                        ? 0
+                        : fixedOffset.current);
+            scrollTo(top, callback, fallbackTimeout, behavior);
+        }
+    }, [disregardAutomaticFixedOffset, fixedOffset]);
+    return scroll;
+};
+export default useSmoothScroll;

package/useSpinDelay.d.ts

@@ -0,0 +1,2 @@
+export declare let useSpinDelay: (loading: boolean, delay?: number, minDuration?: number) => boolean;
+export default useSpinDelay;

package/useSpinDelay.js

@@ -0,0 +1,36 @@
+import { useEffect, useRef, useState } from "react";
+var State;
+(function (State) {
+    State[State["IDLE"] = 0] = "IDLE";
+    State[State["DELAY"] = 1] = "DELAY";
+    State[State["DISPLAY"] = 2] = "DISPLAY";
+    State[State["EXPIRE"] = 3] = "EXPIRE";
+})(State || (State = {}));
+export let useSpinDelay = (loading, delay = 500, minDuration = 200) => {
+    const [state, setState] = useState(State.IDLE);
+    const timeout = useRef();
+    useEffect(() => {
+        if (loading && state === State.IDLE) {
+            clearTimeout(timeout.current);
+            timeout.current = setTimeout(() => {
+                if (!loading) {
+                    return setState(State.IDLE);
+                }
+                timeout.current = setTimeout(() => {
+                    setState(State.EXPIRE);
+                }, minDuration);
+                setState(State.DISPLAY);
+            }, delay);
+            setState(State.DELAY);
+        }
+        if (!loading && state !== State.DISPLAY) {
+            clearTimeout(timeout.current);
+            setState(State.IDLE);
+        }
+    }, [loading, state, delay, minDuration]);
+    useEffect(() => {
+        return () => clearTimeout(timeout.current);
+    }, []);
+    return state === State.DISPLAY || state === State.EXPIRE;
+};
+export default useSpinDelay;

package/useTraceUpdate.d.ts

@@ -0,0 +1,2 @@
+export declare let useTraceUpdate: (props: any) => void;
+export default useTraceUpdate;

package/useTraceUpdate.js

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from "react";
+export let useTraceUpdate = (props) => {
+    const prev = useRef(props);
+    useEffect(() => {
+        const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
+            if (prev.current[k] !== v) {
+                ps[k] = [prev.current[k], v];
+            }
+            return ps;
+        }, {});
+        if (Object.keys(changedProps).length > 0) {
+            console.info("[@koine/react:useTraceUpdate] changed props:", changedProps);
+        }
+        prev.current = props;
+    });
+};
+export default useTraceUpdate;