23d8bf0425
- Extract EXIF and Swipe logic into custom hooks for Lightbox - Extract Map layout data formatting into mapService - Extract AlbumDetailView and SubpageGridView components from page router - Restructure monolithic config.ts into clean config/ directory
33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
import { useRef, useCallback } from 'react';
|
|
|
|
interface UseSwipeProps {
|
|
onSwipeLeft: () => void;
|
|
onSwipeRight: () => void;
|
|
threshold?: number;
|
|
}
|
|
|
|
export function useSwipe({ onSwipeLeft, onSwipeRight, threshold = 60 }: UseSwipeProps) {
|
|
const touchStartX = useRef<number>(0);
|
|
const touchStartY = useRef<number>(0);
|
|
|
|
const handleTouchStart = useCallback((e: React.TouchEvent | TouchEvent) => {
|
|
touchStartX.current = e.touches[0].clientX;
|
|
touchStartY.current = e.touches[0].clientY;
|
|
}, []);
|
|
|
|
const handleTouchEnd = useCallback(
|
|
(e: React.TouchEvent | TouchEvent) => {
|
|
const dx = e.changedTouches[0].clientX - touchStartX.current;
|
|
const dy = e.changedTouches[0].clientY - touchStartY.current;
|
|
|
|
if (Math.abs(dx) > threshold && Math.abs(dx) > Math.abs(dy)) {
|
|
if (dx > 0) onSwipeRight();
|
|
else onSwipeLeft();
|
|
}
|
|
},
|
|
[onSwipeLeft, onSwipeRight, threshold],
|
|
);
|
|
|
|
return { handleTouchStart, handleTouchEnd };
|
|
}
|