File size: 1,890 Bytes
aa2e6af | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | import throttle from 'lodash/throttle';
import React, { useCallback, useEffect, useRef } from 'react';
import type { FetchNextPageOptions, InfiniteQueryObserverResult } from '@tanstack/react-query';
export default function useNavScrolling<TData>({
hasNextPage,
isFetchingNextPage,
setShowLoading,
fetchNextPage,
}: {
hasNextPage?: boolean;
isFetchingNextPage: boolean;
setShowLoading: React.Dispatch<React.SetStateAction<boolean>>;
fetchNextPage: (
options?: FetchNextPageOptions | undefined,
) => Promise<InfiniteQueryObserverResult<TData, unknown>>;
}) {
const scrollPositionRef = useRef<number | null>(null);
const containerRef = useRef<HTMLDivElement | null>(null);
// eslint-disable-next-line react-hooks/exhaustive-deps
const fetchNext = useCallback(
throttle(() => fetchNextPage(), 750, { leading: true }),
[fetchNextPage],
);
const handleScroll = useCallback(() => {
if (containerRef.current) {
const { scrollTop, clientHeight, scrollHeight } = containerRef.current;
const nearBottomOfList = scrollTop + clientHeight >= scrollHeight * 0.97;
if (nearBottomOfList && hasNextPage && !isFetchingNextPage) {
setShowLoading(true);
fetchNext();
} else {
setShowLoading(false);
}
}
}, [hasNextPage, isFetchingNextPage, fetchNext, setShowLoading]);
useEffect(() => {
const container = containerRef.current;
if (container) {
container.addEventListener('scroll', handleScroll);
}
return () => {
container?.removeEventListener('scroll', handleScroll);
};
}, [handleScroll, fetchNext]);
const moveToTop = useCallback(() => {
const container = containerRef.current;
if (container) {
scrollPositionRef.current = container.scrollTop;
}
}, [containerRef, scrollPositionRef]);
return {
containerRef,
moveToTop,
};
}
|