36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
import { Box } from "@mui/material";
|
|
import { reorderQuestions } from "@root/questions/actions";
|
|
import type { DropResult } from "react-beautiful-dnd";
|
|
import { DragDropContext, Droppable } from "react-beautiful-dnd";
|
|
import DraggableListItem from "./DraggableListItem";
|
|
import { useQuestionsStore } from "@root/questions/store";
|
|
|
|
|
|
export const DraggableList = () => {
|
|
const { questions } = useQuestionsStore()
|
|
const filteredQuestions = questions.filter((question) => question.type !== "result")
|
|
const onDragEnd = ({ destination, source }: DropResult) => {
|
|
if (destination) reorderQuestions(source.index, destination.index);
|
|
};
|
|
|
|
return (
|
|
<DragDropContext onDragEnd={onDragEnd}>
|
|
<Droppable droppableId="droppable-list">
|
|
{(provided, snapshot) => (
|
|
<Box ref={provided.innerRef} {...provided.droppableProps}>
|
|
{filteredQuestions.map((question, index) => (
|
|
<DraggableListItem
|
|
key={question.id}
|
|
question={question}
|
|
isDragging={snapshot.isDraggingOver}
|
|
index={index}
|
|
/>
|
|
))}
|
|
{provided.placeholder}
|
|
</Box>
|
|
)}
|
|
</Droppable>
|
|
</DragDropContext>
|
|
);
|
|
};
|