50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
|
import { Box } from "@mui/material"
|
|||
|
import { useEffect, useRef } from "react";
|
|||
|
import { updateDragQuestionId, updateQuestion } from "@root/questions/actions"
|
|||
|
import { updateRootInfo } from "@root/quizes/actions"
|
|||
|
import { useQuestionsStore } from "@root/questions/store"
|
|||
|
import { useCurrentQuiz } from "@root/quizes/hooks";
|
|||
|
import { enqueueSnackbar } from "notistack";
|
|||
|
|
|||
|
export const FirstNodeField = () => {
|
|||
|
const { dragQuestionId } = useQuestionsStore()
|
|||
|
const Container = useRef<HTMLDivElement | null>(null);
|
|||
|
const quiz = useCurrentQuiz();
|
|||
|
|
|||
|
|
|||
|
const newRootNode = () => {
|
|||
|
if (quiz) {
|
|||
|
console.log(dragQuestionId)
|
|||
|
|
|||
|
if (dragQuestionId) {
|
|||
|
updateRootInfo(quiz?.id, true)
|
|||
|
updateQuestion(dragQuestionId, (question) => question.content.rule.parentId = "root")
|
|||
|
}
|
|||
|
} else {
|
|||
|
enqueueSnackbar("Нет информации о взятом опроснике")
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
useEffect(() => {
|
|||
|
Container.current?.addEventListener("mouseup", newRootNode)
|
|||
|
return () => { Container.current?.removeEventListener("mouseup", newRootNode) }
|
|||
|
}, [])
|
|||
|
|
|||
|
return (
|
|||
|
<Box
|
|||
|
ref={Container}
|
|||
|
sx={{
|
|||
|
height: "100%",
|
|||
|
width: "100%",
|
|||
|
backgroundColor: "#f2f3f7",
|
|||
|
display: "flex",
|
|||
|
alignItems: "center",
|
|||
|
justifyContent: "center",
|
|||
|
color: "#4d4d4d",
|
|||
|
fontSize: "50px"
|
|||
|
}}
|
|||
|
>
|
|||
|
+
|
|||
|
</Box>
|
|||
|
)
|
|||
|
}
|