@open-condo/miniapp-utils/dist/hooks/useIntersectionObserver.mjs.map

A set of helper functions / components / hooks used to build new condo apps fast

{"version":3,"sources":["../../src/hooks/useIntersectionObserver.ts"],"sourcesContent":["// Minified version of https://github.com/juliencrn/usehooks-ts/blob/master/packages/usehooks-ts/src/useIntersectionObserver/useIntersectionObserver.ts\n\nimport { useEffect, useRef, useState } from 'react'\n\ntype State = {\n    isIntersecting: boolean\n    entry?: IntersectionObserverEntry\n}\n\ntype UseIntersectionObserverOptions = {\n    threshold?: number\n    onChange?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void\n    root?: Element | Document | null\n    rootMargin?: string\n}\n\ntype IntersectionReturnType = {\n    ref: (node?: Element | null) => void\n    isIntersecting: boolean\n    entry?: IntersectionObserverEntry\n}\n\nexport function useIntersectionObserver ({\n    threshold = 0,\n    root = null,\n    rootMargin = '0%',\n    onChange,\n}: UseIntersectionObserverOptions = {}): IntersectionReturnType {\n    const [ref, setRef] = useState<Element | null | undefined>(null)\n    const [state, setState] = useState<State>(() => ({\n        isIntersecting: false,\n        entry: undefined,\n    }))\n\n    const callbackRef = useRef<UseIntersectionObserverOptions['onChange']>()\n    callbackRef.current = onChange\n\n    useEffect(() => {\n        if (!ref) return\n        if (!('IntersectionObserver' in window)) return\n\n        const observer = new IntersectionObserver((entries) => {\n            const thresholds = observer.thresholds\n\n            entries.forEach((entry) => {\n                const isIntersecting =\n                    entry.isIntersecting &&\n                    thresholds.some(threshold => entry.intersectionRatio >= threshold)\n\n                setState({ isIntersecting, entry })\n\n                if (callbackRef.current) {\n                    callbackRef.current(isIntersecting, entry)\n                }\n            })\n        }, { threshold, root, rootMargin })\n\n        observer.observe(ref)\n\n        return () => {\n            observer.disconnect()\n        }\n    }, [ref, root, rootMargin, threshold])\n\n    // ensures that if the observed element changes, the intersection observer is reinitialized\n    const prevRef = useRef<Element | null>(null)\n\n    useEffect(() => {\n        if (\n            !ref &&\n            state.entry?.target &&\n            prevRef.current !== state.entry.target\n        ) {\n            prevRef.current = state.entry.target\n            setState({ isIntersecting: false, entry: undefined })\n        }\n    }, [ref, state.entry])\n\n    return {\n        entry: state.entry,\n        ref: setRef,\n        isIntersecting: state.isIntersecting,\n    }\n}"],"mappings":";AAEA,SAAS,WAAW,QAAQ,gBAAgB;AAoBrC,SAAS,wBAAyB;AAAA,EACrC,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,aAAa;AAAA,EACb;AACJ,IAAoC,CAAC,GAA2B;AAC5D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAqC,IAAI;AAC/D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAgB,OAAO;AAAA,IAC7C,gBAAgB;AAAA,IAChB,OAAO;AAAA,EACX,EAAE;AAEF,QAAM,cAAc,OAAmD;AACvE,cAAY,UAAU;AAEtB,YAAU,MAAM;AACZ,QAAI,CAAC,IAAK;AACV,QAAI,EAAE,0BAA0B,QAAS;AAEzC,UAAM,WAAW,IAAI,qBAAqB,CAAC,YAAY;AACnD,YAAM,aAAa,SAAS;AAE5B,cAAQ,QAAQ,CAAC,UAAU;AACvB,cAAM,iBACF,MAAM,kBACN,WAAW,KAAK,CAAAA,eAAa,MAAM,qBAAqBA,UAAS;AAErE,iBAAS,EAAE,gBAAgB,MAAM,CAAC;AAElC,YAAI,YAAY,SAAS;AACrB,sBAAY,QAAQ,gBAAgB,KAAK;AAAA,QAC7C;AAAA,MACJ,CAAC;AAAA,IACL,GAAG,EAAE,WAAW,MAAM,WAAW,CAAC;AAElC,aAAS,QAAQ,GAAG;AAEpB,WAAO,MAAM;AACT,eAAS,WAAW;AAAA,IACxB;AAAA,EACJ,GAAG,CAAC,KAAK,MAAM,YAAY,SAAS,CAAC;AAGrC,QAAM,UAAU,OAAuB,IAAI;AAE3C,YAAU,MAAM;AAnEpB;AAoEQ,QACI,CAAC,SACD,WAAM,UAAN,mBAAa,WACb,QAAQ,YAAY,MAAM,MAAM,QAClC;AACE,cAAQ,UAAU,MAAM,MAAM;AAC9B,eAAS,EAAE,gBAAgB,OAAO,OAAO,OAAU,CAAC;AAAA,IACxD;AAAA,EACJ,GAAG,CAAC,KAAK,MAAM,KAAK,CAAC;AAErB,SAAO;AAAA,IACH,OAAO,MAAM;AAAA,IACb,KAAK;AAAA,IACL,gBAAgB,MAAM;AAAA,EAC1B;AACJ;","names":["threshold"]}