98 lines
3.8 KiB
TypeScript
98 lines
3.8 KiB
TypeScript
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared";
|
||
import { Box, ListItem, Typography, useTheme } from "@mui/material";
|
||
import { memo, useEffect } from "react";
|
||
import { Draggable } from "react-beautiful-dnd";
|
||
import QuestionsPageCard from "./QuestionPageCard";
|
||
import { cancelQuestionDeletion } from "@root/questions/actions";
|
||
import { updateEditSomeQuestion } from "@root/uiTools/actions";
|
||
import { useQuestionsStore } from "@root/questions/store";
|
||
import { useUiTools } from "@root/uiTools/store";
|
||
|
||
|
||
type Props = {
|
||
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
|
||
isDragging: boolean;
|
||
index: number;
|
||
};
|
||
|
||
function DraggableListItem({ question, isDragging, index }: Props) {
|
||
const theme = useTheme();
|
||
const { editSomeQuestion } = useUiTools();
|
||
|
||
useEffect(() => {
|
||
if (editSomeQuestion !== null) {
|
||
const setI = setInterval(() => {
|
||
let comp = document.getElementById(editSomeQuestion);
|
||
if (comp !== null) {
|
||
clearInterval(setI);
|
||
comp.scrollIntoView({ behavior: 'instant' });
|
||
updateEditSomeQuestion();
|
||
}
|
||
}, 200);
|
||
|
||
}
|
||
}, [editSomeQuestion]);
|
||
|
||
return (
|
||
<Draggable draggableId={question.id.toString()} index={index}>
|
||
{(provided) => (
|
||
<ListItem
|
||
ref={provided.innerRef}
|
||
{...provided.draggableProps}
|
||
sx={{ userSelect: "none", padding: 0 }}
|
||
>
|
||
{question.deleted ? (
|
||
<Box
|
||
{...provided.dragHandleProps}
|
||
sx={{
|
||
width: "100%",
|
||
maxWidth: "800px",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
marginBottom: "40px",
|
||
gap: "5px",
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
fontSize: "16px",
|
||
color: theme.palette.grey2.main,
|
||
}}
|
||
>
|
||
Вопрос удалён.
|
||
</Typography>
|
||
<Typography
|
||
onClick={() => {
|
||
cancelQuestionDeletion(question.id);
|
||
}}
|
||
sx={{
|
||
cursor: "pointer",
|
||
fontSize: "16px",
|
||
textDecoration: "underline",
|
||
color: theme.palette.brightPurple.main,
|
||
textDecorationColor: theme.palette.brightPurple.main,
|
||
}}
|
||
>
|
||
Восстановить?
|
||
</Typography>
|
||
</Box>
|
||
) : (
|
||
<Box sx={{ width: "100%", position: "relative" }}>
|
||
<QuestionsPageCard
|
||
question={question}
|
||
draggableProps={provided.dragHandleProps}
|
||
isDragging={isDragging}
|
||
index={index}
|
||
/>
|
||
</Box>
|
||
)}
|
||
</ListItem>
|
||
)}
|
||
</Draggable>
|
||
);
|
||
}
|
||
|
||
const DraggableListItemMemo = memo(DraggableListItem);
|
||
|
||
export default DraggableListItemMemo;
|