feat(shopping): composant ItemRow avec swipe-to-delete et mode magasin

2026-05-24 15:43:04 +02:00
parent 9f2ca15303
commit 8211284c4a
1 changed files with 124 additions and 0 deletions
@@ -0,0 +1,124 @@
+import { useRef, useState } from 'react'
+import type { ShoppingItem } from '../../api/shopping'
+
+interface ItemRowProps {
+  item: ShoppingItem
+  onCheck: () => void
+  onDelete: () => void
+  storeMode?: boolean
+}
+
+const SWIPE_THRESHOLD = 80
+
+export default function ItemRow({ item, onCheck, onDelete, storeMode = false }: ItemRowProps) {
+  const [offsetX, setOffsetX] = useState(0)
+  const [isDragging, setIsDragging] = useState(false)
+  const startX = useRef<number | null>(null)
+
+  function onTouchStart(e: React.TouchEvent) {
+    if (storeMode) return
+    startX.current = e.touches[0].clientX
+    setIsDragging(true)
+  }
+
+  function onTouchMove(e: React.TouchEvent) {
+    if (startX.current === null) return
+    const dx = e.touches[0].clientX - startX.current
+    setOffsetX(Math.max(Math.min(dx, 0), -120))
+  }
+
+  function onTouchEnd() {
+    if (offsetX < -SWIPE_THRESHOLD) onDelete()
+    setOffsetX(0)
+    setIsDragging(false)
+    startX.current = null
+  }
+
+  const minHeight = storeMode ? 64 : 52
+
+  return (
+    <div style={{ position: 'relative', overflow: 'hidden' }}>
+      {!storeMode && (
+        <div style={{
+          position: 'absolute', right: 0, top: 0, bottom: 0,
+          width: 120, display: 'flex', alignItems: 'center', justifyContent: 'center',
+          background: 'var(--err)',
+          opacity: offsetX < -20 ? 1 : 0,
+          transition: 'opacity 0.15s',
+        }}>
+          <span style={{ color: '#fff', fontSize: 20 }}>✕</span>
+        </div>
+      )}
+
+      <div
+        onTouchStart={onTouchStart}
+        onTouchMove={onTouchMove}
+        onTouchEnd={onTouchEnd}
+        onClick={onCheck}
+        style={{
+          transform: `translateX(${offsetX}px)`,
+          transition: isDragging ? 'none' : 'transform 0.2s ease',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          padding: storeMode ? '14px 16px' : '10px 16px',
+          minHeight,
+          cursor: 'pointer',
+          background: item.is_checked ? 'rgba(142,192,124,0.08)' : 'transparent',
+          borderBottom: '1px solid var(--bg-4)',
+          userSelect: 'none',
+        }}
+      >
+        <div style={{
+          width: storeMode ? 28 : 22,
+          height: storeMode ? 28 : 22,
+          borderRadius: '50%',
+          border: `2px solid ${item.is_checked ? 'var(--ok)' : 'var(--bg-5)'}`,
+          background: item.is_checked ? 'var(--ok)' : 'transparent',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          flexShrink: 0,
+          transition: 'all 0.15s',
+        }}>
+          {item.is_checked && <span style={{ color: '#1d2021', fontSize: storeMode ? 16 : 12, fontWeight: 700 }}>✓</span>}
+        </div>
+
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{
+            color: item.is_checked ? 'var(--ink-3)' : 'var(--ink-1)',
+            fontSize: storeMode ? 18 : 14,
+            fontFamily: 'var(--font-ui)',
+            textDecoration: item.is_checked ? 'line-through' : 'none',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}>
+            {item.display_name}
+            {item.carried_over && (
+              <span style={{ fontSize: 10, color: 'var(--info)', marginLeft: 6 }}>↩</span>
+            )}
+          </div>
+          {(item.quantity || item.unit) && (
+            <div style={{ color: 'var(--ink-3)', fontSize: 11, marginTop: 2, fontFamily: 'var(--font-mono)' }}>
+              {item.quantity}{item.unit ? ` ${item.unit}` : ''}
+            </div>
+          )}
+        </div>
+
+        {storeMode && !item.is_checked && (
+          <button
+            onClick={e => { e.stopPropagation(); onDelete() }}
+            style={{
+              background: 'transparent',
+              border: 'none',
+              color: 'var(--ink-4)',
+              fontSize: 18,
+              cursor: 'pointer',
+              padding: '4px 8px',
+              minHeight: 44,
+            }}
+          >✕</button>
+        )}
+      </div>
+    </div>
+  )
+}