Hermes
37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { useRef, useEffect, useCallback } from "react";
|
|
|
|
export function usePullToRefresh(onRefresh: () => Promise<void> | void) {
|
|
const startY = useRef(0);
|
|
const pulling = useRef(false);
|
|
|
|
const handleTouchStart = useCallback((e: TouchEvent) => {
|
|
if (window.scrollY === 0) {
|
|
startY.current = e.touches[0].clientY;
|
|
pulling.current = true;
|
|
}
|
|
}, []);
|
|
|
|
const handleTouchEnd = useCallback(
|
|
(e: TouchEvent) => {
|
|
if (!pulling.current) return;
|
|
pulling.current = false;
|
|
const diff = e.changedTouches[0].clientY - startY.current;
|
|
if (diff > 80) {
|
|
onRefresh();
|
|
}
|
|
},
|
|
[onRefresh]
|
|
);
|
|
|
|
useEffect(() => {
|
|
document.addEventListener("touchstart", handleTouchStart, { passive: true });
|
|
document.addEventListener("touchend", handleTouchEnd, { passive: true });
|
|
return () => {
|
|
document.removeEventListener("touchstart", handleTouchStart);
|
|
document.removeEventListener("touchend", handleTouchEnd);
|
|
};
|
|
}, [handleTouchStart, handleTouchEnd]);
|
|
}
|