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 { expandedCardId, setExpandedCardId, cardImages, setCardImage, ownedAmounts } = useContext(CardContext);
|
||||||
const [artworkIndex, setArtworkIndex] = useState(0);
|
const [artworkIndex, setArtworkIndex] = useState(0);
|
||||||
const isMobile = useMediaQuery('(max-width: 768px)');
|
const isMobile = useMediaQuery('(max-width: 768px)');
|
||||||
|
const sheetRef = React.useRef(null);
|
||||||
|
const dragStartY = React.useRef(null);
|
||||||
const debouncedSearch = useDebounce(searchTerm, 250);
|
const debouncedSearch = useDebounce(searchTerm, 250);
|
||||||
|
|
||||||
const loadCards = useCallback(() => fetchCards().then(setCards), []);
|
const loadCards = useCallback(() => fetchCards().then(setCards), []);
|
||||||
@@ -220,18 +222,21 @@ function HomePage() {
|
|||||||
<>
|
<>
|
||||||
<div className="sheet-backdrop" onClick={() => setExpandedCardId(null)} />
|
<div className="sheet-backdrop" onClick={() => setExpandedCardId(null)} />
|
||||||
<div
|
<div
|
||||||
|
ref={sheetRef}
|
||||||
className="bottom-sheet"
|
className="bottom-sheet"
|
||||||
onTouchStart={e => { e._sheetStartY = e.touches[0].clientY; }}
|
onTouchStart={e => { dragStartY.current = e.touches[0].clientY; }}
|
||||||
onTouchMove={e => {
|
onTouchMove={e => {
|
||||||
const dy = e.touches[0].clientY - e._sheetStartY;
|
const dy = e.touches[0].clientY - dragStartY.current;
|
||||||
if (dy > 0) e.currentTarget.style.transform = `translateY(${dy}px)`;
|
if (dy > 0 && sheetRef.current) sheetRef.current.style.transform = `translateY(${dy}px)`;
|
||||||
}}
|
}}
|
||||||
onTouchEnd={e => {
|
onTouchEnd={e => {
|
||||||
const dy = e.changedTouches[0].clientY - e._sheetStartY;
|
const dy = e.changedTouches[0].clientY - dragStartY.current;
|
||||||
if (dy > 80) {
|
if (dy > 80) {
|
||||||
setExpandedCardId(null);
|
setExpandedCardId(null);
|
||||||
} else {
|
} else if (sheetRef.current) {
|
||||||
e.currentTarget.style.transform = '';
|
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