diff --git a/src/pages/ContactFormPage/ButtonSettingForms.tsx b/src/pages/ContactFormPage/ButtonSettingForms.tsx index 023fbf5d..d6614e51 100644 --- a/src/pages/ContactFormPage/ButtonSettingForms.tsx +++ b/src/pages/ContactFormPage/ButtonSettingForms.tsx @@ -7,10 +7,10 @@ import SupplementIcon from "../../assets/icons/ContactFormIcon/supplementIcon"; interface Props { switchState: string; - SSHC: (data: string) => void; + setSwitchState: (data: string) => void; } -export default function ButtonSettingForms({ SSHC, switchState }: Props) { +export default function ButtonSettingForms({ setSwitchState, switchState }: Props) { const theme = useTheme(); const buttonSetting: { icon: JSX.Element; title: string; value: string }[] = [ { @@ -68,7 +68,7 @@ export default function ButtonSettingForms({ SSHC, switchState }: Props) { { - SSHC(e.value); + setSwitchState(e.value); }} sx={{ backgroundColor: diff --git a/src/pages/Questions/DropDown/DropDown.tsx b/src/pages/Questions/DropDown/DropDown.tsx index 2e3352bf..fd6640c9 100644 --- a/src/pages/Questions/DropDown/DropDown.tsx +++ b/src/pages/Questions/DropDown/DropDown.tsx @@ -3,7 +3,7 @@ import { useCallback, useState } from "react"; import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon"; import { useAddAnswer } from "../../../utils/hooks/useAddAnswer"; import { AnswerDraggableList } from "../AnswerDraggableList"; -import ButtonsOptions from "../QuestionOptions/ButtonsOptions/ButtonsOptions"; +import ButtonsOptions from "../QuestionOptions/ButtonsLayout/ButtonsOptions"; import SwitchDropDown from "./switchDropDown"; import type { QuizQuestionSelect } from "@frontend/squzanswerer"; @@ -100,7 +100,7 @@ export default function DropDown({ question, openBranchingPage, setOpenBranching (function ({ questionId, isRequired, isMulti, isOwn }) { +const SettingEmoji = memo(function ({ questionId, ownPlaceholder, isRequired, isLargeCheck, isMulti, isOwn }) { const theme = useTheme(); const isWrappColumn = useMediaQuery(theme.breakpoints.down(980)); const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); const isTablet = useMediaQuery(theme.breakpoints.down(985)); const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const setOwnPlaceholder = (replText: string) => { + updateQuestion(questionId, (question) => { + if (question.type !== "varimg") return; + + question.content.ownPlaceholder = replText; + }); + }; + return ( (function ({ questionId, isRequired, pt: isTablet ? "5px" : "0px", }} > - {/* (function ({ questionId, isRequired, > Настройки ответов + { + updateQuestion(questionId, (question) => { + question.content.largeCheck = target.checked; + }); + }} + /> (function ({ questionId, isRequired, }); }} /> - */} + + + Подсказка "своего ответа" + + setOwnPlaceholder(target.value)} + /> + + ); case "help": diff --git a/src/pages/Questions/OwnTextField/OwnTextField.tsx b/src/pages/Questions/OwnTextField/OwnTextField.tsx index a4466499..9de2e7f0 100644 --- a/src/pages/Questions/OwnTextField/OwnTextField.tsx +++ b/src/pages/Questions/OwnTextField/OwnTextField.tsx @@ -5,7 +5,7 @@ import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo"; import { useEffect, useState } from "react"; import InfoIcon from "../../../assets/icons/InfoIcon"; import type { QuizQuestionText } from "@frontend/squzanswerer"; -import ButtonsOptionsAndPict from "../QuestionOptions/ButtonsOptions/ButtonsOptionsAndPict"; +import ButtonsOptions from "../QuestionOptions/ButtonsLayout/ButtonsOptions"; import SwitchTextField from "./switchTextField"; interface Props { @@ -90,9 +90,9 @@ export default function OwnTextField({ question, openBranchingPage, setOpenBranc )} - void; + setSwitchState: (data: string) => void; openBranchingPage: boolean; setOpenBranchingPage: (a: boolean) => void; questionId: string; questionType: QuestionType; questionContentId: string; questionHasParent: boolean; -} +}; -const ButtonsOptionsAndPict = memo(function ({ - SSHC, +const IgnoreImage = ["images", "emoji", "number", "date", "select", "text", "file", "rating"] + +const ButtonsOptions = memo(function ({ + setSwitchState, switchState, openBranchingPage, setOpenBranchingPage, @@ -49,17 +51,17 @@ const ButtonsOptionsAndPict = memo(function ({ questionContentId, questionHasParent, }) { - + const theme = useTheme(); + const quiz = useCurrentQuiz(); + const isQuestionFirst = useQuestionsStore((state) => state.questions[0]?.id === questionId,); + + const isIconMobile = useMediaQuery(theme.breakpoints.down(1050)); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const isIgnoreImage = !IgnoreImage.includes(questionType) + const [buttonHover, setButtonHover] = useState(""); const [openedReallyChangingModal, setOpenedReallyChangingModal] = useState(false); - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down(790)); - const isIconMobile = useMediaQuery(theme.breakpoints.down(1050)); - const quiz = useCurrentQuiz(); const [openDelete, setOpenDelete] = useState(false); - const isQuestionFirst = useQuestionsStore( - (state) => state.questions[0]?.id === questionId, - ); if (!quiz) return null; @@ -74,7 +76,6 @@ const ButtonsOptionsAndPict = memo(function ({ height: isMobile ? "92px" : "70px", }} > - ButtonsOptionsAndPict (function ({ onMouseEnter={() => setButtonHover("setting")} onMouseLeave={() => setButtonHover("")} onClick={() => { - SSHC("setting"); + switchState === "setting" ? setSwitchState("") : setSwitchState("setting"); }} sx={{ maxWidth: "104px", @@ -156,38 +157,40 @@ const ButtonsOptionsAndPict = memo(function ({ {isIconMobile ? null : "Ветвление"} )} - setButtonHover("image")} - onMouseLeave={() => setButtonHover("")} - onClick={() => { - SSHC("image"); - }} - sx={{ - height: "30px", - maxWidth: "123px", - minWidth: isIconMobile ? "30px" : "64px", - backgroundColor: - switchState === "image" - ? theme.palette.brightPurple.main - : "transparent", - color: - switchState === "image" ? "#ffffff" : theme.palette.grey3.main, - "&:hover": { - color: switchState === "image" ? theme.palette.grey3.main : null, - }, - }} - > - - {isIconMobile ? null : "Изображение"} - + {isIgnoreImage && + setButtonHover("image")} + onMouseLeave={() => setButtonHover("")} + onClick={() => { + switchState === "image" ? setSwitchState("") : setSwitchState("image"); + }} + sx={{ + height: "30px", + maxWidth: "123px", + minWidth: isIconMobile ? "30px" : "64px", + backgroundColor: + switchState === "image" + ? theme.palette.brightPurple.main + : "transparent", + color: + switchState === "image" ? "#ffffff" : theme.palette.grey3.main, + "&:hover": { + color: switchState === "image" ? theme.palette.grey3.main : null, + }, + }} + > + + {isIconMobile ? null : "Изображение"} + + } (function ({ )} - setOpenDelete(false)} - questionId={questionId} - /> + setOpenDelete(false)} + questionId={questionId} + /> setOpenedReallyChangingModal(false)} @@ -234,6 +237,4 @@ const ButtonsOptionsAndPict = memo(function ({ ); }); -ButtonsOptionsAndPict.displayName = "ButtonsOptionsAndPict"; - -export default ButtonsOptionsAndPict; +export default ButtonsOptions; diff --git a/src/pages/Questions/QuestionOptions/ButtonsOptions/DeleteBranchingQuestionModal.tsx b/src/pages/Questions/QuestionOptions/ButtonsLayout/DeleteBranchingQuestionModal.tsx similarity index 100% rename from src/pages/Questions/QuestionOptions/ButtonsOptions/DeleteBranchingQuestionModal.tsx rename to src/pages/Questions/QuestionOptions/ButtonsLayout/DeleteBranchingQuestionModal.tsx diff --git a/src/pages/Questions/QuestionOptions/ButtonsOptions/ButtonsOptions.tsx b/src/pages/Questions/QuestionOptions/ButtonsLayout/lalala.tsx similarity index 97% rename from src/pages/Questions/QuestionOptions/ButtonsOptions/ButtonsOptions.tsx rename to src/pages/Questions/QuestionOptions/ButtonsLayout/lalala.tsx index 429d9dae..8015eebe 100644 --- a/src/pages/Questions/QuestionOptions/ButtonsOptions/ButtonsOptions.tsx +++ b/src/pages/Questions/QuestionOptions/ButtonsLayout/lalala.tsx @@ -17,7 +17,7 @@ import { DeleteBranchingQuestionModal } from "./DeleteBranchingQuestionModal"; interface Props { switchState: string; - SSHC: (data: string) => void; + setSwitchState: (data: string) => void; questionId: string; questionContentId: string; questionType: QuestionType; @@ -26,8 +26,8 @@ interface Props { sx?: SxProps; } -const ButtonsOptions = memo(function ({ - SSHC, +const lalalalala = memo(function ({ + setSwitchState, switchState, questionId, questionContentId, @@ -120,7 +120,7 @@ const ButtonsOptions = memo(function ({ { - SSHC(value); + setSwitchState(value); myFunc(); }} sx={{ diff --git a/src/pages/Questions/QuestionOptions/ButtonsOptions/SwitchButtonsForQuestionTypes.tsx b/src/pages/Questions/QuestionOptions/ButtonsOptions/SwitchButtonsForQuestionTypes.tsx deleted file mode 100644 index 3c839041..00000000 --- a/src/pages/Questions/QuestionOptions/ButtonsOptions/SwitchButtonsForQuestionTypes.tsx +++ /dev/null @@ -1,54 +0,0 @@ -//Передаём сюда тип вопроса и получаем нужный набор - -const KIT = { - variant: { - settings: ["required"], - branch: true, - image: true, - }, - images: { - settings: [], - branch: true, - image: true, - }, - varimg: { - settings: [], - branch: true, - image: true, - }, - emoji: { - settings: [], - branch: true, - image: true, - }, - text: { - settings: [], - branch: true, - image: true, - }, - select: { - settings: [], - branch: true, - image: true, - }, - date: { - settings: [], - branch: true, - image: true, - }, - number: { - settings: [], - branch: true, - image: true, - }, - file: { - settings: [], - branch: true, - image: false, - }, - rating: { - settings: [], - branch: true, - image: true, - }, -} \ No newline at end of file diff --git a/src/pages/Questions/QuestionOptions/DataOptions/DataOptions.tsx b/src/pages/Questions/QuestionOptions/DateOptions/DateOptions.tsx similarity index 90% rename from src/pages/Questions/QuestionOptions/DataOptions/DataOptions.tsx rename to src/pages/Questions/QuestionOptions/DateOptions/DateOptions.tsx index 2276676a..e1de3f99 100644 --- a/src/pages/Questions/QuestionOptions/DataOptions/DataOptions.tsx +++ b/src/pages/Questions/QuestionOptions/DateOptions/DateOptions.tsx @@ -1,8 +1,8 @@ import { Box, Tooltip, Typography, useMediaQuery, useTheme } from "@mui/material"; import { useState } from "react"; import InfoIcon from "@/assets/icons/InfoIcon"; -import ButtonsOptions from "../ButtonsOptions/ButtonsOptions"; -import SwitchData from "./switchData"; +import ButtonsOptions from "../ButtonsLayout/ButtonsOptions"; +import SwitchDate from "./switchDate"; import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo"; import { QuizQuestionDate } from "@frontend/squzanswerer"; @@ -12,7 +12,7 @@ interface Props { setOpenBranchingPage: (a: boolean) => void; } -export default function DataOptions({ question, openBranchingPage, setOpenBranchingPage }: Props) { +export default function DateOptions({ question, openBranchingPage, setOpenBranchingPage }: Props) { const [switchState, setSwitchState] = useState("setting"); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(790)); @@ -64,14 +64,14 @@ export default function DataOptions({ question, openBranchingPage, setOpenBranch - diff --git a/src/pages/Questions/QuestionOptions/DataOptions/settingData.tsx b/src/pages/Questions/QuestionOptions/DateOptions/settingDate.tsx similarity index 100% rename from src/pages/Questions/QuestionOptions/DataOptions/settingData.tsx rename to src/pages/Questions/QuestionOptions/DateOptions/settingDate.tsx diff --git a/src/pages/Questions/QuestionOptions/DataOptions/switchData.tsx b/src/pages/Questions/QuestionOptions/DateOptions/switchDate.tsx similarity index 92% rename from src/pages/Questions/QuestionOptions/DataOptions/switchData.tsx rename to src/pages/Questions/QuestionOptions/DateOptions/switchDate.tsx index 118de545..331305b1 100644 --- a/src/pages/Questions/QuestionOptions/DataOptions/switchData.tsx +++ b/src/pages/Questions/QuestionOptions/DateOptions/switchDate.tsx @@ -1,6 +1,6 @@ import { QuizQuestionDate } from "@frontend/squzanswerer"; import HelpQuestions from "../../helpQuestions"; -import SettingData from "./settingData"; +import SettingDate from "./settingDate"; interface Props { switchState: string; @@ -11,7 +11,7 @@ export default function SwitchData({ switchState = "setting", question }: Props) switch (switchState) { case "setting": return ( - - (function ({ questionId, replText, isRequired, isOwn }) { +const SettingOptionsAndPict = memo(function ({ questionId, ownPlaceholder, isMulti, isLargeCheck, replText, isRequired, isOwn }) { const theme = useTheme(); const isWrappColumn = useMediaQuery(theme.breakpoints.down(980)); const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); @@ -26,6 +29,13 @@ const SettingOptionsAndPict = memo(function ({ quest question.content.replText = replText; }); }; + const setOwnPlaceholder = (replText: string) => { + updateQuestion(questionId, (question) => { + if (question.type !== "varimg") return; + + question.content.ownPlaceholder = replText; + }); + }; return ( <> @@ -49,7 +59,7 @@ const SettingOptionsAndPict = memo(function ({ quest width: "100%", }} > - {/* (function ({ quest }} > Настройки ответов - */} - {/* { - updateQuestion(questionId, (question) => { - question.content.own = target.checked; - }); + + { + updateQuestion(questionId, (question) => { + question.content.largeCheck = target.checked; + }); + }} + /> + { + updateQuestion(questionId, (question) => { + question.content.multi = target.checked; + }); + }} + /> + { + updateQuestion(questionId, (question) => { + question.content.own = target.checked; + }); + }} + /> + + */} + > + Подсказка "своего ответа" + + setOwnPlaceholder(target.value)} + /> + {!isWrappColumn && ( ); case "help": diff --git a/src/pages/Questions/QuestionOptions/OptionsPicture/OptionsPicture.tsx b/src/pages/Questions/QuestionOptions/OptionsPicture/OptionsPicture.tsx index e33b899e..10933d0d 100644 --- a/src/pages/Questions/QuestionOptions/OptionsPicture/OptionsPicture.tsx +++ b/src/pages/Questions/QuestionOptions/OptionsPicture/OptionsPicture.tsx @@ -9,7 +9,7 @@ import { useAddAnswer } from "@/utils/hooks/useAddAnswer"; import { useDisclosure } from "@/utils/useDisclosure"; import { AnswerDraggableList } from "../../AnswerDraggableList"; import ImageEditAnswerItem from "../../AnswerDraggableList/ImageEditAnswerItem"; -import ButtonsOptions from "../ButtonsOptions/ButtonsOptions"; +import ButtonsOptions from "../ButtonsLayout/ButtonsOptions"; import { UploadImageModal } from "../../UploadImage/UploadImageModal"; import SwitchAnswerOptionsPict from "./switchOptionsPict"; @@ -137,7 +137,7 @@ export default function OptionsPicture({ question, openBranchingPage, setOpenBra (function ({ +const SettingOptionsPict = memo(function ({ questionId, isRequired, - isMulti, + ownPlaceholder, isMulti, isLargeCheck, isOwn, proportions, format, @@ -55,6 +58,14 @@ const SettingOptionsPict = memo(function ({ const isTablet = useMediaQuery(theme.breakpoints.down(985)); const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); + + const setOwnPlaceholder = (replText: string) => { + updateQuestion(questionId, (question) => { + if (question.type !== "varimg") return; + + question.content.ownPlaceholder = replText; + }); + }; return ( (function ({ pt: isTablet ? "5px" : "0px", }} > - {/* - + {/* (function ({ /> ))} - + */} (function ({ > Настройки ответов + { + updateQuestion(questionId, (question) => { + question.content.largeCheck = target.checked; + }); + }} + /> (function ({ }); }} /> + + + Подсказка "своего ответа" + + setOwnPlaceholder(target.value)} + /> + - */} + {/* ); case "help": diff --git a/src/pages/Questions/QuestionOptions/RatingOptions/RatingOptions.tsx b/src/pages/Questions/QuestionOptions/RatingOptions/RatingOptions.tsx index 25549319..e86dd806 100644 --- a/src/pages/Questions/QuestionOptions/RatingOptions/RatingOptions.tsx +++ b/src/pages/Questions/QuestionOptions/RatingOptions/RatingOptions.tsx @@ -9,7 +9,7 @@ import LightbulbIcon from "@/assets/icons/questionsPage/lightbulbIcon"; import LikeIcon from "@/assets/icons/questionsPage/likeIcon"; import TropfyIcon from "@/assets/icons/questionsPage/tropfyIcon"; import type { QuizQuestionRating } from "@frontend/squzanswerer"; -import ButtonsOptions from "../ButtonsOptions/ButtonsOptions"; +import ButtonsOptions from "../ButtonsLayout/ButtonsOptions"; import SwitchRating from "./switchRating"; const TextField = MuiTextField as unknown as FC; @@ -289,7 +289,7 @@ export default function RatingOptions({ question, openBranchingPage, setOpenBran - (function ({ questionId, isRequired, isLargeCheck, isMulti, isOwn }) { +const ResponseSettings = memo(function ({ questionId, ownPlaceholder, isRequired, isLargeCheck, isMulti, isOwn }) { const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down(900)); const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const setOwnPlaceholder = (replText: string) => { + updateQuestion(questionId, (question) => { + if (question.type !== "varimg") return; + + question.content.ownPlaceholder = replText; + }); + }; return ( (function ({ questionId, isRequired, isLarge pt: isTablet ? "5px" : "0px", }} > - {/* (function ({ questionId, isRequired, isLarge { updateQuestion(questionId, (question) => { @@ -84,7 +93,31 @@ const ResponseSettings = memo(function ({ questionId, isRequired, isLarge }); }} /> - */} + + + Подсказка "своего ответа" + + setOwnPlaceholder(target.value)} + /> + + ); case "help": diff --git a/src/pages/Questions/SwitchQuestionsPage.tsx b/src/pages/Questions/SwitchQuestionsPage.tsx index 3ade6b28..bab1a9db 100644 --- a/src/pages/Questions/SwitchQuestionsPage.tsx +++ b/src/pages/Questions/SwitchQuestionsPage.tsx @@ -1,4 +1,4 @@ -import DataOptions from "./QuestionOptions/DataOptions/DataOptions"; +import DateOptions from "./QuestionOptions/DateOptions/DateOptions"; import DropDown from "./DropDown/DropDown"; import Emoji from "./Emoji/Emoji"; import OptionsAndPicture from "./QuestionOptions/OptionsAndPicture/OptionsAndPicture"; @@ -76,7 +76,7 @@ export default function SwitchQuestionsPage({ question, openBranchingPage, setOp case "date": return ( - void; + setSwitchState: (data: string) => void; } -export default function ButtonsOptionsForm({ SSHC, switchState }: Props) { +export default function ButtonsOptionsForm({ setSwitchState, switchState }: Props) { const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down(800)); @@ -74,7 +74,7 @@ export default function ButtonsOptionsForm({ SSHC, switchState }: Props) { { - SSHC(value); + setSwitchState(value); }} sx={{ backgroundColor: diff --git a/src/pages/ResultPage/DescriptionForm/DescriptionForm.tsx b/src/pages/ResultPage/DescriptionForm/DescriptionForm.tsx index 2038969f..e4c452b1 100644 --- a/src/pages/ResultPage/DescriptionForm/DescriptionForm.tsx +++ b/src/pages/ResultPage/DescriptionForm/DescriptionForm.tsx @@ -24,7 +24,7 @@ export const DescriptionForm = () => { setPriceButtonsType(type); }; - const SSHC = (data: string) => { + const setSwitchState = (data: string) => { setSwitchState(data); }; @@ -188,7 +188,7 @@ export const DescriptionForm = () => { )} - + );