45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { DndContext, closestCenter } from '@dnd-kit/core';
|
|
import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { setDraggedItems } from './quizSlice';
|
|
import type { RootState } from '../../store';
|
|
import List from '@mui/material/List';
|
|
import { SortableItem } from '../components/SortableItem'
|
|
|
|
interface ComponentProps {
|
|
index: number;
|
|
answers: string[];
|
|
}
|
|
|
|
function SortableList({ index}: ComponentProps) {
|
|
|
|
const dispatch = useDispatch();
|
|
const arr = useSelector((state: RootState) => state.lists.lists[index])
|
|
const isDisabled = useSelector((state: RootState) => state.lists.isTestingDone)
|
|
const draggedItems = arr || [];
|
|
|
|
const handleDragEnd = (event: any) => {
|
|
const { active, over } = event;
|
|
if (active.id !== over.id) {
|
|
const oldIndex = draggedItems.indexOf(active.id);
|
|
const newIndex = draggedItems.indexOf(over.id);
|
|
const newList = arrayMove(draggedItems, oldIndex, newIndex);
|
|
dispatch(setDraggedItems({ index, items: newList }));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
|
|
<SortableContext items={draggedItems}
|
|
strategy={verticalListSortingStrategy}>
|
|
<List>
|
|
{draggedItems.map((item) => (
|
|
<SortableItem key={item} item={item} id={item} isDisabled={isDisabled}/>
|
|
))}
|
|
</List>
|
|
</SortableContext>
|
|
</DndContext>
|
|
);
|
|
}
|
|
|
|
export default SortableList; |