| 1 |
import { DndContext, useSensor, useSensors, PointerSensor } from "@dnd-kit/core"; |
| 2 |
import { SortableContext, verticalListSortingStrategy, arrayMove } from "@dnd-kit/sortable"; |
| 3 |
|
| 4 |
import { restrictToVerticalAxis } from "@dnd-kit/modifiers"; |
| 5 |
|
| 6 |
import { SortableItem } from "./sortableItem"; |
| 7 |
|
| 8 |
const DndKit = ({ |
| 9 |
items, |
| 10 |
attributesKey, |
| 11 |
setAttributes, |
| 12 |
attributes, |
| 13 |
RenderTaxonomy, |
| 14 |
allTaxonomies, |
| 15 |
resetTaxonomyType, |
| 16 |
updateTaxonomyData, |
| 17 |
}) => { |
| 18 |
// drag and drop functions. |
| 19 |
const sensors = useSensors( |
| 20 |
useSensor(PointerSensor, { |
| 21 |
activationConstraint: { distance: 2 }, |
| 22 |
}) |
| 23 |
); |
| 24 |
|
| 25 |
const handleDragEnd = (event) => { |
| 26 |
const { active, over } = event; |
| 27 |
if (active && over && active.id !== over.id) { |
| 28 |
const oldIndex = items.findIndex((i) => active.id === i.id); |
| 29 |
const newIndex = items.findIndex((i) => over.id === i.id); |
| 30 |
setAttributes({ |
| 31 |
[attributesKey]: arrayMove(items, oldIndex, newIndex), |
| 32 |
}); |
| 33 |
} |
| 34 |
}; |
| 35 |
|
| 36 |
return ( |
| 37 |
<DndContext sensors={sensors} onDragEnd={handleDragEnd} modifiers={[restrictToVerticalAxis]}> |
| 38 |
<SortableContext items={items.map((item) => item.id)} strategy={verticalListSortingStrategy}> |
| 39 |
{items?.map((item) => ( |
| 40 |
<SortableItem key={item.id} sortId={item.id} initialOpen={item.initialOpen}> |
| 41 |
<RenderTaxonomy |
| 42 |
props={{ |
| 43 |
attributes: attributes, |
| 44 |
taxonomy: item, |
| 45 |
allTaxonomies: allTaxonomies, |
| 46 |
setAttributes: setAttributes, |
| 47 |
resetTaxonomyType: resetTaxonomyType, |
| 48 |
updateTaxonomyData: updateTaxonomyData, |
| 49 |
}} |
| 50 |
/> |
| 51 |
</SortableItem> |
| 52 |
))} |
| 53 |
</SortableContext> |
| 54 |
</DndContext> |
| 55 |
); |
| 56 |
}; |
| 57 |
|
| 58 |
export default DndKit; |
| 59 |
|
