#434

frontend/src/components/common/SortableItem.tsx

@@ -4,30 +4,28 @@ import { CSS } from '@dnd-kit/utilities'
 import { useClientMotion } from '@/lib/useClientMotion'
 import { cn } from '@/lib/utils'
 
-import type { ReactNode } from 'react'
+import type { CSSProperties, ReactNode } from 'react'
 
 type Name = { text: string; language: string }
 
 
-const SortableItem = ({ id, name, fixed, children, moveGroup, handleId }: {
+const SortableItem = ({ id, name, fixed, children, moveGroup, handleId, renderShell }: {
     id: string; name: Name; fixed?: boolean; children: ReactNode
-    moveGroup: (direction: number) => void; handleId: string },
+    moveGroup: (direction: number) => void; handleId: string
+    renderShell?: (shell: { ref: (node: HTMLElement | null) => void
+        style: CSSProperties; handle: ReactNode; dragging: boolean }) => ReactNode },
 ) => {
   const motion = useClientMotion ()
   const item = useSortable ({ id, disabled: fixed,
       transition: { duration: motion.duration ('reorder'), easing: motion.easing },
       animateLayoutChanges: options => !motion.reduced
           && defaultAnimateLayoutChanges ({ ...options, wasDragging: true }) })
-  return <div ref={item.setNodeRef}
-      style={{ transform: CSS.Transform.toString (item.transform), transition: item.transition }}
-      className={cn ('relative max-w-full rounded border border-slate-300 bg-white',
-          'text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100',
-          item.isDragging && 'opacity-30 ring-2 ring-blue-500 dark:ring-blue-400')}>
-    <div className="flex min-w-0 items-start gap-1 px-1">
-      {fixed ? <span className="w-6 shrink-0"/> : <button type="button"
+  const handle = fixed ? <span className="w-6 shrink-0"/> : <button type="button"
 	  id={handleId} ref={item.setActivatorNodeRef} {...item.attributes} {...item.listeners}
           aria-label={name.text} lang={name.language}
-	  aria-keyshortcuts="Space ArrowUp ArrowDown Enter Escape Alt+ArrowLeft Alt+ArrowRight"
+	  aria-keyshortcuts={renderShell == null
+              ? 'Space ArrowUp ArrowDown Enter Escape Alt+ArrowLeft Alt+ArrowRight'
+              : 'Space ArrowLeft ArrowRight Enter Escape'}
           className="mt-1 w-6 shrink-0 cursor-grab touch-none rounded
           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500
           active:cursor-grabbing dark:focus-visible:ring-blue-400"
@@ -41,7 +39,16 @@ const SortableItem = ({ id, name, fixed, children, moveGroup, handleId }: {
               moveGroup (event.key === 'ArrowLeft' ? -1 : 1)
             }
             else item.listeners?.onKeyDown?.(event)
-          }}><span aria-hidden>⠿</span></button>}
+          }}><span aria-hidden>⠿</span></button>
+  const style = { transform: CSS.Transform.toString (item.transform), transition: item.transition }
+  if (renderShell != null)
+    return renderShell ({ ref: item.setNodeRef, style, handle, dragging: item.isDragging })
+  return <div ref={item.setNodeRef} style={style}
+      className={cn ('relative max-w-full rounded border border-slate-300 bg-white',
+          'text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100',
+          item.isDragging && 'opacity-30 ring-2 ring-blue-500 dark:ring-blue-400')}>
+    <div className="flex min-w-0 items-start gap-1 px-1">
+      {handle}
       <div className="min-w-0 flex-1 py-1">{children}</div>
     </div>
   </div>