Fix swipe-to-dismiss: use ref to persist touch start Y across events
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
2026-05-15 22:41:48 +02:00
parent cddd1b7b6e
commit 7cc3f2521c
+11 -6
View File
@@ -39,6 +39,8 @@ function HomePage() {
const { expandedCardId, setExpandedCardId, cardImages, setCardImage, ownedAmounts } = useContext(CardContext);
const [artworkIndex, setArtworkIndex] = useState(0);
const isMobile = useMediaQuery('(max-width: 768px)');
const sheetRef = React.useRef(null);
const dragStartY = React.useRef(null);
const debouncedSearch = useDebounce(searchTerm, 250);
const loadCards = useCallback(() => fetchCards().then(setCards), []);
@@ -220,18 +222,21 @@ function HomePage() {
<>
<div className="sheet-backdrop" onClick={() => setExpandedCardId(null)} />
<div
ref={sheetRef}
className="bottom-sheet"
onTouchStart={e => { e._sheetStartY = e.touches[0].clientY; }}
onTouchStart={e => { dragStartY.current = e.touches[0].clientY; }}
onTouchMove={e => {
const dy = e.touches[0].clientY - e._sheetStartY;
if (dy > 0) e.currentTarget.style.transform = `translateY(${dy}px)`;
const dy = e.touches[0].clientY - dragStartY.current;
if (dy > 0 && sheetRef.current) sheetRef.current.style.transform = `translateY(${dy}px)`;
}}
onTouchEnd={e => {
const dy = e.changedTouches[0].clientY - e._sheetStartY;
const dy = e.changedTouches[0].clientY - dragStartY.current;
if (dy > 80) {
setExpandedCardId(null);
} else {
e.currentTarget.style.transform = '';
} else if (sheetRef.current) {
sheetRef.current.style.transition = 'transform 0.2s ease';
sheetRef.current.style.transform = '';
setTimeout(() => { if (sheetRef.current) sheetRef.current.style.transition = ''; }, 200);
}
}}
>