@onepercentio/one-ui 0.28.9 → 0.29.1

package/dist-ts/hooks/useHero.js

@@ -0,0 +1,287 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, } from "react";
+import ownEvent from "../utils/ownEvent";
+import Styles from "./useHero.module.scss";
+const ID = (id) => `${id}-hero`;
+const viewport = window.visualViewport;
+const DATA_TAG_HERO_COMPONENT = "data-hero-component";
+function triggerDynamicComponents(clone, componentsFromOriginThatWillAppear, origin) {
+    const idsThatWillAppear = componentsFromOriginThatWillAppear.map((a) => a.getAttribute(DATA_TAG_HERO_COMPONENT));
+    const preexistingComponents = Array.from(clone.querySelectorAll(`[${DATA_TAG_HERO_COMPONENT}]`));
+    const removedElements = preexistingComponents.filter((el) => !idsThatWillAppear.includes(el.getAttribute(DATA_TAG_HERO_COMPONENT)));
+    for (let elementThatIsBeingRemoved of removedElements) {
+        for (let heightKey of ["height", "minHeight", "maxHeight"])
+            elementThatIsBeingRemoved.style[heightKey] = `${elementThatIsBeingRemoved.clientHeight}px`;
+    }
+    setTimeout(() => {
+        for (let elementThatIsBeingRemoved of removedElements) {
+            for (let heightKey of ["height", "minHeight", "maxHeight"])
+                elementThatIsBeingRemoved.style[heightKey] = `0px`;
+            elementThatIsBeingRemoved.style.opacity = `0`;
+        }
+    }, 0);
+    for (let componentThatWillAppear of componentsFromOriginThatWillAppear) {
+        const alreadyInjectedElement = !!clone.querySelector(`[${DATA_TAG_HERO_COMPONENT}="${componentThatWillAppear.getAttribute(DATA_TAG_HERO_COMPONENT)}"]`);
+        if (!alreadyInjectedElement) {
+            function recursiveBuildPath(fromElement, pathSuffix = "") {
+                if (fromElement === origin)
+                    return pathSuffix;
+                const parent = fromElement.parentElement;
+                const parentChilds = Array.from(parent.children);
+                const elChildSelector = `:nth-child(${parentChilds.indexOf(fromElement) + 1})`;
+                if (fromElement !== origin)
+                    return recursiveBuildPath(parent, `${elChildSelector}${pathSuffix ? `>${pathSuffix}` : ""}`);
+                else
+                    return pathSuffix;
+            }
+            const whatIsTheElementPathFromCloneElement = recursiveBuildPath(componentThatWillAppear.parentElement);
+            const insertAtIndex = Array.from(componentThatWillAppear.parentElement.children).indexOf(componentThatWillAppear);
+            const targetElementClone = componentThatWillAppear.cloneNode(true);
+            for (let heightKey of ["height", "minHeight", "maxHeight"])
+                targetElementClone.style[heightKey] = "0px";
+            const shouldBeInsertedAtElement = whatIsTheElementPathFromCloneElement
+                ? clone.querySelector(whatIsTheElementPathFromCloneElement)
+                : clone;
+            const remainingIndexes = Array.from(shouldBeInsertedAtElement.children)
+                .map((el, i) => removedElements.includes(el) ? undefined : i)
+                .filter((e) => e !== undefined);
+            if (insertAtIndex === remainingIndexes.length)
+                shouldBeInsertedAtElement.append(targetElementClone);
+            else
+                shouldBeInsertedAtElement.insertBefore(targetElementClone, shouldBeInsertedAtElement.childNodes.item(remainingIndexes[insertAtIndex]));
+            setTimeout(() => {
+                for (let heightKey of ["height", "minHeight", "maxHeight"])
+                    targetElementClone.style[heightKey] = `${componentThatWillAppear.clientHeight}px`;
+            }, 0);
+        }
+    }
+}
+const ALWAYS_TRANSITION = ["top", "left"];
+/**
+ * This hook implements the logic for a hero animation between 2 elements sharing the same id
+ */
+export default function useHero(id, options = {
+    propsToTransition: [],
+}, events = {}) {
+    const { propsToTransition: _p = [], "data-preffix": dataPreffix, repeatable, } = options;
+    const propsToTransition = useMemo(() => _p.map((p) => p.replace(/([A-Z])/g, (_, val) => `-${val.toLowerCase()}`)), [_p]);
+    const _dataPreffix = dataPreffix ? `-${dataPreffix}` : "";
+    const dataProperty = `data${_dataPreffix}-hero`;
+    const heroRef = useRef(null);
+    useLayoutEffect(() => {
+        heroRef.current.setAttribute(dataProperty, id);
+    }, [id]);
+    const getHerosOnScreen = useCallback(() => {
+        const otherElements = Array.from(document.querySelectorAll(`[${dataProperty}="${id}"]`)).filter((el) => el !== heroRef.current);
+        return otherElements;
+    }, [id]);
+    function triggerHeroAnimation() {
+        const allPropsToTransition = options.overridePropsToTransition
+            ? [...ALWAYS_TRANSITION, ...propsToTransition]
+            : ["width", "height", ...ALWAYS_TRANSITION, ...propsToTransition];
+        const shouldHeroFn = events.onHeroDetect || ((...a) => true);
+        const otherElements = getHerosOnScreen().filter((el) => shouldHeroFn(el, heroRef.current));
+        const currentElement = heroRef.current;
+        const currentElCoordinates = currentElement.getBoundingClientRect();
+        if (process.env.NODE_ENV === "development" && otherElements.length > 2)
+            console.warn("There are too many elements to transition to, I will transition to the first I find", otherElements);
+        const otherElement = otherElements.find((el) => el !== heroRef.current);
+        if (otherElement) {
+            const [originContainer, targetContainer] = events.onBeforeTransition
+                ? events.onBeforeTransition(otherElement, heroRef.current)
+                : [viewport, viewport];
+            const shouldSkip = isElementOutsideContainer(targetContainer, currentElCoordinates) ||
+                isElementOutsideContainer(originContainer, otherElement.getBoundingClientRect())
+                ? (events.onHeroSkip || (() => true))(otherElement, heroRef.current)
+                : false;
+            if (shouldSkip) {
+                events.onHeroSkipped?.();
+                return;
+            }
+            const oldClone = document.querySelector(`[${dataProperty}-clone="${ID(id)}"]`);
+            const clone = (oldClone ||
+                otherElement.cloneNode(true));
+            if (events.onHeroCloned && !oldClone)
+                events.onHeroCloned(clone);
+            // Clean up thos properties that can cause confusion since it's a clone
+            clone.style.visibility = "";
+            clone.removeAttribute(dataProperty);
+            clone.setAttribute(`${dataProperty}-clone`, ID(id));
+            /**
+             * If it's repeatable, we should keep the flag that indicates the hero existance
+             */
+            if (!repeatable)
+                // Since a transition is now triggering from the old element, he cannot be considered for other transitions
+                otherElement.removeAttribute(dataProperty);
+            function willTheHeroMove(origin, target) {
+                return !(origin.top === target.top &&
+                    origin.left === target.left &&
+                    origin.width === target.width &&
+                    origin.height === target.height);
+            }
+            /**
+             *
+             * @param el
+             * @returns Returns if it will move
+             */
+            function setCloneToCoordinatesOf(el) {
+                const coordinates = el.getBoundingClientRect();
+                const currentCoordinates = clone.getBoundingClientRect();
+                const willMove = willTheHeroMove(coordinates, currentCoordinates);
+                clone.style.position = "fixed";
+                clone.style.top = `${coordinates.top}px`;
+                clone.style.left = `${coordinates.left}px`;
+                if (allPropsToTransition.includes("width"))
+                    clone.style.width = `${coordinates.width}px`;
+                if (allPropsToTransition.includes("height"))
+                    clone.style.height = `${coordinates.height}px`;
+                return willMove;
+            }
+            const coordinates = otherElement.getBoundingClientRect();
+            const currentCoordinates = heroRef.current.getBoundingClientRect();
+            const itWontMove = !willTheHeroMove(coordinates, currentCoordinates);
+            if (itWontMove)
+                return;
+            if (!oldClone) {
+                /** Set the clone over the starting element */
+                setCloneToCoordinatesOf(otherElement);
+                document.body.appendChild(clone);
+            }
+            heroRef.current.style.visibility = "hidden";
+            otherElement.style.visibility = "hidden";
+            for (let propToTransition of propsToTransition) {
+                clone.style[propToTransition] =
+                    window.getComputedStyle(otherElement)[propToTransition];
+            }
+            clone.style.transition = `${allPropsToTransition
+                .map((prop) => `${prop.replace(/[A-Z]/g, (sub) => `-${sub.toLowerCase()}`)} var(--animation--speed-fast, 250ms) ease-out`)
+                .join(", ")}`;
+            setTimeout(() => {
+                const elItWillTransitionTo = heroRef.current;
+                const cleanup = () => {
+                    if (events.onHeroEnd)
+                        events.onHeroEnd();
+                    if (elItWillTransitionTo) {
+                        if (repeatable)
+                            elItWillTransitionTo.setAttribute(dataProperty, id);
+                        elItWillTransitionTo.style.visibility = "";
+                    }
+                    setTimeout(() => {
+                        clone.remove();
+                    }, 0);
+                };
+                triggerDynamicComponents(clone, Array.from(heroRef.current.querySelectorAll(`[${DATA_TAG_HERO_COMPONENT}]`)), currentElement);
+                if (events.onHeroStart) {
+                    events.onHeroStart(clone, otherElement, heroRef.current);
+                }
+                if (!elItWillTransitionTo) {
+                    cleanup();
+                    return;
+                }
+                /** Set the clone over the new position */
+                const willMove = setCloneToCoordinatesOf(elItWillTransitionTo);
+                if (!willMove)
+                    cleanup();
+                else {
+                    for (let propToTransition of propsToTransition)
+                        clone.style[propToTransition] =
+                            window.getComputedStyle(elItWillTransitionTo)[propToTransition];
+                    let initialOffset;
+                    const s = ({ target }) => {
+                        const d = target;
+                        if (d.contains(elItWillTransitionTo)) {
+                            if (initialOffset === undefined)
+                                initialOffset = d.scrollTop;
+                            else
+                                clone.style.marginTop = `${-(d.scrollTop - initialOffset)}px`;
+                        }
+                    };
+                    const transitionEndCb = ownEvent(({ target, currentTarget }) => {
+                        if (target === currentTarget)
+                            cleanup();
+                        document.removeEventListener("scroll", s, true);
+                    });
+                    document.addEventListener("scroll", s, true);
+                    clone.addEventListener("transitionend", transitionEndCb);
+                    clone.addEventListener("transitionstart", () => {
+                        const onCancelCb = ownEvent((e) => {
+                            clone.removeEventListener("transitionend", transitionEndCb);
+                            clone.removeEventListener("transitioncancel", onCancelCb);
+                        });
+                        clone.addEventListener("transitioncancel", onCancelCb);
+                    });
+                }
+            }, 0);
+        }
+    }
+    useEffect(() => {
+        triggerHeroAnimation();
+    }, []);
+    return {
+        heroRef,
+        getHerosOnScreen,
+        trigger: triggerHeroAnimation,
+        heroComponentRef: (componentId) => (elRef) => {
+            if (elRef) {
+                elRef.setAttribute(DATA_TAG_HERO_COMPONENT, componentId);
+                elRef.classList.add(Styles.component);
+            }
+        },
+    };
+}
+function isElementOutsideViewport(coordinates) {
+    const elementOverflowsViewport = coordinates.left >= viewport.width || coordinates.top >= viewport.height;
+    const elementUnderflowsViewport = coordinates.left <= -coordinates.width ||
+        coordinates.top <= -coordinates.height;
+    return elementOverflowsViewport || elementUnderflowsViewport;
+}
+function isElementOutsideContainer(container, coordinates) {
+    if (container instanceof VisualViewport) {
+        return isElementOutsideViewport(coordinates);
+    }
+    else {
+        const containerBounds = container.getBoundingClientRect();
+        const isContainerOutsideViewport = isElementOutsideViewport(containerBounds);
+        if (isContainerOutsideViewport)
+            return true;
+        const elementOverflowsViewport = coordinates.left >= containerBounds.left + containerBounds.width ||
+            coordinates.top >= containerBounds.top + containerBounds.height;
+        const elementUnderflowsViewport = containerBounds.left - coordinates.left >= coordinates.width ||
+            containerBounds.top - coordinates.top >= coordinates.height;
+        return elementUnderflowsViewport || elementOverflowsViewport;
+    }
+}
+function centerPoint(rect) {
+    return [rect.left + rect.width / 2, rect.top + rect.height / 2];
+}
+const angle = (pointA, pointB) => Number((Math.atan2(pointA[1] - pointB[1], pointA[0] - pointB[0]) *
+    (179.08 / Math.PI)).toFixed(5));
+export const TRANSITION_FACTORY = {
+    ACCELERATION: (events) => ({
+        ...events,
+        onHeroStart(clone, origin, target) {
+            if (events?.onHeroStart)
+                events.onHeroStart(clone, origin, target);
+            clone.classList.add(Styles.acceleration);
+            const centerPointOrigin = centerPoint(origin.getBoundingClientRect());
+            const centerPointDestination = centerPoint(target.getBoundingClientRect());
+            const angleBetweenElements = angle(centerPointOrigin, centerPointDestination);
+            const vectorX = Math.sin(angleBetweenElements);
+            const vectorY = Math.cos(angleBetweenElements);
+            const rotateY = (10 * vectorY).toFixed(0);
+            const originX = (vectorY + 1) * 50;
+            const rotateX = -(10 * vectorX).toFixed(0);
+            const originY = (vectorX + 1) * 50;
+            clone.style.setProperty("--stage-1", `rotateY(${rotateY}deg) rotateX(${-rotateX}deg)`);
+            clone.style.setProperty("--stage-2", `rotateY(${-rotateY * 0.3}deg) rotateX(${rotateX * 0.3}deg)`);
+            clone.style.setProperty("--origin-1", `${originX}% ${originY}%`);
+            clone.style.setProperty("--origin-2", `${100 - originX}% ${100 - originY}%`);
+            document.body.style.perspective = "100vw";
+        },
+        onHeroEnd() {
+            if (events?.onHeroEnd)
+                events.onHeroEnd();
+            document.body.style.perspective = "";
+        },
+    }),
+};
+//# sourceMappingURL=useHero.js.map

package/dist-ts/hooks/useHero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHero.js","sourceRoot":"","sources":["../../src/hooks/useHero.ts"],"names":[],"mappings":"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"}

package/dist-ts/hooks/useHero.module.scss

@@ -0,0 +1,41 @@
+@import "../assets/styles/index.scss";
+
+$timing: cubic-bezier(0.5, -0.45, 0.44, 1.37);
+// $timing: cubic-bezier(0.73, -0.49, 0.16, 1.4);
+
+.acceleration {
+  --animation--speed-fast: 1s;
+  animation-name: acceleration;
+  animation-duration: var(--animation--speed-fast);
+  animation-timing-function: $timing;
+  transition-timing-function: $timing !important;
+  transform-origin: var(--origin-1);
+}
+
+@keyframes acceleration {
+  0% {
+    transform: rotateY(0deg);
+  }
+  10% {
+    transform-origin: var(--origin-1);
+    transform: var(--stage-1);
+  }
+
+  70% {
+    transform: var(--stage-1);
+    transform-origin: var(--origin-1);
+  }
+  85% {
+    transform-origin: var(--origin-2);
+    transform: var(--stage-2);
+  }
+  100% {
+    transform: rotateY(0deg);
+  }
+}
+
+.component:not([data-hero-clone]) {
+  transition: height $fast linear, opacity $fast linear, min-height $fast linear,
+    max-height $fast linear !important;
+  overflow: hidden;
+}

package/dist-ts/hooks/useIntersection.d.ts

@@ -0,0 +1,4 @@
+export default function useIntersection(): {
+    observe: (e: HTMLOrSVGElement, cb: () => void) => void;
+    unobserve: (e: HTMLOrSVGElement) => void;
+};

package/dist-ts/hooks/useIntersection.js

@@ -0,0 +1,27 @@
+import { useMemo, useRef } from "react";
+export default function useIntersection() {
+    const { current: targetMap } = useRef([]);
+    const { current: observer } = useRef(("IntersectionObserver" in window) ? new IntersectionObserver((els) => {
+        els.forEach((e, i) => {
+            const result = targetMap.find((el) => el[0] === e.target);
+            if (result && e.isIntersecting) {
+                result[1]();
+            }
+        });
+    }) : null);
+    return useMemo(() => {
+        return {
+            observe: (e, cb) => {
+                targetMap.push([e, cb]);
+                if (observer)
+                    observer.observe(e);
+            },
+            unobserve: (e) => {
+                if (observer)
+                    observer.unobserve(e);
+                targetMap.splice(targetMap.findIndex((el) => el[0] === e), 1);
+            },
+        };
+    }, []);
+}
+//# sourceMappingURL=useIntersection.js.map

package/dist-ts/hooks/useIntersection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersection.js","sourceRoot":"","sources":["../../src/hooks/useIntersection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAExC,MAAM,CAAC,OAAO,UAAU,eAAe;IACrC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAAmC,EAAE,CAAC,CAAC;IAC5E,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,MAAM,CAClC,CAAC,sBAAsB,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,GAAG,EAAE,EAAE;QACpE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACnB,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,MAAa,CAAC,CAAC;YACjE,IAAI,MAAM,IAAI,CAAC,CAAC,cAAc,EAAE,CAAC;gBAC/B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;YACd,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CACV,CAAC;IACF,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,OAAO;YACL,OAAO,EAAE,CAAC,CAAmB,EAAE,EAAc,EAAE,EAAE;gBAC/C,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;gBACxB,IAAI,QAAQ;oBACZ,QAAQ,CAAC,OAAO,CAAC,CAAQ,CAAC,CAAC;YAC7B,CAAC;YACD,SAAS,EAAE,CAAC,CAAmB,EAAE,EAAE;gBACjC,IAAI,QAAQ;oBACZ,QAAQ,CAAC,SAAS,CAAC,CAAQ,CAAC,CAAC;gBAC7B,SAAS,CAAC,MAAM,CACd,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EACxC,CAAC,CACF,CAAC;YACJ,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC"}

package/dist-ts/hooks/useMergeRefs.d.ts

@@ -0,0 +1,9 @@
+import { useRef } from "react";
+/**
+ * This function exists so we can work with multiple refs as a single one
+ */
+export default function useMergeRefs<T extends ReturnType<typeof useRef>>(mainRef: T, ...otherRefs: T[]): T;
+/**
+ * This function exists so we can work with multiple refs as a single one, almost immediatly
+ */
+export declare function useMergeRefsFunc<T extends ReturnType<typeof useRef> | ((ref: any) => void)>(mainRef: T, ...otherRefs: T[]): (providedRef: any) => void;

package/dist-ts/hooks/useMergeRefs.js

@@ -0,0 +1,26 @@
+import { useLayoutEffect } from "react";
+/**
+ * This function exists so we can work with multiple refs as a single one
+ */
+export default function useMergeRefs(mainRef, ...otherRefs) {
+    useLayoutEffect(() => {
+        for (let ref of otherRefs)
+            ref.current = mainRef.current;
+    }, []);
+    return mainRef;
+}
+/**
+ * This function exists so we can work with multiple refs as a single one, almost immediatly
+ */
+export function useMergeRefsFunc(mainRef, ...otherRefs) {
+    return (providedRef) => {
+        if (providedRef)
+            for (let ref of [mainRef, ...otherRefs]) {
+                if (typeof ref === "function")
+                    ref(providedRef);
+                else
+                    ref.current = providedRef;
+            }
+    };
+}
+//# sourceMappingURL=useMergeRefs.js.map

package/dist-ts/hooks/useMergeRefs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMergeRefs.js","sourceRoot":"","sources":["../../src/hooks/useMergeRefs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,eAAe,EAAU,MAAM,OAAO,CAAC;AAE3D;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,OAAU,EACV,GAAG,SAAc;IAEjB,eAAe,CAAC,GAAG,EAAE;QACnB,KAAK,IAAI,GAAG,IAAI,SAAS;YAAE,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IAC3D,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,OAAO,CAAC;AACjB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAE9B,OAAU,EAAE,GAAG,SAAc;IAC7B,OAAO,CAAC,WAAgB,EAAE,EAAE;QAC1B,IAAI,WAAW;YACb,KAAK,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,EAAE,CAAC;gBACxC,IAAI,OAAO,GAAG,KAAK,UAAU;oBAAE,GAAG,CAAC,WAAW,CAAC,CAAC;;oBAC3C,GAAG,CAAC,OAAO,GAAG,WAAW,CAAC;YACjC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}

package/dist-ts/hooks/useObserve.d.ts

@@ -0,0 +1,2 @@
+import "./shims/ObjectWatchShim.js";
+export default function useObserve<T extends any>(toObserve: T | T[], keysToObserve: (keyof T)[]): void;

package/dist-ts/hooks/useObserve.js

@@ -0,0 +1,15 @@
+import { useLayoutEffect, useState } from "react";
+import "./shims/ObjectWatchShim.js";
+export default function useObserve(toObserve, keysToObserve) {
+    const [_, ss] = useState(0);
+    useLayoutEffect(() => {
+        const arr = Array.isArray(toObserve) ? toObserve : [toObserve];
+        const unwatchers = arr.map(object => object.watch(keysToObserve, () => {
+            ss((p) => {
+                return p + 1;
+            });
+        }));
+        return () => unwatchers.forEach(unwatch => unwatch());
+    }, [toObserve]);
+}
+//# sourceMappingURL=useObserve.js.map

package/dist-ts/hooks/useObserve.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useObserve.js","sourceRoot":"","sources":["../../src/hooks/useObserve.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,4BAA4B,CAAC;AAOpC,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,SAAkB,EAClB,aAA0B;IAE1B,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5B,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;QAC9D,MAAM,UAAU,GAAG,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAE,MAAiB,CAAC,KAAK,CAAC,aAAoB,EAAE,GAAG,EAAE;YACvF,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE;gBACP,OAAO,CAAC,GAAG,CAAC,CAAA;YACd,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC,CAAA;QAEH,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,CAAA;IACvD,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AAClB,CAAC"}

package/dist-ts/hooks/usePagination.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import useAsyncControl from "./useAsyncControl";
+type UpdateEvent<I extends any> = {
+    finished: boolean;
+    items: I[];
+    totalItems: number;
+};
+export default function usePagination<I extends any>(request: (page: number, pageSize: number | "all", currItems?: I[]) => Promise<UpdateEvent<I>>, paginationId?: object | any[] | (() => string), startingItems?: I[]): Paginable<I>;
+export type Paginable<I extends any, E extends any = any> = {
+    updateItems: (cb: (prevItems?: I) => UpdateEvent<I>["items"]) => void;
+    getNextPage: (pageSize: number) => void;
+    refreshCurrentPage: (pageSize: number) => void;
+    getPage: (page: number, pageSize: number) => void;
+    getAll: () => void;
+    totalItems: () => number | undefined;
+    loading: boolean;
+    error: E | Error | undefined;
+    items: I[] | undefined;
+    setError: ReturnType<typeof useAsyncControl>["setError"];
+    id: () => string;
+};
+export type LocalPaginable<I extends any, E extends any = any> = Paginable<I, E> & {
+    src: I;
+};
+/**
+ * This returns a ref to be bound to an elements so it can be able to detect when a pagination whould occur
+ */
+export declare function useContainerPagination(cb: (pageSize: number) => void, pageSize: number, direction?: "h" | "v"): {
+    scrollableRef: import("react").RefObject<HTMLDivElement | undefined>;
+    customOptionsRef: import("react").RefObject<(() => {
+        offsetBottom?: number;
+        offsetLeft?: number;
+    }) | undefined>;
+};
+/**
+ * This function receives an amount of local instances and paginates it
+ */
+export declare function useLocalPagination<L>(items: L[] | undefined): {
+    loading: boolean;
+    src: L[] | undefined;
+    updateItems: (cb: (prevItems?: L | undefined) => L[]) => void;
+    getNextPage: (pageSize: number) => void;
+    refreshCurrentPage: (pageSize: number) => void;
+    getPage: (page: number, pageSize: number) => void;
+    getAll: () => void;
+    totalItems: () => number | undefined;
+    error: any;
+    items: L[] | undefined;
+    setError: import("react").Dispatch<unknown>;
+    id: () => string;
+};
+export {};

package/dist-ts/hooks/usePagination.js

@@ -0,0 +1,147 @@
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import useAsyncControl from "./useAsyncControl";
+import throttle from "lodash/throttle";
+export default function usePagination(request, paginationId = () => "default", startingItems) {
+    const paginationDataRef = useRef({});
+    const { current: paginationData } = paginationDataRef;
+    const paginationIdFactory = useMemo(() => {
+        if (typeof paginationId === "object") {
+            const randId = Math.random();
+            return () => randId.toString();
+        }
+        else
+            return paginationId;
+    }, Array.isArray(paginationId) ? paginationId : [paginationId]);
+    const [items, setItems] = useState();
+    const [id, setId] = useState(() => paginationIdFactory());
+    useEffect(() => {
+        setId(paginationIdFactory());
+        if (startingItems)
+            setItems([paginationIdFactory(), startingItems]);
+        else
+            setItems(undefined);
+    }, [paginationIdFactory()]);
+    const { process, ...control } = useAsyncControl();
+    function updateItems(cb) {
+        setItems((prev) => [prev[0], cb()]);
+    }
+    const derivateCurrentPage = (pageSize) => {
+        if (items === undefined)
+            return 0;
+        const currentPage = Math.floor((items?.[1].length ?? 0) / pageSize) - 1;
+        return currentPage;
+    };
+    const _requestPage = useCallback(function (page, pageSize) {
+        const id = paginationIdFactory();
+        if (paginationData[id]?.finished)
+            return;
+        process(async () => {
+            const result = await request(page, pageSize, items?.[0] === id && page !== 0
+                ? pageSize === "all"
+                    ? undefined
+                    : items?.[1].slice(0, page * pageSize)
+                : undefined);
+            paginationData[id] = {
+                finished: result.finished,
+                totalItems: result.totalItems,
+            };
+            setItems((prev) => {
+                if (page === 0)
+                    return [id, result.items];
+                else if (!prev || id === prev[0])
+                    return [id, result.items];
+                return prev;
+            });
+        });
+    }, [items, request]);
+    return {
+        updateItems,
+        getNextPage: (pageSize) => {
+            _requestPage(derivateCurrentPage(pageSize) + 1, pageSize);
+        },
+        getPage: _requestPage,
+        getAll: () => {
+            _requestPage(0, "all");
+        },
+        refreshCurrentPage: (pageSize) => {
+            _requestPage(derivateCurrentPage(pageSize), pageSize);
+        },
+        totalItems: () => paginationData[paginationIdFactory()]?.totalItems,
+        id: () => id,
+        loading: control.loading,
+        error: control.error,
+        items: items?.[1],
+        setError: control.setError,
+    };
+}
+/**
+ * This returns a ref to be bound to an elements so it can be able to detect when a pagination whould occur
+ */
+export function useContainerPagination(cb, pageSize, direction = "v") {
+    const scrollableRef = useRef(undefined);
+    const customOptionsRef = useRef(undefined);
+    useEffect(() => {
+        const el = scrollableRef.current;
+        const scrollElement = el.scrollingElement || el;
+        const calculateIfReachedLimit = throttle((e) => {
+            if (e.target !== el)
+                return;
+            const { offsetBottom = 0, offsetLeft = 0 } = customOptionsRef.current?.() || {};
+            const offsetLimit = direction === "v"
+                ? scrollElement.scrollHeight -
+                    offsetBottom -
+                    scrollElement.clientHeight * 0.6
+                : scrollElement.scrollWidth -
+                    offsetLeft -
+                    scrollElement.clientWidth * 0.6;
+            const offset = direction === "v"
+                ? scrollElement.clientHeight + scrollElement.scrollTop
+                : scrollElement.clientWidth + scrollElement.scrollLeft;
+            if (offset >= offsetLimit) {
+                cb(pageSize);
+            }
+        }, 250, {
+            leading: false,
+            trailing: true,
+        });
+        el.addEventListener("scroll", calculateIfReachedLimit, {
+            passive: true,
+        });
+        return () => el.removeEventListener("scroll", calculateIfReachedLimit);
+    }, [cb, pageSize]);
+    return {
+        scrollableRef,
+        customOptionsRef,
+    };
+}
+/**
+ * This function receives an amount of local instances and paginates it
+ */
+export function useLocalPagination(items) {
+    const instanceID = useMemo(() => Date.now(), [items]);
+    const cb = useCallback((page, pageSize, currItems = []) => {
+        if (!items)
+            return Promise.resolve({
+                finished: false,
+                totalItems: 0,
+                items: [],
+            });
+        if (pageSize === "all")
+            pageSize = items.length;
+        const from = pageSize * page;
+        const newArray = [...currItems, ...items.slice(from, from + pageSize)];
+        return Promise.resolve({
+            finished: newArray.length === items.length,
+            totalItems: items.length,
+            items: newArray,
+        });
+    }, [items]);
+    const pagination = usePagination(cb, () => `${instanceID}`);
+    const pagSrc = useMemo(() => items, [pagination.items]);
+    return {
+        ...pagination,
+        loading: items === undefined,
+        src: pagSrc,
+    };
+}
+//# sourceMappingURL=usePagination.js.map