50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import {
|
|
SortableContext,
|
|
verticalListSortingStrategy,
|
|
} from '@dnd-kit/sortable'
|
|
import {
|
|
useSensor,
|
|
useSensors,
|
|
PointerSensor,
|
|
closestCenter,
|
|
DndContext,
|
|
type DragEndEvent,
|
|
} from '@dnd-kit/core'
|
|
import { useTreeStore } from '../../store/store'
|
|
import type { KeyNote } from '../../types'
|
|
import { KeyNoteCard } from './KeyNoteCard'
|
|
|
|
interface Props {
|
|
subThemeId: string
|
|
notes: KeyNote[]
|
|
}
|
|
|
|
export function KeyNotesDropZone({ subThemeId, notes }: Props) {
|
|
const reorderKeyNotes = useTreeStore((s) => s.reorderKeyNotes)
|
|
const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }))
|
|
|
|
function onDragEnd(e: DragEndEvent) {
|
|
const { active, over } = e
|
|
if (!over || active.id === over.id) return
|
|
const ids = notes.map((n) => n.id)
|
|
const from = ids.indexOf(String(active.id))
|
|
const to = ids.indexOf(String(over.id))
|
|
if (from === -1 || to === -1) return
|
|
const next = [...ids]
|
|
const [moved] = next.splice(from, 1)
|
|
next.splice(to, 0, moved)
|
|
reorderKeyNotes(subThemeId, next)
|
|
}
|
|
|
|
return (
|
|
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
|
|
<SortableContext items={notes.map((n) => n.id)} strategy={verticalListSortingStrategy}>
|
|
<div className="flex flex-col gap-3">
|
|
{notes.map((n) => (
|
|
<KeyNoteCard key={n.id} subThemeId={subThemeId} note={n} />
|
|
))}
|
|
</div>
|
|
</SortableContext>
|
|
</DndContext>
|
|
)
|
|
}
|