54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { useSortable } from '@dnd-kit/sortable';
|
|
import { CSS } from '@dnd-kit/utilities';
|
|
import { QuestionCard } from './QuestionCard';
|
|
import { Question } from '../types';
|
|
|
|
interface SortableQuestionCardProps {
|
|
question: Question;
|
|
index: number;
|
|
onEdit: () => void;
|
|
onDelete: () => void;
|
|
isExpanded: boolean;
|
|
onToggleExpand: () => void;
|
|
}
|
|
|
|
export const SortableQuestionCard: React.FC<SortableQuestionCardProps> = ({
|
|
question,
|
|
index,
|
|
onEdit,
|
|
onDelete,
|
|
isExpanded,
|
|
onToggleExpand
|
|
}) => {
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
isDragging
|
|
} = useSortable({ id: question.id });
|
|
|
|
const style = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
zIndex: isDragging ? 50 : undefined,
|
|
position: 'relative' as const
|
|
};
|
|
|
|
return (
|
|
<div ref={setNodeRef} style={style} {...attributes}>
|
|
<QuestionCard
|
|
question={question}
|
|
index={index}
|
|
onEdit={onEdit}
|
|
onDelete={onDelete}
|
|
isExpanded={isExpanded}
|
|
onToggleExpand={onToggleExpand}
|
|
isDragging={isDragging}
|
|
dragListeners={listeners}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|