@wordpress/components
Version:
UI components for WordPress.
73 lines (71 loc) • 2.05 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useTrackOverflow = useTrackOverflow;
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
/* eslint-disable jsdoc/require-param */
/**
* WordPress dependencies
*/
/**
* Tracks if an element contains overflow and on which end by tracking the
* first and last child elements with an `IntersectionObserver` in relation
* to the parent element.
*
* Note that the returned value will only indicate whether the first or last
* element is currently "going out of bounds" but not whether it happens on
* the X or Y axis.
*/
function useTrackOverflow(parent, children) {
const [first, setFirst] = (0, _element.useState)(false);
const [last, setLast] = (0, _element.useState)(false);
const [observer, setObserver] = (0, _element.useState)();
const callback = (0, _compose.useEvent)(entries => {
for (const entry of entries) {
if (entry.target === children.first) {
setFirst(!entry.isIntersecting);
}
if (entry.target === children.last) {
setLast(!entry.isIntersecting);
}
}
});
(0, _element.useEffect)(() => {
if (!parent || !window.IntersectionObserver) {
return;
}
const newObserver = new IntersectionObserver(callback, {
root: parent,
threshold: 0.9
});
setObserver(newObserver);
return () => newObserver.disconnect();
}, [callback, parent]);
(0, _element.useEffect)(() => {
if (!observer) {
return;
}
if (children.first) {
observer.observe(children.first);
}
if (children.last) {
observer.observe(children.last);
}
return () => {
if (children.first) {
observer.unobserve(children.first);
}
if (children.last) {
observer.unobserve(children.last);
}
};
}, [children.first, children.last, observer]);
return {
first,
last
};
}
/* eslint-enable jsdoc/require-param */
//# sourceMappingURL=use-track-overflow.js.map