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

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;

package/useUpdateEffect.d.ts

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

package/useUpdateEffect.js

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { useFirstMountState } from "./useFirstMountState";
+export let useUpdateEffect = (effect, deps) => {
+    const isFirstMount = useFirstMountState();
+    useEffect(() => {
+        if (!isFirstMount) {
+            return effect();
+        }
+    }, deps);
+};
+export default useUpdateEffect;

package/useWindowSize.d.ts

@@ -0,0 +1,3 @@
+import { debounce } from "@koine/utils";
+export declare let useWindowSize: (wait?: Parameters<typeof debounce>[1], immediate?: Parameters<typeof debounce>[2]) => readonly [number, number];
+export default useWindowSize;

package/useWindowSize.js

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+import { debounce } from "@koine/utils";
+import { listenResize, listenResizeDebounced } from "@koine/dom";
+export let useWindowSize = (wait, immediate) => {
+    const [width, widthSet] = useState(0);
+    const [height, heightSet] = useState(0);
+    useEffect(() => {
+        const updateSize = () => {
+            widthSet(window.innerWidth);
+            heightSet(window.innerHeight);
+        };
+        const listener = wait
+            ? listenResizeDebounced(0, updateSize, wait, immediate)
+            : listenResize(updateSize);
+        updateSize();
+        return listener;
+    }, [wait, immediate]);
+    return [width, height];
+};
+export default useWindowSize;

package/utils/Polymorphic.js

@@ -0,0 +1 @@
+export {};

package/utils/classed.js

@@ -0,0 +1,40 @@
+import React, { createElement, forwardRef } from "react";
+export let classed = (component) => {
+    const type = component.type || component;
+    return function (strings, ...args) {
+        const WrappedComponent = forwardRef(function (props, ref) {
+            const argResolved = args
+                .map((arg, index) => {
+                let result = "";
+                if (typeof arg === "function") {
+                    result = arg(props);
+                }
+                else if (typeof arg !== "undefined") {
+                    result = arg.toString();
+                }
+                return strings[index] + result;
+            })
+                .join("");
+            const isNativeHtmlElement = typeof type === "string";
+            const propsToForward = isNativeHtmlElement
+                ? {}
+                : props;
+            if (isNativeHtmlElement) {
+                for (const key in props) {
+                    if (!key.startsWith("$")) {
+                        propsToForward[key] = props[key];
+                    }
+                }
+            }
+            let className = argResolved || strings[0];
+            className = className.match(/class="([^"]*)/)?.[1] || className;
+            className += props?.className ? " " + props?.className : "";
+            return createElement(type, {
+                ...propsToForward,
+                className: className || undefined,
+                ref,
+            });
+        });
+        return WrappedComponent;
+    };
+};