nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fix useScroll bug

Browse source
This commit is contained in:
Lim Chee Aun 2023-02-28 21:56:41 +08:00
parent d21f6158fe
commit a86daaac0b
4 changed files with 8 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/timeline.jsx
View file

@ -168,7 +168,7 @@ function Timeline({
reachStart, reachStart,
reachEnd, reachEnd,
} = useScroll({ } = useScroll({
scrollableElement: scrollableRef.current, scrollableRef,
distanceFromEnd: 2, distanceFromEnd: 2,
scrollThresholdStart: 44, scrollThresholdStart: 44,
}); });
@ -477,7 +477,7 @@ function groupBoosts(values) {
function StatusCarousel({ title, class: className, children }) { function StatusCarousel({ title, class: className, children }) {
const carouselRef = useRef(); const carouselRef = useRef();
const { reachStart, reachEnd, init } = useScroll({ const { reachStart, reachEnd, init } = useScroll({
scrollableElement: carouselRef.current, scrollableRef: carouselRef,
direction: 'horizontal', direction: 'horizontal',
}); });
useEffect(() => { useEffect(() => {

2
src/pages/notifications.jsx
View file

@ -58,7 +58,7 @@ function Notifications() {
const scrollableRef = useRef(); const scrollableRef = useRef();
const { nearReachEnd, scrollDirection, reachStart, nearReachStart } = const { nearReachEnd, scrollDirection, reachStart, nearReachStart } =
useScroll({ useScroll({
scrollableElement: scrollableRef.current, scrollableRef,
}); });
const hiddenUI = scrollDirection === 'end' && !nearReachStart; const hiddenUI = scrollDirection === 'end' && !nearReachStart;

2
src/pages/status.jsx
View file

@ -456,7 +456,7 @@ function StatusPage() {
}); });
const { nearReachStart } = useScroll({ const { nearReachStart } = useScroll({
scrollableElement: scrollableRef.current, scrollableRef,
distanceFromStartPx: 16, distanceFromStartPx: 16,
}); });

13
src/utils/useScroll.js
View file

@ -1,7 +1,7 @@
import { useEffect, useState } from 'preact/hooks'; import { useEffect, useState } from 'preact/hooks';
export default function useScroll({ export default function useScroll({
scrollableElement, scrollableRef,
distanceFromStart = 1, // ratio of clientHeight/clientWidth distanceFromStart = 1, // ratio of clientHeight/clientWidth
distanceFromEnd = 1, // ratio of clientHeight/clientWidth distanceFromEnd = 1, // ratio of clientHeight/clientWidth
scrollThresholdStart = 10, scrollThresholdStart = 10,
@ -17,12 +17,8 @@ export default function useScroll({
const [nearReachEnd, setNearReachEnd] = useState(false); const [nearReachEnd, setNearReachEnd] = useState(false);
const isVertical = direction === 'vertical'; const isVertical = direction === 'vertical';
if (!scrollableElement) {
// Better be explicit instead of auto-assign to window
return {};
}
useEffect(() => { useEffect(() => {
const scrollableElement = scrollableRef.current;
let previousScrollStart = isVertical let previousScrollStart = isVertical
? scrollableElement.scrollTop ? scrollableElement.scrollTop
: scrollableElement.scrollLeft; : scrollableElement.scrollLeft;
@ -77,7 +73,6 @@ export default function useScroll({
return () => scrollableElement.removeEventListener('scroll', onScroll); return () => scrollableElement.removeEventListener('scroll', onScroll);
}, [ }, [
scrollableElement,
distanceFromStart, distanceFromStart,
distanceFromEnd, distanceFromEnd,
scrollThresholdStart, scrollThresholdStart,
@ -91,8 +86,8 @@ export default function useScroll({
nearReachStart, nearReachStart,
nearReachEnd, nearReachEnd,
init: () => { init: () => {
if (scrollableElement) { if (scrollableRef.current) {
scrollableElement.dispatchEvent(new Event('scroll')); scrollableRef.current.dispatchEvent(new Event('scroll'));
} }
}, },
}; };