58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { Draggable } from "react-beautiful-dnd";
|
|
import { Box, ListItem } from "@mui/material";
|
|
|
|
import QuestionsPageCard from "./QuestionPageCard";
|
|
|
|
import { ReactComponent as PlusIcon } from "../../../assets/icons/plus.svg";
|
|
|
|
type DraggableListItemProps = {
|
|
index: number;
|
|
dropPlaceIndex: number;
|
|
};
|
|
|
|
export const DraggableListItem = ({
|
|
index,
|
|
dropPlaceIndex,
|
|
}: DraggableListItemProps) => (
|
|
<Draggable draggableId={String(index)} index={index}>
|
|
{(provided, snapshot) => (
|
|
<ListItem ref={provided.innerRef} {...provided.draggableProps}>
|
|
<Box sx={{ width: "100%", position: "relative" }}>
|
|
<QuestionsPageCard
|
|
key={index}
|
|
totalIndex={index}
|
|
draggableProps={provided.dragHandleProps}
|
|
/>
|
|
{dropPlaceIndex === index && !snapshot.mode && (
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
bottom: "-10px",
|
|
display: "flex",
|
|
width: "100%",
|
|
maxWidth: "825px",
|
|
alignItems: "center",
|
|
columnGap: "10px",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
boxSizing: "border-box",
|
|
width: "100%",
|
|
height: "1px",
|
|
backgroundPosition: "bottom",
|
|
backgroundRepeat: "repeat-x",
|
|
backgroundSize: "20px 1px",
|
|
backgroundImage:
|
|
"radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
|
|
}}
|
|
/>
|
|
<PlusIcon />
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</ListItem>
|
|
)}
|
|
</Draggable>
|
|
);
|