diff --git a/lib/components/ViewPublicationPage/ResultForm.tsx b/lib/components/ViewPublicationPage/ResultForm.tsx index 6d7da92..fdb734e 100644 --- a/lib/components/ViewPublicationPage/ResultForm.tsx +++ b/lib/components/ViewPublicationPage/ResultForm.tsx @@ -1,4 +1,4 @@ -import { useEffect } from "react"; +import { useEffect, useMemo } from "react"; import { Box, Button, Link, Typography, useTheme } from "@mui/material"; import { useQuizViewStore } from "@/stores/quizView"; @@ -76,6 +76,13 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => { })(); }, []); + const choiceImgUrlQuestion = useMemo(() => { + if (resultQuestion.content.editedUrlImagesList !== undefined) { + return resultQuestion.content.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"]; + } else { + return resultQuestion.content.back; + } + }, [resultQuestion]); return ( { }} /> )} - {resultQuestion?.content.useImage && resultQuestion.content.back && ( + {resultQuestion?.content.useImage && choiceImgUrlQuestion && ( { > resultImage state); const theme = useTheme(); const answers = useQuizViewStore((state) => state.answers); + const isMobile = useRootContainerSize() < 450; + const isTablet = useRootContainerSize() < 850; const onVariantClick = async (event: MouseEvent) => { event.preventDefault(); @@ -119,6 +122,14 @@ export const ImageVariant = ({ } }; + const choiceImgUrl = useMemo(() => { + if (variant.editedUrlImagesList !== undefined) { + return variant.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"]; + } else { + return variant.extendedText; + } + }, []); + return ( {variant.extendedText && ( { const { settings } = useQuizSettings(); const { updateAnswer } = useQuizViewStore((state) => state); const isMobile = useRootContainerSize() < 650; + const isTablet = useRootContainerSize() < 850; const theme = useTheme(); const onInputChange = async ({ target }: ChangeEvent) => { updateAnswer(currentQuestion.id, target.value, 0); }; - + const choiceImgUrlQuestion = useMemo(() => { + if (currentQuestion.content.editedUrlImagesList !== undefined) { + return currentQuestion.content.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"]; + } else { + return currentQuestion.content.back; + } + }, [currentQuestion]); return ( { "&:focus-visible": { borderColor: theme.palette.primary.main }, }} /> - {currentQuestion.content.back && currentQuestion.content.back !== " " && ( + {choiceImgUrlQuestion && choiceImgUrlQuestion !== " " && choiceImgUrlQuestion !== null && ( { > diff --git a/lib/components/ViewPublicationPage/questions/Variant/index.tsx b/lib/components/ViewPublicationPage/questions/Variant/index.tsx index a848e00..53b0a2a 100644 --- a/lib/components/ViewPublicationPage/questions/Variant/index.tsx +++ b/lib/components/ViewPublicationPage/questions/Variant/index.tsx @@ -1,5 +1,5 @@ import { Box, FormGroup, RadioGroup, Typography, useTheme } from "@mui/material"; -import { useEffect } from "react"; +import { useEffect, useMemo } from "react"; import { VariantItem } from "./VariantItem"; @@ -16,6 +16,7 @@ type VariantProps = { export const Variant = ({ currentQuestion }: VariantProps) => { const theme = useTheme(); const isMobile = useRootContainerSize() < 650; + const isTablet = useRootContainerSize() < 850; const answers = useQuizViewStore((state) => state.answers); const ownVariants = useQuizViewStore((state) => state.ownVariants); const updateOwnVariant = useQuizViewStore((state) => state.updateOwnVariant); @@ -32,6 +33,13 @@ export const Variant = ({ currentQuestion }: VariantProps) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + const choiceImgUrlQuestion = useMemo(() => { + if (currentQuestion.content.editedUrlImagesList !== undefined) { + return currentQuestion.content.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"]; + } else { + return currentQuestion.content.back; + } + }, [currentQuestion]); if (moment.isMoment(answer)) throw new Error("Answer is Moment in Variant question"); return ( @@ -93,11 +101,11 @@ export const Variant = ({ currentQuestion }: VariantProps) => { ))} - {currentQuestion.content.back && currentQuestion.content.back !== " " && ( + {choiceImgUrlQuestion && choiceImgUrlQuestion !== " " && choiceImgUrlQuestion !== null && ( diff --git a/lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx b/lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx index 62885fc..942c4c2 100644 --- a/lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx +++ b/lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx @@ -1,4 +1,4 @@ -import type { QuestionVariant } from "@/model/questionTypes/shared"; +import type { QuestionVariant, QuestionVariantWithEditedImages } from "@/model/questionTypes/shared"; import { useQuizSettings } from "@contexts/QuizDataContext"; import { FormControlLabel, @@ -15,12 +15,12 @@ import { useQuizViewStore } from "@stores/quizView"; import RadioCheck from "@ui_kit/RadioCheck"; import RadioIcon from "@ui_kit/RadioIcon"; import { quizThemes } from "@utils/themes/Publication/themePublication"; -import type { MouseEvent } from "react"; +import { type MouseEvent } from "react"; import { useDebouncedCallback } from "use-debounce"; type VarimgVariantProps = { questionId: string; - variant: QuestionVariant; + variant: QuestionVariantWithEditedImages; index: number; isSending: boolean; setIsSending: (isSending: boolean) => void; @@ -102,11 +102,11 @@ export const VarimgVariant = ({ ownPlaceholder, answer, }: VarimgVariantProps) => { + const theme = useTheme(); + const { settings } = useQuizSettings(); const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state); - const theme = useTheme(); - const sendVariant = async (event: MouseEvent) => { event.preventDefault(); diff --git a/lib/components/ViewPublicationPage/questions/Varimg/index.tsx b/lib/components/ViewPublicationPage/questions/Varimg/index.tsx index 0f35341..03860e6 100644 --- a/lib/components/ViewPublicationPage/questions/Varimg/index.tsx +++ b/lib/components/ViewPublicationPage/questions/Varimg/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { Box, RadioGroup, Typography, useTheme } from "@mui/material"; import { VarimgVariant } from "./VarimgVariant"; @@ -23,6 +23,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => { const theme = useTheme(); const isMobile = useRootContainerSize() < 650; + const isTablet = useRootContainerSize() < 850; const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {}; const ownVariant = ownVariants.find((variant) => variant.id === currentQuestion.id); @@ -35,6 +36,23 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + const choiceImgUrlAnswer = useMemo(() => { + if (variant !== undefined) { + if (variant.editedUrlImagesList !== undefined) { + return variant.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"]; + } else { + return variant.extendedText; + } + } + }, [variant]); + + const choiceImgUrlQuestion = useMemo(() => { + if (currentQuestion.content.editedUrlImagesList !== undefined) { + return currentQuestion.content.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"]; + } else { + return currentQuestion.content.back; + } + }, [variant]); if (moment.isMoment(answer)) throw new Error("Answer is Moment in Variant question"); return ( @@ -115,21 +133,19 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => { }} > {answer ? ( - variant?.extendedText ? ( + choiceImgUrlAnswer ? ( ) : ( ) - ) : currentQuestion.content.back !== " " && - currentQuestion.content.back !== null && - currentQuestion.content.back.length > 0 ? ( + ) : choiceImgUrlQuestion !== " " && choiceImgUrlQuestion !== null && choiceImgUrlQuestion.length > 0 ? ( diff --git a/lib/model/questionTypes/images.ts b/lib/model/questionTypes/images.ts index 1bf3693..88084c9 100644 --- a/lib/model/questionTypes/images.ts +++ b/lib/model/questionTypes/images.ts @@ -1,4 +1,4 @@ -import type { QuestionHint, QuestionVariant, QuizQuestionBase, QuestionBranchingRule } from "./shared"; +import type { QuestionHint, QuestionVariantWithEditedImages, QuizQuestionBase, QuestionBranchingRule } from "./shared"; export interface QuizQuestionImages extends QuizQuestionBase { type: "images"; @@ -21,7 +21,7 @@ export interface QuizQuestionImages extends QuizQuestionBase { /** Чекбокс "Необязательный вопрос" */ required: boolean; /** Варианты (картинки) */ - variants: QuestionVariant[]; + variants: QuestionVariantWithEditedImages[]; hint: QuestionHint; rule: QuestionBranchingRule; back: string | null; diff --git a/lib/model/questionTypes/result.ts b/lib/model/questionTypes/result.ts index 26a05ea..cb8e4a0 100644 --- a/lib/model/questionTypes/result.ts +++ b/lib/model/questionTypes/result.ts @@ -1,4 +1,4 @@ -import type { QuizQuestionBase, QuestionBranchingRule, QuestionHint } from "./shared"; +import type { QuizQuestionBase, QuestionBranchingRule, QuestionHint, EditedUrlImagesList } from "./shared"; interface ResultQuestionBranchingRule extends QuestionBranchingRule { minScore?: number; @@ -15,6 +15,7 @@ export interface QuizQuestionResult extends QuizQuestionBase { price: [number] | [number, number]; useImage: boolean; rule: ResultQuestionBranchingRule; + editedUrlImagesList: EditedUrlImagesList; hint: QuestionHint; autofill: boolean; usage: boolean; diff --git a/lib/model/questionTypes/shared.ts b/lib/model/questionTypes/shared.ts index 1235145..5ea61e2 100644 --- a/lib/model/questionTypes/shared.ts +++ b/lib/model/questionTypes/shared.ts @@ -1,3 +1,4 @@ +import { type } from "os"; import type { QuizQuestionDate } from "./date"; import type { QuizQuestionEmoji } from "./emoji"; import type { QuizQuestionFile } from "./file"; @@ -20,6 +21,9 @@ export interface QuestionBranchingRuleMain { }[]; } +export type EditedImagesScreens = "desktop" | "tablet" | "mobile" | "small"; +export type EditedUrlImagesList = Record; + export interface QuestionBranchingRule { children: string[]; //список условий @@ -49,6 +53,9 @@ export type QuestionVariant = { originalImageUrl: string; points?: number; }; +export interface QuestionVariantWithEditedImages extends QuestionVariant { + editedUrlImagesList?: EditedUrlImagesList; +} export type QuestionType = | "variant" diff --git a/lib/model/questionTypes/text.ts b/lib/model/questionTypes/text.ts index 0fda214..0c57722 100644 --- a/lib/model/questionTypes/text.ts +++ b/lib/model/questionTypes/text.ts @@ -1,4 +1,4 @@ -import type { QuizQuestionBase, QuestionHint, QuestionBranchingRule } from "./shared"; +import type { QuizQuestionBase, QuestionHint, QuestionBranchingRule, EditedUrlImagesList } from "./shared"; export interface QuizQuestionText extends QuizQuestionBase { type: "text"; @@ -14,6 +14,7 @@ export interface QuizQuestionText extends QuizQuestionBase { /** Чекбокс "Автозаполнение адреса" */ autofill: boolean; answerType: "single" | "multi" | "numberOnly"; + editedUrlImagesList: EditedUrlImagesList; hint: QuestionHint; rule: QuestionBranchingRule; back: string | null; diff --git a/lib/model/questionTypes/variant.ts b/lib/model/questionTypes/variant.ts index 5e8aef8..18cd606 100644 --- a/lib/model/questionTypes/variant.ts +++ b/lib/model/questionTypes/variant.ts @@ -1,4 +1,10 @@ -import type { QuizQuestionBase, QuestionVariant, QuestionHint, QuestionBranchingRule } from "./shared"; +import type { + QuizQuestionBase, + QuestionVariant, + QuestionHint, + QuestionBranchingRule, + EditedUrlImagesList, +} from "./shared"; export interface QuizQuestionVariant extends QuizQuestionBase { type: "variant"; @@ -14,6 +20,7 @@ export interface QuizQuestionVariant extends QuizQuestionBase { innerNameCheck: boolean; /** Чекбокс "Необязательный вопрос" */ required: boolean; + editedUrlImagesList: EditedUrlImagesList; /** Поле "Внутреннее название вопроса" */ innerName: string; /** Варианты ответов */ diff --git a/lib/model/questionTypes/varimg.ts b/lib/model/questionTypes/varimg.ts index 09fb604..8546d97 100644 --- a/lib/model/questionTypes/varimg.ts +++ b/lib/model/questionTypes/varimg.ts @@ -1,4 +1,10 @@ -import type { QuestionHint, QuestionVariant, QuizQuestionBase, QuestionBranchingRule } from "./shared"; +import type { + QuestionHint, + QuestionVariantWithEditedImages, + EditedUrlImagesList, + QuizQuestionBase, + QuestionBranchingRule, +} from "./shared"; export interface QuizQuestionVarImg extends QuizQuestionBase { type: "varimg"; @@ -12,7 +18,8 @@ export interface QuizQuestionVarImg extends QuizQuestionBase { innerName: string; /** Чекбокс "Необязательный вопрос" */ required: boolean; - variants: QuestionVariant[]; + variants: QuestionVariantWithEditedImages[]; + editedUrlImagesList: EditedUrlImagesList; hint: QuestionHint; rule: QuestionBranchingRule; back: string | null;