diff --git a/src/pages/Questions/answerOptions/AnswerDraggableList/AnswerItem.tsx b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx similarity index 100% rename from src/pages/Questions/answerOptions/AnswerDraggableList/AnswerItem.tsx rename to src/pages/Questions/AnswerDraggableList/AnswerItem.tsx diff --git a/src/pages/Questions/AnswerDraggableList/StrictModeDroppable.tsx b/src/pages/Questions/AnswerDraggableList/StrictModeDroppable.tsx new file mode 100644 index 00000000..6441c17e --- /dev/null +++ b/src/pages/Questions/AnswerDraggableList/StrictModeDroppable.tsx @@ -0,0 +1,23 @@ +import { useState, useEffect } from "react"; +import { Droppable } from "react-beautiful-dnd"; + +import type { DroppableProps } from "react-beautiful-dnd"; + +export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => { + const [enabled, setEnabled] = useState(false); + + useEffect(() => { + const animation = requestAnimationFrame(() => setEnabled(true)); + + return () => { + setEnabled(false); + cancelAnimationFrame(animation); + }; + }, []); + + if (!enabled) { + return null; + } + + return {children}; +}; diff --git a/src/pages/Questions/answerOptions/AnswerDraggableList/helper.ts b/src/pages/Questions/AnswerDraggableList/helper.ts similarity index 100% rename from src/pages/Questions/answerOptions/AnswerDraggableList/helper.ts rename to src/pages/Questions/AnswerDraggableList/helper.ts diff --git a/src/pages/Questions/answerOptions/AnswerDraggableList/index.tsx b/src/pages/Questions/AnswerDraggableList/index.tsx similarity index 100% rename from src/pages/Questions/answerOptions/AnswerDraggableList/index.tsx rename to src/pages/Questions/AnswerDraggableList/index.tsx diff --git a/src/pages/Questions/ButtonsOptionsAndPict.tsx b/src/pages/Questions/ButtonsOptionsAndPict.tsx index 7fd1e614..26b64933 100644 --- a/src/pages/Questions/ButtonsOptionsAndPict.tsx +++ b/src/pages/Questions/ButtonsOptionsAndPict.tsx @@ -10,7 +10,6 @@ import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon"; import ImgIcon from "../../assets/icons/questionsPage/imgIcon"; import { useParams } from "react-router-dom"; import { questionStore, removeQuestion, resetSomeField } from "@root/questions"; -import { branchStore } from "@root/branches"; import "./ButtonsOptionsAndPict.css"; @@ -27,7 +26,6 @@ export default function ButtonsOptionsAndPict({ }: Props) { const params = Number(useParams().quizId); const { openedModalSettings } = questionStore(); - const { branch } = branchStore(); const theme = useTheme(); const openedModal = () => { diff --git a/src/pages/Questions/DropDown/DropDown.tsx b/src/pages/Questions/DropDown/DropDown.tsx index 7a06a908..f195f8ff 100644 --- a/src/pages/Questions/DropDown/DropDown.tsx +++ b/src/pages/Questions/DropDown/DropDown.tsx @@ -1,5 +1,9 @@ +import { useState } from "react"; import { Box, Typography, Link, useTheme } from "@mui/material"; -import React from "react"; +import { AnswerDraggableList } from "../AnswerDraggableList"; + +import { questionStore, updateQuestionsList } from "@root/questions"; + import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import SwitchDropDown from "./switchDropDown"; import ButtonsOptions from "../ButtonsOptions"; @@ -9,35 +13,48 @@ interface Props { } export default function DropDown({ totalIndex }: Props) { + const [switchState, setSwitchState] = useState("setting"); + const { listQuestions } = questionStore(); const theme = useTheme(); - const [switchState, setSwitchState] = React.useState("setting"); + const variants = listQuestions[totalIndex].content.variants; const SSHC = (data: string) => { setSwitchState(data); }; + const addNewAnswer = () => { + const answerNew = variants.slice(); + answerNew.push({ answer: "", answerLong: "", hints: "" }); + + updateQuestionsList(totalIndex, { + content: { ...listQuestions[totalIndex].content, variants: answerNew }, + }); + }; + return ( <> - - Добавьте ответ - + {variants.length === 0 ? ( + + Добавьте ответ + + ) : ( + + )} { - // console.info("I'm a button."); - // }} + onClick={addNewAnswer} > Добавьте ответ diff --git a/src/pages/Questions/DropDown/settingDropDown.tsx b/src/pages/Questions/DropDown/settingDropDown.tsx index 4d708b1f..c8b90169 100644 --- a/src/pages/Questions/DropDown/settingDropDown.tsx +++ b/src/pages/Questions/DropDown/settingDropDown.tsx @@ -1,25 +1,49 @@ -import {Box, Typography} from "@mui/material"; +import { Box, Typography } from "@mui/material"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomTextField from "@ui_kit/CustomTextField"; + +import { questionStore, updateQuestionsList } from "@root/questions"; + import InfoIcon from "../../../assets/icons/InfoIcon"; -export default function SettingDropDown() { - return( - <> - - - Настройки ответов - +type SettingDropDownProps = { + totalIndex: number; +}; - Текст в выпадающем списке - - - - Настройки вопросов - - - - - - ) -} \ No newline at end of file +export default function SettingDropDown({ totalIndex }: SettingDropDownProps) { + const { listQuestions } = questionStore(); + + return ( + <> + + + + Настройки ответов + + + + Текст в выпадающем списке + + { + const clonContent = listQuestions[totalIndex].content; + clonContent.default = target.value; + updateQuestionsList(totalIndex, { content: clonContent }); + }} + /> + + + + Настройки вопросов + + + + + + + ); +} diff --git a/src/pages/Questions/DropDown/switchDropDown.tsx b/src/pages/Questions/DropDown/switchDropDown.tsx index 88aa794f..ac7d3b12 100644 --- a/src/pages/Questions/DropDown/switchDropDown.tsx +++ b/src/pages/Questions/DropDown/switchDropDown.tsx @@ -14,7 +14,7 @@ export default function SwitchDropDown({ }: Props) { switch (switchState) { case "setting": - return ; + return ; break; case "help": return ; diff --git a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx index e64c2cf8..7081fbe1 100644 --- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx +++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx @@ -1,36 +1,48 @@ -import { Box, Link, Typography, useTheme } from "@mui/material"; -import React from "react"; +import { useState } from "react"; +import { Box, Link, Typography, Button, useTheme } from "@mui/material"; + +import ButtonsOptions from "../ButtonsOptions"; +import { questionStore, updateQuestionsList } from "@root/questions"; + import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import AddImage from "../../../assets/icons/questionsPage/addImage"; -import ButtonsOptions from "../ButtonsOptions"; import SwitchAnswerOptionsPict from "./switchOptionsPict"; + +import type { ChangeEvent } from "react"; + interface Props { totalIndex: number; } + export default function OptionsPicture({ totalIndex }: Props) { const theme = useTheme(); - const [switchState, setSwitchState] = React.useState("setting"); - // const [addInput, setAddInput] = React.useState([ - // 0: {name: "распутье", variants: ["дорога влево", "дорога вправо"]}; - // ]); + const [switchState, setSwitchState] = useState("setting"); + const { listQuestions } = questionStore(); + const SSHC = (data: string) => { setSwitchState(data); }; - // const createCondition = (name) => { - // addInput([...state, {name: name}]) - // } - // - // const deleteCondition = (index) => { - // - // } + const addImage = ({ target }: ChangeEvent) => { + if (target.files?.length) { + const clonContent = listQuestions[totalIndex].content; + + clonContent.images.push(URL.createObjectURL(target.files[0])); + + updateQuestionsList(totalIndex, { content: clonContent }); + } + }; + return ( <> - + void; } +type SettingOpytionsPictProps = { + totalIndex: number; +}; + +const PROPORTIONS = [ + { value: "1:1", icon: ProportionsIcon11 }, + { value: "2:1", icon: ProportionsIcon21 }, + { value: "1:2", icon: ProportionsIcon12 }, +]; + export function SelectIconButton({ Icon, isActive = false, onClick }: Props) { const theme = useTheme(); return (