diff --git a/src/model/questionTypes/text.ts b/src/model/questionTypes/text.ts index c38101aa..b8b47909 100644 --- a/src/model/questionTypes/text.ts +++ b/src/model/questionTypes/text.ts @@ -1,4 +1,4 @@ -import type { QuizQuestionBase, QuestionHint, PreviewRule } from "./shared"; +import type { PreviewRule, QuestionHint, QuizQuestionBase } from "./shared"; export interface QuizQuestionText extends QuizQuestionBase { type: "text"; @@ -13,7 +13,7 @@ export interface QuizQuestionText extends QuizQuestionBase { required: boolean; /** Чекбокс "Автозаполнение адреса" */ autofill: boolean; - answerType: "single" | "multi"; + answerType: "single" | "multi" | "numberOnly"; hint: QuestionHint; rule: PreviewRule; back: string; diff --git a/src/pages/Questions/DataOptions/settingData.tsx b/src/pages/Questions/DataOptions/settingData.tsx index 59044ab4..9b9f290a 100644 --- a/src/pages/Questions/DataOptions/settingData.tsx +++ b/src/pages/Questions/DataOptions/settingData.tsx @@ -4,13 +4,17 @@ import CustomCheckbox from "@ui_kit/CustomCheckbox"; import type { QuizQuestionDate } from "../../../model/questionTypes/date"; type SettingsDataProps = { - question: QuizQuestionDate; + questionId: string; + isRequired: boolean; + isDateRange: boolean; + isTime: boolean; }; -export default function SettingsData({ question }: SettingsDataProps) { +export default function SettingsData({ questionId, isRequired, isDateRange, isTime }: SettingsDataProps) { const theme = useTheme(); const isWrappColumn = useMediaQuery(theme.breakpoints.down(980)); const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const isTablet = useMediaQuery(theme.breakpoints.down(900)); const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); return ( @@ -18,19 +22,66 @@ export default function SettingsData({ question }: SettingsDataProps) { sx={{ display: "flex", justifyContent: "space-between", - flexDirection: isWrappColumn ? "column" : null, + flexDirection: isTablet ? "column" : "row", + marginRight: isFigmaTablte ? (isMobile ? "0" : "0px") : "30px", + pb: "20px", + pl: "20px", + pt: isTablet ? "5px" : "0px", }} > + + Настройки ответов + + { + updateQuestion(questionId, (question) => { + question.content.dateRange = target.checked; + }); + }} + /> + { + updateQuestion(questionId, (question) => { + question.content.time = target.checked; + }); + }} + /> + + { - updateQuestion(question.id, (question) => { + updateQuestion(questionId, (question) => { question.content.required = !target.checked; }); }} diff --git a/src/pages/Questions/DataOptions/switchData.tsx b/src/pages/Questions/DataOptions/switchData.tsx index 805eecd6..18c2997b 100644 --- a/src/pages/Questions/DataOptions/switchData.tsx +++ b/src/pages/Questions/DataOptions/switchData.tsx @@ -7,13 +7,17 @@ interface Props { question: QuizQuestionDate; } -export default function SwitchData({ - switchState = "setting", - question, -}: Props) { +export default function SwitchData({ switchState = "setting", question }: Props) { switch (switchState) { case "setting": - return ; + return ( + + ); case "help": return ( (function ({ - questionId, - isRequired, -}) { +const SettingEmoji = memo(function ({ questionId, isRequired, 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)); return ( @@ -24,13 +25,58 @@ const SettingEmoji = memo(function ({ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : "none", + pb: "20px", + pl: "20px", + pt: isTablet ? "5px" : "0px", }} > + + + Настройки ответов + + { + updateQuestion(questionId, (question) => { + question.content.multi = target.checked; + }); + }} + /> + { + updateQuestion(questionId, (question) => { + question.content.own = target.checked; + }); + }} + /> + ); case "help": diff --git a/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx b/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx index d910360f..5e0535b5 100644 --- a/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx +++ b/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx @@ -4,21 +4,20 @@ import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomTextField from "@ui_kit/CustomTextField"; import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg"; import { memo } from "react"; +import type { QuizQuestionVariant } from "@model/questionTypes/variant"; type SettingOptionsAndPictProps = { questionId: string; replText: string; isRequired: boolean; + isOwn: boolean; }; -const SettingOptionsAndPict = memo(function ({ - questionId, - replText, - isRequired, -}) { +const SettingOptionsAndPict = memo(function ({ questionId, replText, isRequired, 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(680)); const setReplText = (replText: string) => { @@ -36,13 +35,14 @@ const SettingOptionsAndPict = memo(function ({ display: "flex", justifyContent: "space-between", flexDirection: isWrappColumn ? "column" : "none", + pb: "20px", + pl: "20px", + pt: isTablet ? "5px" : "0px", }} > (function ({ > Настройки ответов + { + updateQuestion(questionId, (question) => { + question.content.own = target.checked; + }); + }} + /> {!isWrappColumn && ( (function ({ (function ({ } /> {isWrappColumn && ( - <> + (function ({ maxLength={60} onChange={({ target }) => setReplText(target.value)} /> - + )} diff --git a/src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx b/src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx index 018fb0a9..2243f045 100644 --- a/src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx +++ b/src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx @@ -8,10 +8,7 @@ interface Props { question: QuizQuestionVarImg; } -export default function SwitchOptionsAndPict({ - switchState = "setting", - question, -}: Props) { +export default function SwitchOptionsAndPict({ switchState = "setting", question }: Props) { switch (switchState) { case "setting": return ( @@ -19,6 +16,7 @@ export default function SwitchOptionsAndPict({ questionId={question.id} replText={question.content.replText} isRequired={question.content.required} + isOwn={question.content.own} /> ); case "help": @@ -30,12 +28,7 @@ export default function SwitchOptionsAndPict({ /> ); case "image": - return ( - - ); + return ; default: return null; } diff --git a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx index ee1b061a..770327db 100644 --- a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx +++ b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx @@ -1,10 +1,4 @@ -import { - Box, - Button, - Typography, - useMediaQuery, - useTheme, -} from "@mui/material"; +import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material"; import { updateQuestion } from "@root/questions/actions"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; import ProportionsIcon11 from "../../../assets/icons/questionsPage/ProportionsIcon11"; @@ -12,6 +6,9 @@ import ProportionsIcon12 from "../../../assets/icons/questionsPage/ProportionsIc import ProportionsIcon21 from "../../../assets/icons/questionsPage/ProportionsIcon21"; import type { QuizQuestionImages } from "../../../model/questionTypes/images"; import { memo } from "react"; +import type { QuizQuestionVariant } from "@model/questionTypes/variant"; +import FormatIcon1 from "../../../assets/icons/questionsPage/FormatIcon1"; +import FormatIcon2 from "../../../assets/icons/questionsPage/FormatIcon2"; type Proportion = "1:1" | "2:1" | "1:2"; @@ -26,14 +23,34 @@ const PROPORTIONS: ProportionItem[] = [ { value: "1:2", icon: ProportionsIcon12 }, ]; +type Format = "carousel" | "masonry"; + +type FormatItem = { + value: Format; + icon: (props: { color: string }) => JSX.Element; +}; + +const FORMATS: FormatItem[] = [ + { value: "masonry", icon: FormatIcon2 }, + { value: "carousel", icon: FormatIcon1 }, +]; + type SettingOpytionsPictProps = { questionId: string; isRequired: boolean; + isMulti: boolean; + isOwn: boolean; + proportions: Proportion; + format: Format; }; const SettingOptionsPict = memo(function ({ questionId, isRequired, + isMulti, + isOwn, + proportions, + format, }) { const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down(985)); @@ -47,38 +64,167 @@ const SettingOptionsPict = memo(function ({ justifyContent: "space-between", flexDirection: isTablet ? "column" : null, marginRight: isFigmaTablte ? (isMobile ? "0" : "0px") : "30px", + pb: "20px", + pl: "20px", + pt: isTablet ? "5px" : "0px", }} > - - + - Настройки вопросов - - - updateQuestion(questionId, (question) => { - if (question.type !== "images") return; + + Пропорции + + + {PROPORTIONS.map((proportionItem, index) => ( + { + updateQuestion(questionId, (question) => { + if (question.type !== "images") return; + question.content.xy = proportionItem.value; + }); + }} + /> + ))} + + + + + Настройки ответов + + { + updateQuestion(questionId, (question) => { + question.content.multi = target.checked; + }); + }} + /> + { + updateQuestion(questionId, (question) => { + question.content.own = target.checked; + }); + }} + /> + + + + + + Формат + + + {FORMATS.map((formatItem, index) => ( + { + updateQuestion(questionId, (question) => { + if (question.type !== "images") return; + question.content.format = formatItem.value; + }); + }} + /> + ))} + + + + Настройки вопросов + + updateQuestion(questionId, (question) => { + if (question.type !== "images") return; - question.content.required = !target.checked; - }) - } - /> + question.content.required = !target.checked; + }) + } + /> + ); @@ -101,23 +247,13 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {