feat(todos): composant SwipeableRow (swipe touch, seuil 80px)

2026-05-24 12:07:38 +02:00
parent eea004f53b
commit 9e6e0902ab
1 changed files with 77 additions and 0 deletions
@@ -0,0 +1,77 @@
+import { useRef, useState } from 'react'
+
+interface SwipeableRowProps {
+  children: React.ReactNode
+  rightContent: React.ReactNode  // actions révélées par swipe gauche
+  onSwipeRight?: () => void       // callback swipe droit (marquer done)
+}
+
+const THRESHOLD = 80  // pixels pour déclencher une action
+
+export default function SwipeableRow({ children, rightContent, onSwipeRight }: SwipeableRowProps) {
+  const [offsetX, setOffsetX] = useState(0)
+  const startX = useRef<number | null>(null)
+  const dragging = useRef(false)
+
+  function onTouchStart(e: React.TouchEvent) {
+    startX.current = e.touches[0].clientX
+    dragging.current = false
+  }
+
+  function onTouchMove(e: React.TouchEvent) {
+    if (startX.current === null) return
+    dragging.current = true
+    const dx = e.touches[0].clientX - startX.current
+    // Clamp : +120px à droite, -160px à gauche (largeur des boutons)
+    setOffsetX(Math.max(Math.min(dx, 120), -160))
+  }
+
+  function onTouchEnd() {
+    if (offsetX > THRESHOLD && onSwipeRight) {
+      onSwipeRight()
+    }
+    setOffsetX(0)
+    startX.current = null
+    dragging.current = false
+  }
+
+  const revealActions = offsetX < -(THRESHOLD / 2)
+
+  return (
+    <div style={{ position: 'relative', overflow: 'hidden' }}>
+      {/* Boutons d'action révélés à droite (swipe gauche) */}
+      <div
+        style={{
+          position: 'absolute',
+          right: 0,
+          top: 0,
+          bottom: 0,
+          display: 'flex',
+          alignItems: 'center',
+          opacity: revealActions ? 1 : 0,
+          transition: 'opacity 0.15s',
+          maxWidth: 160,
+          pointerEvents: revealActions ? 'auto' : 'none',
+        }}
+      >
+        {rightContent}
+      </div>
+
+      {/* Rangée principale déplaçable */}
+      <div
+        onTouchStart={onTouchStart}
+        onTouchMove={onTouchMove}
+        onTouchEnd={onTouchEnd}
+        style={{
+          transform: `translateX(${offsetX}px)`,
+          transition: dragging.current ? 'none' : 'transform 0.2s ease',
+          background: offsetX > THRESHOLD / 2 ? 'var(--ok)' : 'var(--bg-3)',
+          position: 'relative',
+          zIndex: 1,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}