51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import { useEffect } from '../lib/teact/teact';
|
|
|
|
import type { CallbackManager } from '../util/callbacks';
|
|
|
|
import { createCallbackManager } from '../util/callbacks';
|
|
import { useStateRef } from './useStateRef';
|
|
|
|
const elementObserverMap = new Map<HTMLElement, [IntersectionObserver, CallbackManager]>();
|
|
|
|
export default function useSharedIntersectionObserver(
|
|
refOrElement: React.RefObject<HTMLElement> | HTMLElement | undefined,
|
|
onIntersectionChange: (entry: IntersectionObserverEntry) => void,
|
|
isDisabled = false,
|
|
) {
|
|
const onIntersectionChangeRef = useStateRef(onIntersectionChange);
|
|
|
|
useEffect(() => {
|
|
const el = refOrElement && 'current' in refOrElement ? refOrElement.current : refOrElement;
|
|
if (!el || isDisabled) {
|
|
return undefined;
|
|
}
|
|
|
|
const callback: IntersectionObserverCallback = ([entry]) => {
|
|
// Ignore updates when element is not properly mounted (`display: none`)
|
|
if (!(entry.target as HTMLElement).offsetWidth || !(entry.target as HTMLElement).offsetHeight) {
|
|
return;
|
|
}
|
|
|
|
onIntersectionChangeRef.current(entry);
|
|
};
|
|
|
|
let [observer, callbackManager] = elementObserverMap.get(el) || [undefined, undefined];
|
|
if (!observer) {
|
|
callbackManager = createCallbackManager();
|
|
observer = new IntersectionObserver(callbackManager.runCallbacks);
|
|
elementObserverMap.set(el, [observer, callbackManager]);
|
|
observer.observe(el);
|
|
}
|
|
callbackManager!.addCallback(callback);
|
|
|
|
return () => {
|
|
callbackManager!.removeCallback(callback);
|
|
if (!callbackManager!.hasCallbacks()) {
|
|
observer!.unobserve(el);
|
|
observer!.disconnect();
|
|
elementObserverMap.delete(el);
|
|
}
|
|
};
|
|
}, [isDisabled, onIntersectionChangeRef, refOrElement]);
|
|
}
|