diff --git a/components/pull-to-refresh.js b/components/pull-to-refresh.js index 64c7bbc7..9be61089 100644 --- a/components/pull-to-refresh.js +++ b/components/pull-to-refresh.js @@ -4,18 +4,16 @@ import styles from './pull-to-refresh.module.css' const REFRESH_THRESHOLD = 50 -export default function PullToRefresh ({ children, android, className }) { +export default function PullToRefresh ({ children, className }) { const router = useRouter() const [pullDistance, setPullDistance] = useState(0) const [isPWA, setIsPWA] = useState(false) - const [isAndroid, setIsAndroid] = useState(false) const touchStartY = useRef(0) const touchEndY = useRef(0) const checkPWA = () => { const androidPWA = window.matchMedia('(display-mode: standalone)').matches const iosPWA = window.navigator.standalone === true - setIsAndroid(androidPWA) // we need to know if the user is on Android to enable toggling its native PTR setIsPWA(androidPWA || iosPWA) } @@ -23,18 +21,18 @@ export default function PullToRefresh ({ children, android, className }) { const handleTouchStart = useCallback((e) => { // don't handle if the user is not scrolling from the top of the page, is not on a PWA or if we want Android's native PTR - if (!isPWA || (isAndroid && !android) || window.scrollY > 0) return + if (!isPWA || window.scrollY > 0) return touchStartY.current = e.touches[0].clientY - }, [isPWA, isAndroid, android]) + }, [isPWA]) const handleTouchMove = useCallback((e) => { if (touchStartY.current === 0) return - if (!isPWA || (isAndroid && !android)) return + if (!isPWA) return touchEndY.current = e.touches[0].clientY const distance = touchEndY.current - touchStartY.current setPullDistance(distance) document.body.style.marginTop = `${Math.max(0, Math.min(distance / 2, 25))}px` - }, [isPWA, isAndroid, android]) + }, [isPWA]) const handleTouchEnd = useCallback(() => { if (touchStartY.current === 0 || touchEndY.current === 0) return @@ -48,7 +46,7 @@ export default function PullToRefresh ({ children, android, className }) { }, [router]) useEffect(() => { - if (!isPWA || (isAndroid && !android)) return + if (!isPWA) return document.body.style.overscrollBehaviorY = 'contain' document.addEventListener('touchstart', handleTouchStart) document.addEventListener('touchmove', handleTouchMove) @@ -60,7 +58,7 @@ export default function PullToRefresh ({ children, android, className }) { document.removeEventListener('touchmove', handleTouchMove) document.removeEventListener('touchend', handleTouchEnd) } - }, [isPWA, isAndroid, android, handleTouchStart, handleTouchMove, handleTouchEnd]) + }, [isPWA, handleTouchStart, handleTouchMove, handleTouchEnd]) const pullMessage = useMemo(() => { if (pullDistance > REFRESH_THRESHOLD) return 'release to refresh'