Page MenuHomec4science
Files F100958774

useWaypoint.js
No OneTemporary
Actions

File Metadata

Created
Tue, Feb 4, 07:46

useWaypoint.js
View Options

import useEventCallback from '@restart/hooks/useEventCallback';
import useIntersectionObserver from '@restart/hooks/useIntersectionObserver';
import { useMemo, useRef } from 'react';
import getScrollParent from 'dom-helpers/scrollParent';
export let Position;
(function (Position) {
Position[Position["UNKNOWN"] = 0] = "UNKNOWN";
Position[Position["BEFORE"] = 1] = "BEFORE";
Position[Position["INSIDE"] = 2] = "INSIDE";
Position[Position["AFTER"] = 3] = "AFTER";
})(Position || (Position = {}));
function toCss(margin) {
if (!margin || typeof margin === 'string') return margin;
const {
top = 0,
right = 0,
bottom = 0,
left = 0
} = margin;
return `${top}px ${right}px ${bottom}px ${left}px`;
}
const findRoot = el => getScrollParent(el, true);
function useWaypoint(element, callback, options = {}) {
const {
rootMargin,
threshold,
scrollDirection = 'vertical'
} = options;
let {
root
} = options;
const handler = useEventCallback(callback);
const prevPositionRef = useRef(null);
if (root === 'scrollParent') {
root = findRoot;
}
const scrollParent = useMemo(() => element && typeof root === 'function' ? root(element) : null, [element, root]);
let realRoot = typeof root === 'function' ? scrollParent : root;
if (realRoot && realRoot.nodeType === document.DOCUMENT_NODE) {
// explicit undefined means "use the viewport", instead of `null`
// which means "no root yet". This works around a bug in safari
// where document is not accepted in older versions,
// or is accepted but doesn't work (as of v14)
realRoot = undefined;
}
useIntersectionObserver( // We change the meaning of explicit null to "not provided yet"
// this is to allow easier synchronizing between element and roots derived
// from it. Otherwise if the root updates later an observer will be created
// for the document and then for the root
element, ([entry], observer) => {
var _entry$rootBounds, _entry$rootBounds2;
if (!entry) return;
const [start, end, point] = scrollDirection === 'vertical' ? ['top', 'bottom', 'y'] : ['left', 'right', 'x'];
const {
[point]: coord
} = entry.boundingClientRect;
const rootStart = ((_entry$rootBounds = entry.rootBounds) == null ? void 0 : _entry$rootBounds[start]) || 0;
const rootEnd = ((_entry$rootBounds2 = entry.rootBounds) == null ? void 0 : _entry$rootBounds2[end]) || 0; // The position may remain UNKNOWN if the root
// is 0 width/height or everything is hidden.
let position = Position.UNKNOWN;
if (entry.isIntersecting) {
position = Position.INSIDE;
} else if (coord > rootEnd) {
position = Position.AFTER;
} else if (coord < rootStart) {
position = Position.BEFORE;
}
const previousPosition = prevPositionRef.current;
if (previousPosition === position) {
return;
}
handler({
position,
previousPosition
}, entry, observer);
prevPositionRef.current = position;
}, {
threshold,
root: realRoot,
rootMargin: toCss(rootMargin)
});
}
export default useWaypoint;

Event Timeline

c4science · Help