Fix swipe-to-dismiss: use ref to persist touch start Y across events
ci/woodpecker/push/woodpecker Pipeline was successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
+11
-6
@@ -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);
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user