91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
import React from "react";
|
|
import { Choice } from "../../../../../types/Item";
|
|
import ChoiceFields from "./ChoiceFields";
|
|
import { useFormikContext } from "formik";
|
|
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
|
|
import { FaIcons } from "react-icons/fa";
|
|
import { DragHandleUnit } from "../../../Unit/DrapableTable";
|
|
import { HolderOutlined } from "@ant-design/icons";
|
|
|
|
const Choices = () => {
|
|
const formik = useFormikContext<any>();
|
|
|
|
const handleDragEnd = (result: any) => {
|
|
// Check if the item was dropped outside the list
|
|
if (!result.destination) return;
|
|
|
|
// Create a new array from the current answers
|
|
const items = Array.from(formik?.values?.answers);
|
|
|
|
// Remove the item from the original position
|
|
const [reorderedItem] = items.splice(result.source.index, 1);
|
|
|
|
// Insert the item at the new position
|
|
items.splice(result.destination.index, 0, reorderedItem);
|
|
|
|
// Update the order keys based on the new indices
|
|
const updatedItems = items.map((item, index) => ({
|
|
...(item ?? {}),
|
|
order: index + 1, // Update order to be 1-based index
|
|
}));
|
|
|
|
// Update the formik state with the new order
|
|
console.log(updatedItems, "updatedItems");
|
|
|
|
formik.setFieldValue("answers", updatedItems);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{formik?.values?.answers?.map((item: Choice, index: number) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
className="Choices"
|
|
>
|
|
<ChoiceFields index={index} data={item} />
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{/* <DragDropContext onDragEnd={handleDragEnd}>
|
|
<Droppable droppableId="choices">
|
|
{(provided) => (
|
|
<div {...provided.droppableProps} ref={provided.innerRef}>
|
|
{formik?.values?.answers?.map((item: Choice, index: number) => {
|
|
const draggableId = item.name
|
|
? item.name.toString()
|
|
: `item-${index}`;
|
|
|
|
return (
|
|
<Draggable
|
|
key={draggableId}
|
|
draggableId={draggableId}
|
|
index={index}
|
|
>
|
|
{(provided) => (
|
|
<div
|
|
ref={provided.innerRef}
|
|
{...provided.draggableProps}
|
|
{...provided.dragHandleProps}
|
|
>
|
|
<div className="HolderQuestion">
|
|
<HolderOutlined />
|
|
</div>
|
|
<ChoiceFields index={index} data={item} />
|
|
</div>
|
|
)}
|
|
</Draggable>
|
|
);
|
|
})}
|
|
{provided.placeholder}
|
|
</div>
|
|
)}
|
|
</Droppable>
|
|
</DragDropContext> */}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Choices;
|