@ozen-ui/kit
Version:
React component library
78 lines (77 loc) • 3.67 kB
JavaScript
import { __assign, __read } from "tslib";
import { useCallback, useEffect } from 'react';
import { isRef } from '../../utils';
import { useMutableRef } from '../useMutableRef';
import { useStoredValue } from '../useStoredValue';
export function useIntersectionObserver(
/** Отслеживаемый компонент */
target,
/** Параметры отслеживания */
options) {
var _a;
var isEnabled = (_a = options === null || options === void 0 ? void 0 : options.enabled) !== null && _a !== void 0 ? _a : true;
var savedOnEntryChange = useMutableRef(options === null || options === void 0 ? void 0 : options.onEntryChange);
var savedOnViewChange = useMutableRef(options === null || options === void 0 ? void 0 : options.onViewChange);
var savedOnShow = useMutableRef(options === null || options === void 0 ? void 0 : options.onShow);
var savedOnHidden = useMutableRef(options === null || options === void 0 ? void 0 : options.onHidden);
var entry = useStoredValue(undefined);
var inView = useStoredValue(false);
var observer = useStoredValue(null);
var connect = useCallback(function () {
if (!isEnabled) {
return;
}
var element = isRef(target) ? target.current : target;
if (!element) {
return;
}
var root = (function () {
var root = options === null || options === void 0 ? void 0 : options.root;
if (!root) {
return document;
}
return isRef(options.root) ? options.root.current : options.root;
})();
observer.current = new IntersectionObserver(function (_a) {
var _b, _c, _d, _e, _f;
var _g = __read(_a, 1), newEntry = _g[0];
var previousInView = !!((_b = entry.current) === null || _b === void 0 ? void 0 : _b.isIntersecting);
var currentInView = !!(newEntry === null || newEntry === void 0 ? void 0 : newEntry.isIntersecting);
entry.current = newEntry;
inView.current = currentInView;
(_c = savedOnEntryChange.current) === null || _c === void 0 ? void 0 : _c.call(savedOnEntryChange, newEntry !== null && newEntry !== void 0 ? newEntry : null);
if (previousInView === currentInView) {
return;
}
(_d = savedOnViewChange.current) === null || _d === void 0 ? void 0 : _d.call(savedOnViewChange, currentInView);
if (currentInView) {
(_e = savedOnShow.current) === null || _e === void 0 ? void 0 : _e.call(savedOnShow);
}
else {
(_f = savedOnHidden.current) === null || _f === void 0 ? void 0 : _f.call(savedOnHidden);
}
}, __assign(__assign({}, options), { root: root }));
observer.current.observe(element);
}, [
isRef(target) ? target.current : target,
options === null || options === void 0 ? void 0 : options.rootMargin,
options === null || options === void 0 ? void 0 : options.threshold,
options === null || options === void 0 ? void 0 : options.root,
isEnabled,
]);
var disconnect = useCallback(function () {
var _a;
(_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
}, [observer]);
var reconnect = useCallback(function () {
disconnect();
connect();
}, [disconnect, connect]);
useEffect(function () {
reconnect();
}, [connect]);
useEffect(function () { return function () {
disconnect();
}; }, []);
return { entry: entry, inView: inView, reconnect: reconnect };
}