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