mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-22 17:25:40 +03:00
Code Issues Projects Releases Packages Wiki Activity

Remove the need for setStates

Browse source
This commit is contained in:
Lim Chee Aun 2024-02-14 17:16:53 +08:00
parent 5d7b67a410
commit 3295b1ab96
1 changed files with 53 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
src/utils/useScrollFn.js
View file

@ -17,15 +17,22 @@ export default function useScrollFn(
deps, deps,
) { ) {
if (!callback) return; if (!callback) return;
const [scrollDirection, setScrollDirection] = useState(null); // const [scrollDirection, setScrollDirection] = useState(null);
const [reachStart, setReachStart] = useState(false); // const [reachStart, setReachStart] = useState(false);
const [reachEnd, setReachEnd] = useState(false); // const [reachEnd, setReachEnd] = useState(false);
const [nearReachStart, setNearReachStart] = useState(false); // const [nearReachStart, setNearReachStart] = useState(false);
const [nearReachEnd, setNearReachEnd] = useState(false); // const [nearReachEnd, setNearReachEnd] = useState(false);
const isVertical = direction === 'vertical'; const isVertical = direction === 'vertical';
const previousScrollStart = useRef(null); const previousScrollStart = useRef(null);
const scrollDirection = useRef(null);
const onScroll = useThrottledCallback(() => { const onScroll = useThrottledCallback(() => {
// let scrollDirection = null;
let reachStart = false;
let reachEnd = false;
let nearReachStart = false;
let nearReachEnd = false;
const scrollableElement = scrollableRef.current; const scrollableElement = scrollableRef.current;
const { const {
scrollTop, scrollTop,
@ -60,18 +67,33 @@ export default function useScrollFn(
? scrollThresholdEnd ? scrollThresholdEnd
: scrollThresholdStart) : scrollThresholdStart)
) { ) {
setScrollDirection( // setScrollDirection(
previousScrollStart.current < scrollStart ? 'end' : 'start', // previousScrollStart.current < scrollStart ? 'end' : 'start',
); // );
scrollDirection.current =
previousScrollStart.current < scrollStart ? 'end' : 'start';
previousScrollStart.current = scrollStart; previousScrollStart.current = scrollStart;
} }
setReachStart(scrollStart <= 0); // setReachStart(scrollStart <= 0);
setReachEnd(scrollStart + clientDimension >= scrollDimension); // setReachEnd(scrollStart + clientDimension >= scrollDimension);
setNearReachStart(scrollStart <= distanceFromStartPx); // setNearReachStart(scrollStart <= distanceFromStartPx);
setNearReachEnd( // setNearReachEnd(
scrollStart + clientDimension >= scrollDimension - distanceFromEndPx, // scrollStart + clientDimension >= scrollDimension - distanceFromEndPx,
); // );
reachStart = scrollStart <= 0;
reachEnd = scrollStart + clientDimension >= scrollDimension;
nearReachStart = scrollStart <= distanceFromStartPx;
nearReachEnd =
scrollStart + clientDimension >= scrollDimension - distanceFromEndPx;
callback({
scrollDirection: scrollDirection.current,
reachStart,
reachEnd,
nearReachStart,
nearReachEnd,
});
}, 500); }, 500);
useLayoutEffect(() => { useLayoutEffect(() => {
@ -88,25 +110,26 @@ export default function useScrollFn(
distanceFromEnd, distanceFromEnd,
scrollThresholdStart, scrollThresholdStart,
scrollThresholdEnd, scrollThresholdEnd,
]);
useEffect(() => {
callback({
scrollDirection,
reachStart,
reachEnd,
nearReachStart,
nearReachEnd,
});
}, [
scrollDirection,
reachStart,
reachEnd,
nearReachStart,
nearReachEnd,
...deps, ...deps,
]); ]);
// useEffect(() => {
// callback({
// scrollDirection,
// reachStart,
// reachEnd,
// nearReachStart,
// nearReachEnd,
// });
// }, [
// scrollDirection,
// reachStart,
// reachEnd,
// nearReachStart,
// nearReachEnd,
// ...deps,
// ]);
useEffect(() => { useEffect(() => {
if (init && scrollableRef.current) { if (init && scrollableRef.current) {
queueMicrotask(() => { queueMicrotask(() => {