@koine/react 2.0.0-beta.5 → 2.0.0-beta.50

package/hooks/usePreviousRef.mjs

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

package/hooks/useScrollPosition.js

@@ -1,83 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useScrollPosition: function() {
-        return useScrollPosition;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _react = require("react");
-const _isBrowser = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isBrowser"));
-const _listenScroll = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/listenScroll"));
-const _useIsomorphicLayoutEffect = /*#__PURE__*/ _interop_require_default._(require("./useIsomorphicLayoutEffect"));
-const zeroPosition = {
-    x: 0,
-    y: 0
-};
-const getClientRect = (element)=>element?.getBoundingClientRect();
-const getScrollPosition = (element, boundingElement)=>{
-    if (!_isBrowser.default) {
-        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
-    };
-};
-const useScrollPosition = (effect, deps = [], element, boundingElement, wait)=>{
-    const position = (0, _react.useRef)(getScrollPosition(null, boundingElement));
-    let throttleTimeout = null;
-    const callBack = ()=>{
-        const current = getScrollPosition(element, boundingElement);
-        effect(current, position.current);
-        position.current = current;
-        throttleTimeout = null;
-    };
-    (0, _useIsomorphicLayoutEffect.default)(()=>{
-        if (!_isBrowser.default) {
-            return undefined;
-        }
-        const handleScroll = ()=>{
-            if (wait) {
-                if (throttleTimeout === null) {
-                    throttleTimeout = window.setTimeout(callBack, wait);
-                }
-            } else {
-                callBack();
-            }
-        };
-        const listener = (0, _listenScroll.default)(handleScroll, boundingElement?.current);
-        return ()=>{
-            listener();
-            if (throttleTimeout) {
-                clearTimeout(throttleTimeout);
-            }
-        };
-    }, deps);
-};
-const _default = useScrollPosition;

package/hooks/useScrollPosition.mjs

@@ -1,70 +0,0 @@
-import { useRef } from "react";
-import isBrowser from "@koine/utils/isBrowser";
-import listenScroll from "@koine/dom/listenScroll";
-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
-    };
-};
-/**
- * @borrows [@n8tb1t/use-scroll-position@2.0.3](https://github.com/n8tb1t/use-scroll-position) by `n8tb1t <n8tb1t@gmail.com>`
- *
- * We've just:
- * - reused internal helper functions
- * - compacted object arguments in functions as plain argument list to improve compression
- */ export const 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/hooks/useScrollThreshold.js

@@ -1,52 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useScrollThreshold: function() {
-        return useScrollThreshold;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _react = require("react");
-const _noop = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/noop"));
-const _listenScroll = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/listenScroll"));
-const useScrollThreshold = (threshold, callback)=>{
-    const [isBelow, setIsBelow] = (0, _react.useState)(false);
-    const handler = (0, _react.useCallback)(()=>{
-        if (threshold) {
-            const posY = window.scrollY; // * -1;
-            const isAbove = posY < threshold;
-            const isBelow = posY > threshold;
-            // console.log("useScrollThreshold setIsBelow", isBelow, posY, threshold);
-            setIsBelow(isBelow);
-            if (callback) callback(isAbove, isBelow);
-        }
-    }, [
-        threshold,
-        callback
-    ]);
-    (0, _react.useEffect)(()=>{
-        if (threshold) {
-            // const listener = listenScrollThrottled(0, handler, 50);
-            const listener = (0, _listenScroll.default)(handler);
-            handler();
-            return listener;
-        }
-        return _noop.default;
-    }, [
-        threshold,
-        handler
-    ]);
-    return isBelow;
-};
-const _default = useScrollThreshold;

package/hooks/useScrollThreshold.mjs

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

package/hooks/useScrollTo.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useScrollTo: function() {
-        return useScrollTo;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _isBrowser = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isBrowser"));
-const _useHeader = /*#__PURE__*/ _interop_require_default._(require("../Header/useHeader"));
-function useScrollTo(id = "", offset = 0) {
-    const [, , headerHeight] = (0, _useHeader.default)();
-    if (!_isBrowser.default) {
-        return;
-    }
-    const headerOffset = headerHeight || 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);
-}
-const _default = useScrollTo;

package/hooks/useScrollTo.mjs

@@ -1,20 +0,0 @@
-import isBrowser from "@koine/utils/isBrowser";
-import useHeader from "../Header/useHeader";
-export function useScrollTo(id = "", offset = 0) {
-    const [, , headerHeight] = useHeader();
-    if (!isBrowser) {
-        return;
-    }
-    const headerOffset = headerHeight || 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/hooks/useSmoothScroll.js

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useSmoothScroll: function() {
-        return useSmoothScroll;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _react = require("react");
-const _isNumber = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isNumber"));
-const _getOffsetTopSlim = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/getOffsetTopSlim"));
-const _scrollTo = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/scrollTo"));
-const _useFixedOffset = /*#__PURE__*/ _interop_require_default._(require("./useFixedOffset"));
-function useSmoothScroll(disregardAutomaticFixedOffset) {
-    const fixedOffset = (0, _useFixedOffset.default)();
-    const scroll = (0, _react.useCallback)((to, customOffset, callback, fallbackTimeout, behavior)=>{
-        let top = undefined;
-        let toIsElement = false;
-        if ((0, _isNumber.default)(to)) {
-            top = to;
-        } else if (to) {
-            const el = document.getElementById(to);
-            if (el) {
-                top = (0, _getOffsetTopSlim.default)(el) - fixedOffset.current;
-                toIsElement = true;
-            }
-        }
-        if ((0, _isNumber.default)(top)) {
-            top = top + (customOffset || 0) + (disregardAutomaticFixedOffset || toIsElement ? 0 : fixedOffset.current);
-            (0, _scrollTo.default)(top, callback, fallbackTimeout, behavior);
-        }
-    }, [
-        disregardAutomaticFixedOffset,
-        fixedOffset
-    ]);
-    return scroll;
-}
-const _default = useSmoothScroll;

package/hooks/useSmoothScroll.mjs

@@ -1,35 +0,0 @@
-import { useCallback } from "react";
-import isNumber from "@koine/utils/isNumber";
-import getOffsetTopSlim from "@koine/dom/getOffsetTopSlim";
-import scrollTo from "@koine/dom/scrollTo";
-import useFixedOffset from "./useFixedOffset";
-/**
- *
- * @param disregardAutomaticFixedOffset When the `to` scroll argument is a DOM
- * selector we will keep into account the _fixedOffset_ despite this option.
- * @returns
- */ export function 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/hooks/useSpinDelay.js

@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useSpinDelay: function() {
-        return useSpinDelay;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _react = require("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 = {}));
-function useSpinDelay(loading, delay = 500, minDuration = 200) {
-    const [state, setState] = (0, _react.useState)(0);
-    const timeout = (0, _react.useRef)();
-    (0, _react.useEffect)(()=>{
-        if (loading && state === 0) {
-            clearTimeout(timeout.current);
-            timeout.current = setTimeout(()=>{
-                if (!loading) {
-                    return setState(0);
-                }
-                timeout.current = setTimeout(()=>{
-                    setState(3);
-                }, minDuration);
-                setState(2);
-            }, delay);
-            setState(1);
-        }
-        if (!loading && state !== 2) {
-            clearTimeout(timeout.current);
-            setState(0);
-        }
-    }, [
-        loading,
-        state,
-        delay,
-        minDuration
-    ]);
-    (0, _react.useEffect)(()=>{
-        return ()=>clearTimeout(timeout.current);
-    }, []);
-    return state === 2 || state === 3;
-}
-const _default = useSpinDelay;

package/hooks/useSpinDelay.mjs

@@ -1,52 +0,0 @@
-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 = {}));
-/**
- * Wraps your booleans only returning true after the `delay`, and for a minimum
- * time of `minDuration`. This way you're sure that you don't show unnecessary
- * or very short living spinners.
- *
- * @borrows [smeijer/spin-delay](https://github.com/smeijer/spin-delay)
- *
- * - Smaller footprint and options object as argument
- *
- * @param delay [500]
- * @param minDuration [200]
- */ export function useSpinDelay(loading, delay = 500, minDuration = 200) {
-    const [state, setState] = useState(0);
-    const timeout = useRef();
-    useEffect(()=>{
-        if (loading && state === 0) {
-            clearTimeout(timeout.current);
-            timeout.current = setTimeout(()=>{
-                if (!loading) {
-                    return setState(0);
-                }
-                timeout.current = setTimeout(()=>{
-                    setState(3);
-                }, minDuration);
-                setState(2);
-            }, delay);
-            setState(1);
-        }
-        if (!loading && state !== 2) {
-            clearTimeout(timeout.current);
-            setState(0);
-        }
-    }, [
-        loading,
-        state,
-        delay,
-        minDuration
-    ]);
-    useEffect(()=>{
-        return ()=>clearTimeout(timeout.current);
-    }, []);
-    return state === 2 || state === 3;
-}
-export default useSpinDelay;

package/hooks/useTraceUpdate.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useTraceUpdate: function() {
-        return useTraceUpdate;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _react = require("react");
-function useTraceUpdate(props) {
-    const prev = (0, _react.useRef)(props);
-    (0, _react.useEffect)(()=>{
-        const changedProps = Object.entries(props).reduce((ps, [k, v])=>{
-            if (prev.current[k] !== v) {
-                // @ts-expect-error Does not matter here...
-                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;
-    });
-}
-const _default = useTraceUpdate;

package/hooks/useTraceUpdate.mjs

@@ -1,23 +0,0 @@
-import { useEffect, useRef } from "react";
-/**
- * @see https://stackoverflow.com/a/51082563/9122820
- */ export function useTraceUpdate(props) {
-    const prev = useRef(props);
-    useEffect(()=>{
-        const changedProps = Object.entries(props).reduce((ps, [k, v])=>{
-            if (prev.current[k] !== v) {
-                // @ts-expect-error Does not matter here...
-                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/hooks/useUpdateEffect.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useUpdateEffect: function() {
-        return useUpdateEffect;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _react = require("react");
-const _useFirstMountState = require("./useFirstMountState");
-const useUpdateEffect = (effect, deps)=>{
-    const isFirstMount = (0, _useFirstMountState.useFirstMountState)();
-    (0, _react.useEffect)(()=>{
-        if (!isFirstMount) {
-            return effect();
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-};
-const _default = useUpdateEffect;

package/hooks/useUpdateEffect.mjs

@@ -1,14 +0,0 @@
-import { useEffect } from "react";
-import { useFirstMountState } from "./useFirstMountState";
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
- */ export const useUpdateEffect = (effect, deps)=>{
-    const isFirstMount = useFirstMountState();
-    useEffect(()=>{
-        if (!isFirstMount) {
-            return effect();
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-};
-export default useUpdateEffect;

package/hooks/useWindowSize.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useWindowSize: function() {
-        return useWindowSize;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _react = require("react");
-const _listenResize = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/listenResize"));
-const _listenResizeDebounced = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/listenResizeDebounced"));
-function useWindowSize(wait, immediate) {
-    const [width, widthSet] = (0, _react.useState)(0);
-    const [height, heightSet] = (0, _react.useState)(0);
-    (0, _react.useEffect)(()=>{
-        function updateSize() {
-            widthSet(window.innerWidth);
-            heightSet(window.innerHeight);
-        }
-        const listener = wait ? (0, _listenResizeDebounced.default)(0, updateSize, wait, immediate) : (0, _listenResize.default)(updateSize);
-        updateSize();
-        return listener;
-    }, [
-        wait,
-        immediate
-    ]);
-    return [
-        width,
-        height
-    ];
-}
-const _default = useWindowSize;