53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import { useRef, useState, useCallback } from "react";
|
|
|
|
type Props = { isEnabled: boolean; swipeAction: () => void };
|
|
|
|
export default function useSwipeUp({ isEnabled, swipeAction }: Props) {
|
|
// Swipe detection
|
|
const startYRef = useRef(0);
|
|
const [isSwiping, setIsSwiping] = useState(false);
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
// Touch event handlers for swipe detection
|
|
const handleTouchStart = useCallback(
|
|
(e: React.TouchEvent) => {
|
|
if (!isEnabled) return;
|
|
startYRef.current = e.touches[0].clientY;
|
|
setIsSwiping(true);
|
|
},
|
|
[isEnabled],
|
|
);
|
|
|
|
/*
|
|
const handleTouchMove = useCallback(
|
|
(e: React.TouchEvent) => {
|
|
if (!isSwiping) return;
|
|
},
|
|
[isSwiping],
|
|
);
|
|
*/
|
|
|
|
const handleTouchEnd = useCallback(
|
|
(e: React.TouchEvent) => {
|
|
if (!isSwiping || !isEnabled) return;
|
|
|
|
const endY = e.changedTouches[0].clientY;
|
|
const deltaY = startYRef.current - endY;
|
|
const threshold = 70; // Threshold to detect a swipe up
|
|
|
|
if (deltaY > threshold) {
|
|
// Swipe up detected
|
|
swipeAction();
|
|
}
|
|
|
|
setIsSwiping(false);
|
|
},
|
|
[isSwiping, isEnabled],
|
|
);
|
|
|
|
return {
|
|
containerRef,
|
|
handleTouchStart,
|
|
handleTouchEnd,
|
|
};
|
|
}
|