frontPanel/src/pages/Questions/AnswerDraggableList/index.tsx

57 lines
1.5 KiB
TypeScript
Raw Normal View History

2023-09-06 13:20:12 +00:00
import { useParams } from "react-router-dom";
2023-08-18 11:16:56 +00:00
import { Box } from "@mui/material";
2023-08-29 12:39:51 +00:00
import { DragDropContext, Droppable } from "react-beautiful-dnd";
2023-08-18 11:16:56 +00:00
import { AnswerItem } from "./AnswerItem";
import { updateVariants } from "@root/questions";
import { reorder } from "./helper";
import type { DropResult } from "react-beautiful-dnd";
import type { Variants } from "@root/questions";
type AnswerDraggableListProps = {
variants: Variants[];
totalIndex: number;
2023-09-21 10:07:30 +00:00
emoji?: boolean;
2023-08-18 11:16:56 +00:00
};
export const AnswerDraggableList = ({
variants,
totalIndex,
2023-09-21 10:07:30 +00:00
emoji = false,
2023-08-18 11:16:56 +00:00
}: AnswerDraggableListProps) => {
2023-09-06 13:20:12 +00:00
const quizId = Number(useParams().quizId);
2023-08-18 11:16:56 +00:00
const onDragEnd = ({ destination, source }: DropResult) => {
if (destination) {
const newItems = reorder(variants, source.index, destination.index);
2023-09-06 13:20:12 +00:00
updateVariants(quizId, totalIndex, newItems);
2023-08-18 11:16:56 +00:00
}
};
return (
<DragDropContext onDragEnd={onDragEnd}>
2023-08-29 12:39:51 +00:00
<Droppable droppableId="droppable-answer-list">
2023-08-18 11:16:56 +00:00
{(provided) => (
<Box ref={provided.innerRef} {...provided.droppableProps}>
{variants.map((variant, index) => (
<AnswerItem
2023-08-18 15:39:41 +00:00
key={index}
2023-08-18 11:16:56 +00:00
index={index}
totalIndex={totalIndex}
variants={variants}
variant={variant}
2023-09-21 10:07:30 +00:00
emoji={emoji}
2023-08-18 11:16:56 +00:00
/>
))}
2023-08-18 13:43:18 +00:00
{provided.placeholder}
2023-08-18 11:16:56 +00:00
</Box>
)}
2023-08-29 12:39:51 +00:00
</Droppable>
2023-08-18 11:16:56 +00:00
</DragDropContext>
);
};