@ozen-ui/kit
Version:
React component library
81 lines (80 loc) • 4.06 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useIntersectionObserver = useIntersectionObserver;
var tslib_1 = require("tslib");
var react_1 = require("react");
var utils_1 = require("../../utils");
var useMutableRef_1 = require("../useMutableRef");
var useStoredValue_1 = require("../useStoredValue");
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 = (0, useMutableRef_1.useMutableRef)(options === null || options === void 0 ? void 0 : options.onEntryChange);
var savedOnViewChange = (0, useMutableRef_1.useMutableRef)(options === null || options === void 0 ? void 0 : options.onViewChange);
var savedOnShow = (0, useMutableRef_1.useMutableRef)(options === null || options === void 0 ? void 0 : options.onShow);
var savedOnHidden = (0, useMutableRef_1.useMutableRef)(options === null || options === void 0 ? void 0 : options.onHidden);
var entry = (0, useStoredValue_1.useStoredValue)(undefined);
var inView = (0, useStoredValue_1.useStoredValue)(false);
var observer = (0, useStoredValue_1.useStoredValue)(null);
var connect = (0, react_1.useCallback)(function () {
if (!isEnabled) {
return;
}
var element = (0, utils_1.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 (0, utils_1.isRef)(options.root) ? options.root.current : options.root;
})();
observer.current = new IntersectionObserver(function (_a) {
var _b, _c, _d, _e, _f;
var _g = tslib_1.__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);
}
}, tslib_1.__assign(tslib_1.__assign({}, options), { root: root }));
observer.current.observe(element);
}, [
(0, utils_1.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 = (0, react_1.useCallback)(function () {
var _a;
(_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
}, [observer]);
var reconnect = (0, react_1.useCallback)(function () {
disconnect();
connect();
}, [disconnect, connect]);
(0, react_1.useEffect)(function () {
reconnect();
}, [connect]);
(0, react_1.useEffect)(function () { return function () {
disconnect();
}; }, []);
return { entry: entry, inView: inView, reconnect: reconnect };
}