1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
import { useEffect, useRef, useState } from "react";
interface PullToRefreshOptions {
onRefresh: () => Promise<void>;
threshold?: number;
resistance?: number;
enabled?: boolean;
}
export function usePullToRefresh({
onRefresh,
threshold = 80,
resistance = 2.5,
enabled = true,
}: PullToRefreshOptions) {
const containerRef = useRef<HTMLDivElement>(null);
const [isRefreshing, setIsRefreshing] = useState(false);
const [pullDistance, setPullDistance] = useState(0);
const [isDragging, setIsDragging] = useState(false);
const startY = useRef(0);
const currentY = useRef(0);
const isAtTop = useRef(true);
useEffect(() => {
const container = containerRef.current;
if (!container || !enabled) return;
let rafId: number;
const checkScrollPosition = () => {
isAtTop.current = container.scrollTop <= 5;
};
const handleTouchStart = (e: TouchEvent) => {
if (!isAtTop.current || isRefreshing) return;
startY.current = e.touches[0].clientY;
currentY.current = startY.current;
setIsDragging(true);
};
const handleTouchMove = (e: TouchEvent) => {
if (!isDragging || isRefreshing || !isAtTop.current) return;
currentY.current = e.touches[0].clientY;
const deltaY = currentY.current - startY.current;
if (deltaY > 0) {
e.preventDefault();
const distance = Math.min(deltaY / resistance, threshold * 1.5);
setPullDistance(distance);
}
};
const handleTouchEnd = async () => {
if (!isDragging || isRefreshing) return;
setIsDragging(false);
if (pullDistance >= threshold) {
setIsRefreshing(true);
try {
await onRefresh();
} finally {
setIsRefreshing(false);
}
}
setPullDistance(0);
};
const handleScroll = () => {
if (rafId) cancelAnimationFrame(rafId);
rafId = requestAnimationFrame(checkScrollPosition);
};
container.addEventListener("touchstart", handleTouchStart, { passive: false });
container.addEventListener("touchmove", handleTouchMove, { passive: false });
container.addEventListener("touchend", handleTouchEnd);
container.addEventListener("scroll", handleScroll, { passive: true });
return () => {
if (rafId) cancelAnimationFrame(rafId);
container.removeEventListener("touchstart", handleTouchStart);
container.removeEventListener("touchmove", handleTouchMove);
container.removeEventListener("touchend", handleTouchEnd);
container.removeEventListener("scroll", handleScroll);
};
}, [enabled, isRefreshing, pullDistance, threshold, resistance, onRefresh, isDragging]);
return {
containerRef,
isRefreshing,
pullDistance,
isDragging,
canRefresh: pullDistance >= threshold,
};
}
|
