diff --git a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx
index a82e49b0..a5fdd795 100644
--- a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx
+++ b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx
@@ -1,7 +1,10 @@
-import {Box, Button, Typography, useTheme} from "@mui/material";
+import { useEffect } from "react";
+import { Box, Button, Typography, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
+
+import { questionStore, updateQuestionsList } from "@root/questions";
+
import InfoIcon from "../../../assets/icons/InfoIcon";
-import { useState } from "react";
import FormatIcon2 from "../../../assets/icons/questionsPage/FormatIcon2";
import FormatIcon1 from "../../../assets/icons/questionsPage/FormatIcon1";
import ProportionsIcon11 from "../../../assets/icons/questionsPage/ProportionsIcon11";
@@ -14,18 +17,38 @@ interface Props {
onClick: () => 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 (
}
+ startIcon={
+
+ }
sx={{
backgroundColor: isActive ? theme.palette.brightPurple.main : "#eee4fc",
borderRadius: 0,
border: "none",
- color: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
+ color: isActive
+ ? theme.palette.brightPurple.main
+ : theme.palette.grey2.main,
p: "7px",
width: "auto",
minWidth: 0,
@@ -35,19 +58,31 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
},
"&:hover": {
border: "none",
- borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
+ borderColor: isActive
+ ? theme.palette.brightPurple.main
+ : theme.palette.grey2.main,
},
}}
/>
);
}
-type Proportions = "oneOne" | "twoOne" | "oneTwo";
-type AlignType = "left" | "right";
+export default function SettingOpytionsPict({
+ totalIndex,
+}: SettingOpytionsPictProps) {
+ const { listQuestions } = questionStore();
-export default function SettingOpytionsPict() {
- const [proportions, setProportions] = useState("oneOne");
- const [alignType, setAlignType] = useState("left");
+ useEffect(() => {
+ if (!listQuestions[totalIndex].content.xy) {
+ updateProportions("1:1");
+ }
+ }, []);
+
+ const updateProportions = (proportions: string) => {
+ const clonContent = listQuestions[totalIndex].content;
+ clonContent.xy = proportions;
+ updateQuestionsList(totalIndex, { content: clonContent });
+ };
return (
<>
@@ -61,25 +96,43 @@ export default function SettingOpytionsPict() {
marginBottom: "20px",
}}
>
- setProportions("oneOne")}
- isActive={proportions === "oneOne"}
- Icon={ProportionsIcon11}
- />
- setProportions("twoOne")}
- isActive={proportions === "twoOne"}
- Icon={ProportionsIcon21}
- />
- setProportions("oneTwo")}
- isActive={proportions === "oneTwo"}
- Icon={ProportionsIcon12}
- />
+ {PROPORTIONS.map(({ value, icon }, index) => (
+ updateProportions(value)}
+ isActive={listQuestions[totalIndex].content.xy === value}
+ Icon={icon}
+ />
+ ))}
- Настройки ответов
-
-
+
+ Настройки ответов
+
+
+
+ updateQuestionsList(totalIndex, {
+ content: {
+ ...listQuestions[totalIndex].content,
+ multi: !listQuestions[totalIndex].content.multi,
+ },
+ })
+ }
+ />
+
+ updateQuestionsList(totalIndex, {
+ content: {
+ ...listQuestions[totalIndex].content,
+ large: !listQuestions[totalIndex].content.large,
+ },
+ })
+ }
+ />
@@ -91,14 +144,34 @@ export default function SettingOpytionsPict() {
marginBottom: "20px",
}}
>
- setAlignType("left")} isActive={alignType === "left"} Icon={FormatIcon2} />
setAlignType("right")}
- isActive={alignType === "right"}
+ onClick={() =>
+ updateQuestionsList(totalIndex, {
+ content: {
+ ...listQuestions[totalIndex].content,
+ format: "carousel",
+ },
+ })
+ }
+ isActive={listQuestions[totalIndex].content.format === "carousel"}
+ Icon={FormatIcon2}
+ />
+
+ updateQuestionsList(totalIndex, {
+ content: {
+ ...listQuestions[totalIndex].content,
+ format: "masonry",
+ },
+ })
+ }
+ isActive={listQuestions[totalIndex].content.format === "masonry"}
Icon={FormatIcon1}
/>
- Настройки вопросов
+
+ Настройки вопросов
+
diff --git a/src/pages/Questions/OptionsPicture/switchOptionsPict.tsx b/src/pages/Questions/OptionsPicture/switchOptionsPict.tsx
index 72d06866..de7e7dd2 100644
--- a/src/pages/Questions/OptionsPicture/switchOptionsPict.tsx
+++ b/src/pages/Questions/OptionsPicture/switchOptionsPict.tsx
@@ -14,13 +14,13 @@ export default function SwitchAnswerOptionsPict({
}: Props) {
switch (switchState) {
case "setting":
- return ;
+ return ;
break;
case "help":
return ;
break;
case "branching":
- return ;
+ return ;
break;
default:
return <>>;
diff --git a/src/stores/questions.ts b/src/stores/questions.ts
index 186b1d14..ef292e53 100644
--- a/src/stores/questions.ts
+++ b/src/stores/questions.ts
@@ -47,6 +47,8 @@ export interface Question {
default: string;
single: boolean;
number: boolean;
+ xy: string;
+ format: "carousel" | "masonry";
};
version: number;
parent_ids: number[];
@@ -116,6 +118,8 @@ export const createQuestion = (id: number) => {
images: [],
number: false,
single: false,
+ xy: "",
+ format: "carousel",
variants: [
{
answer: "",