Fix swipe-to-dismiss on sets page mobile bottom sheet
ci/woodpecker/push/woodpecker Pipeline was successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
+39
-3
@@ -110,6 +110,42 @@ function SetsPage() {
|
|||||||
const [searchTerm, setSearchTerm] = useState('');
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
const [expandedCardId, setExpandedCardId] = useState(null);
|
const [expandedCardId, setExpandedCardId] = useState(null);
|
||||||
const isMobile = useMediaQuery('(max-width: 768px)');
|
const isMobile = useMediaQuery('(max-width: 768px)');
|
||||||
|
const sheetRef = React.useRef(null);
|
||||||
|
const handleRef = React.useRef(null);
|
||||||
|
const dragStartY = React.useRef(null);
|
||||||
|
|
||||||
|
const closeSheet = React.useCallback(() => { setSelectedSet(null); setSetCards([]); }, []);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const handle = handleRef.current;
|
||||||
|
if (!handle) return;
|
||||||
|
|
||||||
|
const onStart = e => { dragStartY.current = e.touches[0].clientY; };
|
||||||
|
const onMove = e => {
|
||||||
|
e.preventDefault();
|
||||||
|
const dy = e.touches[0].clientY - dragStartY.current;
|
||||||
|
if (dy > 0 && sheetRef.current) sheetRef.current.style.transform = `translateY(${dy}px)`;
|
||||||
|
};
|
||||||
|
const onEnd = e => {
|
||||||
|
const dy = e.changedTouches[0].clientY - dragStartY.current;
|
||||||
|
if (dy > 80) {
|
||||||
|
closeSheet();
|
||||||
|
} 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);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
handle.addEventListener('touchstart', onStart, { passive: true });
|
||||||
|
handle.addEventListener('touchmove', onMove, { passive: false });
|
||||||
|
handle.addEventListener('touchend', onEnd, { passive: true });
|
||||||
|
return () => {
|
||||||
|
handle.removeEventListener('touchstart', onStart);
|
||||||
|
handle.removeEventListener('touchmove', onMove);
|
||||||
|
handle.removeEventListener('touchend', onEnd);
|
||||||
|
};
|
||||||
|
}, [selectedSet, closeSheet]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchSets().then(setSets).catch(console.error).finally(() => setLoading(false));
|
fetchSets().then(setSets).catch(console.error).finally(() => setLoading(false));
|
||||||
@@ -204,9 +240,9 @@ function SetsPage() {
|
|||||||
{/* Mobile: bottom sheet */}
|
{/* Mobile: bottom sheet */}
|
||||||
{isMobile && selectedSet && (
|
{isMobile && selectedSet && (
|
||||||
<>
|
<>
|
||||||
<div className="sheet-backdrop" onClick={() => { setSelectedSet(null); setSetCards([]); }} />
|
<div className="sheet-backdrop" onClick={closeSheet} />
|
||||||
<div className="bottom-sheet">
|
<div ref={sheetRef} className="bottom-sheet">
|
||||||
<div className="sheet-handle-area"><div className="sheet-handle" /></div>
|
<div ref={handleRef} className="sheet-handle-area"><div className="sheet-handle" /></div>
|
||||||
{setDetail}
|
{setDetail}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|||||||
Reference in New Issue
Block a user