fix dragdrop
All checks were successful
Deploy / CreateImage (push) Successful in 8m9s
Deploy / DeployService (push) Successful in 24s

This commit is contained in:
Nastya 2025-05-22 00:37:21 +03:00
parent c6cb130d5b
commit aa917fe6ba

@ -2,7 +2,11 @@ import { Box } from "@mui/material";
import { reorderQuestionVariants } from "@root/questions/actions"; import { reorderQuestionVariants } from "@root/questions/actions";
import { type ReactNode } from "react"; import { type ReactNode } from "react";
import type { DropResult } from "react-beautiful-dnd"; import type { DropResult } from "react-beautiful-dnd";
import { DragDropContext, Droppable } from "react-beautiful-dnd"; import { DragDropContext as DragDropContextOriginal } from "react-beautiful-dnd";
import { StrictModeDroppable } from "./StrictModeDroppable";
// Исправляем типизацию для DragDropContext
const DragDropContext = DragDropContextOriginal as any;
type AnswerDraggableListProps = { type AnswerDraggableListProps = {
questionId: string; questionId: string;
@ -14,21 +18,36 @@ export const AnswerDraggableList = ({
variants, variants,
}: AnswerDraggableListProps) => { }: AnswerDraggableListProps) => {
const onDragEnd = ({ destination, source }: DropResult) => { const onDragEnd = ({ destination, source }: DropResult) => {
if (destination) { // Проверяем наличие необходимых данных
if (!destination || !source) return;
// Проверяем, что индексы действительно изменились
if (destination.index === source.index) return;
// Проверяем валидность индексов
if (source.index < 0 || destination.index < 0) return;
try {
reorderQuestionVariants(questionId, source.index, destination.index); reorderQuestionVariants(questionId, source.index, destination.index);
} catch (error) {
console.error('Error reordering variants:', error);
// Здесь можно добавить уведомление пользователю об ошибке
} }
}; };
return ( return (
<DragDropContext onDragEnd={onDragEnd}> <DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable-answer-list"> <StrictModeDroppable droppableId="droppable-answer-list">
{(provided) => ( {(provided) => (
<Box ref={provided.innerRef} {...provided.droppableProps}> <Box
ref={provided.innerRef}
{...provided.droppableProps}
>
{variants} {variants}
{provided.placeholder} {provided.placeholder}
</Box> </Box>
)} )}
</Droppable> </StrictModeDroppable>
</DragDropContext> </DragDropContext>
); );
}; };