diff --git a/src/assets/icons/ArrowCounterClockWise.svg b/src/assets/icons/ArrowCounterClockWise.svg index 8a1cbcd4..ba2b9e6b 100644 --- a/src/assets/icons/ArrowCounterClockWise.svg +++ b/src/assets/icons/ArrowCounterClockWise.svg @@ -1,5 +1,5 @@ - - + + diff --git a/src/assets/icons/BrowserIcon.tsx b/src/assets/icons/BrowserIcon.tsx index aa610ce8..418eec95 100644 --- a/src/assets/icons/BrowserIcon.tsx +++ b/src/assets/icons/BrowserIcon.tsx @@ -24,14 +24,14 @@ export default function BrowserIcon() { d="M20.25 4.5H3.75C3.33579 4.5 3 4.83579 3 5.25V18.75C3 19.1642 3.33579 19.5 3.75 19.5H20.25C20.6642 19.5 21 19.1642 21 18.75V5.25C21 4.83579 20.6642 4.5 20.25 4.5Z" stroke="#4D4D4D" strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/ContactFormIcon/AddressIcon.tsx b/src/assets/icons/ContactFormIcon/AddressIcon.tsx index e17f4d7d..9918ee4e 100644 --- a/src/assets/icons/ContactFormIcon/AddressIcon.tsx +++ b/src/assets/icons/ContactFormIcon/AddressIcon.tsx @@ -25,13 +25,13 @@ export default function AddressIcon({ color }: Props) { diff --git a/src/assets/icons/ContactFormIcon/EmailIcon.tsx b/src/assets/icons/ContactFormIcon/EmailIcon.tsx index 9cda5066..ad09e984 100644 --- a/src/assets/icons/ContactFormIcon/EmailIcon.tsx +++ b/src/assets/icons/ContactFormIcon/EmailIcon.tsx @@ -25,13 +25,13 @@ export default function EmailIcon({ color }: Props) { diff --git a/src/assets/icons/ContactFormIcon/NameIcon.tsx b/src/assets/icons/ContactFormIcon/NameIcon.tsx index 901af98b..d209df2a 100644 --- a/src/assets/icons/ContactFormIcon/NameIcon.tsx +++ b/src/assets/icons/ContactFormIcon/NameIcon.tsx @@ -30,13 +30,13 @@ export default function NameIcon({ color }: Props) { diff --git a/src/assets/icons/ContactFormIcon/PhoneIcon.tsx b/src/assets/icons/ContactFormIcon/PhoneIcon.tsx index 946ea890..33266a5f 100644 --- a/src/assets/icons/ContactFormIcon/PhoneIcon.tsx +++ b/src/assets/icons/ContactFormIcon/PhoneIcon.tsx @@ -25,7 +25,7 @@ export default function PhoneIcon({ color }: Props) { diff --git a/src/assets/icons/ContactFormIcon/TextIcon.tsx b/src/assets/icons/ContactFormIcon/TextIcon.tsx index 4769208c..b272b37b 100644 --- a/src/assets/icons/ContactFormIcon/TextIcon.tsx +++ b/src/assets/icons/ContactFormIcon/TextIcon.tsx @@ -25,43 +25,43 @@ export default function TextIcon({ color }: Props) { diff --git a/src/assets/icons/ContactFormIcon/supplementIcon.tsx b/src/assets/icons/ContactFormIcon/supplementIcon.tsx index 403e093a..8ffb4379 100644 --- a/src/assets/icons/ContactFormIcon/supplementIcon.tsx +++ b/src/assets/icons/ContactFormIcon/supplementIcon.tsx @@ -25,7 +25,7 @@ export default function SupplementIcon({ color }: Props) { diff --git a/src/assets/icons/CopyIcon.tsx b/src/assets/icons/CopyIcon.tsx index f696653f..cf63279b 100644 --- a/src/assets/icons/CopyIcon.tsx +++ b/src/assets/icons/CopyIcon.tsx @@ -33,14 +33,14 @@ export default function CopyIcon({ color, bgcolor, marL }: Props) { d="M21.75 21.75H26.25V9.75H14.25V14.25" stroke={color} strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/CropIcon.tsx b/src/assets/icons/CropIcon.tsx index 75233e2f..b2fdd8ae 100644 --- a/src/assets/icons/CropIcon.tsx +++ b/src/assets/icons/CropIcon.tsx @@ -1,10 +1,40 @@ import { FC } from "react"; export const CropIcon: FC = () => ( - - - - - + + + + + ); diff --git a/src/assets/icons/DomenIcon.tsx b/src/assets/icons/DomenIcon.tsx index f1723555..18866c31 100644 --- a/src/assets/icons/DomenIcon.tsx +++ b/src/assets/icons/DomenIcon.tsx @@ -37,7 +37,7 @@ export default function DomenIcon({ color, bgcolor }: Props) { d="M9.39062 17.8906H27.3906" stroke={color} strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> - - - + + + diff --git a/src/assets/icons/IconPlus.tsx b/src/assets/icons/IconPlus.tsx index a23be493..d4c3149d 100644 --- a/src/assets/icons/IconPlus.tsx +++ b/src/assets/icons/IconPlus.tsx @@ -18,14 +18,14 @@ export default function IconPlus() { d="M3.75 12H20.25" stroke="white" strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/Info.tsx b/src/assets/icons/Info.tsx index 69e0d0a3..30558f7f 100644 --- a/src/assets/icons/Info.tsx +++ b/src/assets/icons/Info.tsx @@ -19,14 +19,14 @@ export default function Info({ width = 20, height = 20 }: InfoProps) { d="M10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z" stroke="#7E2AEA" strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> = ({ style, onClick }) => ( d="M22.0254 12.4609H28.0254V6.46094" stroke="#9A9AAF" stroke-width="2" - stroke-linecap="round" + strokeLinecap="round" stroke-linejoin="round" /> diff --git a/src/assets/icons/ShareNetwork.svg b/src/assets/icons/ShareNetwork.svg index 8deb9790..d19f6bab 100644 --- a/src/assets/icons/ShareNetwork.svg +++ b/src/assets/icons/ShareNetwork.svg @@ -1,8 +1,8 @@ - - - - - + + + + + diff --git a/src/assets/icons/TrashIcon.tsx b/src/assets/icons/TrashIcon.tsx index fd7dac1a..1e1ec024 100644 --- a/src/assets/icons/TrashIcon.tsx +++ b/src/assets/icons/TrashIcon.tsx @@ -12,35 +12,35 @@ export default function TrashIcon() { d="M23.25 9.0625H6.75" stroke="white" strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/listChecks.svg b/src/assets/icons/listChecks.svg index b610e6e4..506f040f 100644 --- a/src/assets/icons/listChecks.svg +++ b/src/assets/icons/listChecks.svg @@ -1,9 +1,9 @@ - - - - - - + + + + + + diff --git a/src/assets/icons/messagIcon.tsx b/src/assets/icons/messagIcon.tsx index cc81bb4b..748c8b7d 100644 --- a/src/assets/icons/messagIcon.tsx +++ b/src/assets/icons/messagIcon.tsx @@ -11,7 +11,7 @@ export default function MessageIcon() { d="M10.3125 20.4305L7.22812 23.018C7.11886 23.1084 6.9862 23.166 6.84553 23.184C6.70486 23.2021 6.56195 23.1799 6.43338 23.1201C6.30481 23.0602 6.19585 22.9651 6.11914 22.8458C6.04244 22.7265 6.00112 22.5879 6 22.4461V7.55859C6 7.35968 6.07902 7.16892 6.21967 7.02826C6.36032 6.88761 6.55109 6.80859 6.75 6.80859H23.25C23.4489 6.80859 23.6397 6.88761 23.7803 7.02826C23.921 7.16892 24 7.35968 24 7.55859V19.5586C24 19.7575 23.921 19.9483 23.7803 20.0889C23.6397 20.2296 23.4489 20.3086 23.25 20.3086H10.6594L10.3125 20.4305Z" stroke="#9A9AAF" strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> - - + + diff --git a/src/assets/icons/qrIcon.tsx b/src/assets/icons/qrIcon.tsx index 01c651c2..a187f2d7 100644 --- a/src/assets/icons/qrIcon.tsx +++ b/src/assets/icons/qrIcon.tsx @@ -24,49 +24,49 @@ export default function QRIcon() { d="M9.75 4.5H5.25C4.83579 4.5 4.5 4.83579 4.5 5.25V9.75C4.5 10.1642 4.83579 10.5 5.25 10.5H9.75C10.1642 10.5 10.5 10.1642 10.5 9.75V5.25C10.5 4.83579 10.1642 4.5 9.75 4.5Z" stroke="#4D4D4D" strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/questionsPage/FlagIcon.tsx b/src/assets/icons/questionsPage/FlagIcon.tsx index 2fdb1e3b..b758566d 100644 --- a/src/assets/icons/questionsPage/FlagIcon.tsx +++ b/src/assets/icons/questionsPage/FlagIcon.tsx @@ -26,7 +26,7 @@ export default function FlagIcon({ color }: Props) { d="M5 27V6" stroke={color} strokeWidth="2" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/questionsPage/FormatIcon1.tsx b/src/assets/icons/questionsPage/FormatIcon1.tsx index fac738e2..9eaf3961 100644 --- a/src/assets/icons/questionsPage/FormatIcon1.tsx +++ b/src/assets/icons/questionsPage/FormatIcon1.tsx @@ -30,21 +30,21 @@ export default function FormatIcon1({ color }: Props) { d="M34.418 35L34.418 5" stroke={color} strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> @@ -52,14 +52,14 @@ export default function FormatIcon1({ color }: Props) { d="M17 36V26.8678C17 26.3885 16.7948 26 16.5417 26H6.45833C6.2052 26 6 26.3885 6 26.8678V36" stroke={color} strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> @@ -67,7 +67,7 @@ export default function FormatIcon1({ color }: Props) { d="M31.0243 35.8867V26.9311C31.0243 26.4611 30.8222 26.0801 30.5729 26.0801H20.6428C20.3935 26.0801 20.1914 26.4611 20.1914 26.9311L20.1914 35.8867" stroke={color} strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/questionsPage/FormatIcon2.tsx b/src/assets/icons/questionsPage/FormatIcon2.tsx index 17e54937..5ea18a13 100644 --- a/src/assets/icons/questionsPage/FormatIcon2.tsx +++ b/src/assets/icons/questionsPage/FormatIcon2.tsx @@ -30,14 +30,14 @@ export default function FormatIcon2({ color }: Props) { d="M33.9994 16.1953L35.8848 19.0233L33.9994 21.8514" stroke={color} strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> @@ -50,7 +50,7 @@ export default function FormatIcon2({ color }: Props) { rx="1" stroke={color} strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/questionsPage/ProportionsIcon11.tsx b/src/assets/icons/questionsPage/ProportionsIcon11.tsx index f4acc5d4..f4dbb5a0 100644 --- a/src/assets/icons/questionsPage/ProportionsIcon11.tsx +++ b/src/assets/icons/questionsPage/ProportionsIcon11.tsx @@ -35,7 +35,7 @@ export default function ProportionsIcon11({ color }: Props) { rx="1" stroke={color} strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/questionsPage/ProportionsIcon12.tsx b/src/assets/icons/questionsPage/ProportionsIcon12.tsx index 296c22da..694210f8 100644 --- a/src/assets/icons/questionsPage/ProportionsIcon12.tsx +++ b/src/assets/icons/questionsPage/ProportionsIcon12.tsx @@ -36,7 +36,7 @@ export default function ProportionsIcon12({ color }: Props) { transform="rotate(-90 5 29)" stroke={color} strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/questionsPage/ProportionsIcon21.tsx b/src/assets/icons/questionsPage/ProportionsIcon21.tsx index bf1c1910..7e15d3ca 100644 --- a/src/assets/icons/questionsPage/ProportionsIcon21.tsx +++ b/src/assets/icons/questionsPage/ProportionsIcon21.tsx @@ -35,7 +35,7 @@ export default function ProportionsIcon21({ color }: Props) { rx="1" stroke={color} strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/questionsPage/StarIconMini.tsx b/src/assets/icons/questionsPage/StarIconMini.tsx index f4c1ebcb..b90c1e18 100644 --- a/src/assets/icons/questionsPage/StarIconMini.tsx +++ b/src/assets/icons/questionsPage/StarIconMini.tsx @@ -27,7 +27,7 @@ export default function StarIconMini({ color }: Props) { fill={color} stroke={color} strokeWidth="1.6" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/questionsPage/addEmoji.tsx b/src/assets/icons/questionsPage/addEmoji.tsx index bd203b97..40914338 100644 --- a/src/assets/icons/questionsPage/addEmoji.tsx +++ b/src/assets/icons/questionsPage/addEmoji.tsx @@ -38,7 +38,7 @@ export default function AddEmoji() { d="M20 31C21.0949 30.9993 22.1837 30.8371 23.2313 30.5187L31 20C31 17.8244 30.3549 15.6977 29.1462 13.8887C27.9375 12.0798 26.2195 10.6699 24.2095 9.83733C22.1995 9.00477 19.9878 8.78693 17.854 9.21137C15.7202 9.6358 13.7602 10.6835 12.2218 12.2218C10.6835 13.7602 9.6358 15.7202 9.21137 17.854C8.78693 19.9878 9.00477 22.1995 9.83733 24.2095C10.6699 26.2195 12.0798 27.9375 13.8887 29.1462C15.6977 30.3549 17.8244 31 20 31Z" stroke="#7E2AEA" strokeWidth="2" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/questionsPage/addImage.tsx b/src/assets/icons/questionsPage/addImage.tsx index 630cb87e..2a276db8 100644 --- a/src/assets/icons/questionsPage/addImage.tsx +++ b/src/assets/icons/questionsPage/addImage.tsx @@ -18,12 +18,21 @@ const AddImage: FC = ({ onClick }) => { cursor: "pointer", }} > - + - + = ({ onClick }) => { d="M30.9583 10H8.04167C7.46637 10 7 10.4477 7 11V29C7 29.5523 7.46637 30 8.04167 30H30.9583C31.5336 30 32 29.5523 32 29V11C32 10.4477 31.5336 10 30.9583 10Z" stroke="#7E2AEA" stroke-width="2" - stroke-linecap="round" + strokeLinecap="round" stroke-linejoin="round" /> diff --git a/src/assets/icons/questionsPage/branching.tsx b/src/assets/icons/questionsPage/branching.tsx index 2674397c..962bb99f 100755 --- a/src/assets/icons/questionsPage/branching.tsx +++ b/src/assets/icons/questionsPage/branching.tsx @@ -25,31 +25,31 @@ export default function Branching({ color }: Props) { diff --git a/src/assets/icons/questionsPage/clue.tsx b/src/assets/icons/questionsPage/clue.tsx index 4b37f6ba..67e288e5 100755 --- a/src/assets/icons/questionsPage/clue.tsx +++ b/src/assets/icons/questionsPage/clue.tsx @@ -25,19 +25,19 @@ export default function Clue({ color }: Props) { diff --git a/src/assets/icons/questionsPage/enterIcon.tsx b/src/assets/icons/questionsPage/enterIcon.tsx index 18656f0b..329d8894 100755 --- a/src/assets/icons/questionsPage/enterIcon.tsx +++ b/src/assets/icons/questionsPage/enterIcon.tsx @@ -26,21 +26,21 @@ export default function EnterIcon() { d="M16.5 9.75V12.75H7.5" stroke="#7E2AEA" strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/questionsPage/hashtagIcon.tsx b/src/assets/icons/questionsPage/hashtagIcon.tsx index d2e76eea..bdae05a0 100644 --- a/src/assets/icons/questionsPage/hashtagIcon.tsx +++ b/src/assets/icons/questionsPage/hashtagIcon.tsx @@ -26,7 +26,7 @@ export default function HashtagIcon({ color }: Props) { d="M3 11.3333H29M3 20.6667H29M13.6364 2L8.90909 30M23.0909 2L18.3636 30" stroke={color} strokeWidth="3" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/questionsPage/heartIcon.tsx b/src/assets/icons/questionsPage/heartIcon.tsx index 46a27e99..4674358f 100644 --- a/src/assets/icons/questionsPage/heartIcon.tsx +++ b/src/assets/icons/questionsPage/heartIcon.tsx @@ -27,7 +27,7 @@ export default function HeartIcon({ color }: Props) { fill={color} stroke={color} strokeWidth="1.6" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/questionsPage/imgIcon.tsx b/src/assets/icons/questionsPage/imgIcon.tsx index 0154f8d3..4f30a74f 100755 --- a/src/assets/icons/questionsPage/imgIcon.tsx +++ b/src/assets/icons/questionsPage/imgIcon.tsx @@ -25,13 +25,13 @@ export default function ImgIcon({ color }: Props) { diff --git a/src/assets/icons/questionsPage/settingIcon.tsx b/src/assets/icons/questionsPage/settingIcon.tsx index 03223028..eea62b4e 100755 --- a/src/assets/icons/questionsPage/settingIcon.tsx +++ b/src/assets/icons/questionsPage/settingIcon.tsx @@ -25,7 +25,7 @@ export default function SettingIcon({ color }: Props) { diff --git a/src/assets/icons/questionsPage/tropfyIcon.tsx b/src/assets/icons/questionsPage/tropfyIcon.tsx index 9fcfd6bc..8f0ae036 100644 --- a/src/assets/icons/questionsPage/tropfyIcon.tsx +++ b/src/assets/icons/questionsPage/tropfyIcon.tsx @@ -27,35 +27,35 @@ export default function TropfyIcon({ color }: Props) { fill={color} stroke={color} strokeWidth="1.6" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/telegramIcon.tsx b/src/assets/icons/telegramIcon.tsx index 20956fcf..8e95f7a7 100644 --- a/src/assets/icons/telegramIcon.tsx +++ b/src/assets/icons/telegramIcon.tsx @@ -24,21 +24,21 @@ export default function TelegramIcon() { d="M8.24863 12.6484L16.6768 20.064C16.7742 20.1502 16.8923 20.2096 17.0196 20.2364C17.1469 20.2631 17.279 20.2563 17.4029 20.2166C17.5268 20.1769 17.6382 20.1057 17.7262 20.0099C17.8142 19.9141 17.8758 19.797 17.9049 19.6702L21.4299 4.27649C21.4594 4.14392 21.4524 4.00581 21.4096 3.87691C21.3668 3.748 21.2898 3.63314 21.1868 3.54459C21.0838 3.45604 20.9587 3.39711 20.8249 3.37411C20.691 3.35111 20.5534 3.3649 20.4268 3.41399L3.12051 10.2109C2.42676 10.4827 2.52051 11.4952 3.25176 11.6452L8.24863 12.6484Z" stroke="#4D4D4D" strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/assets/icons/tiktokIcon.tsx b/src/assets/icons/tiktokIcon.tsx index 37609745..12692e6c 100644 --- a/src/assets/icons/tiktokIcon.tsx +++ b/src/assets/icons/tiktokIcon.tsx @@ -24,7 +24,7 @@ export default function TiktokIcon() { d="M15.75 9.9375C17.28 11.0361 19.1164 11.6263 21 11.625V7.875C19.6076 7.875 18.2723 7.32188 17.2877 6.33731C16.3031 5.35274 15.75 4.01739 15.75 2.625H12V14.625C12 15.0948 11.8739 15.5559 11.6349 15.9603C11.3959 16.3647 11.0528 16.6976 10.6413 16.9242C10.2298 17.1508 9.76502 17.2629 9.29548 17.2486C8.82594 17.2344 8.36882 17.0944 7.97181 16.8433C7.5748 16.5922 7.25245 16.2392 7.03838 15.821C6.82432 15.4029 6.72639 14.9349 6.75481 14.466C6.78323 13.9971 6.93695 13.5445 7.19995 13.1552C7.46294 12.766 7.82557 12.4544 8.25 12.2531V8.35312C7.05617 8.56716 5.94816 9.11732 5.05605 9.93901C4.16394 10.7607 3.52474 11.8198 3.21349 12.9921C2.90224 14.1643 2.93185 15.4011 3.29885 16.5571C3.66585 17.7131 4.355 18.7404 5.28541 19.5185C6.21583 20.2965 7.34889 20.793 8.5516 20.9497C9.7543 21.1063 10.9767 20.9166 12.0754 20.4029C13.1741 19.8891 14.1034 19.0726 14.7543 18.0492C15.4052 17.0257 15.7506 15.8379 15.75 14.625V9.9375Z" stroke="#4D4D4D" strokeWidth="1.5" - stroke-linecap="round" + strokeLinecap="round" strokeLinejoin="round" /> diff --git a/src/pages/Questions/DraggableList/QuestionPageCard.tsx b/src/pages/Questions/DraggableList/QuestionPageCard.tsx index fe033bd0..1bc09693 100644 --- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx @@ -1,4 +1,3 @@ -import { useState } from "react"; import { Box, Checkbox, @@ -136,8 +135,7 @@ export default function QuestionsPageCard({ }: Props) { const theme = useTheme(); const { listQuestions } = questionStore(); - const [isExpanded, setIsExpanded] = useState(false); - const switchState = listQuestions[totalIndex].type; + const { type: switchState, expanded: isExpanded } = listQuestions[totalIndex]; return ( - setIsExpanded((prev) => !prev)}> + + updateQuestionsList(totalIndex, { expanded: !isExpanded }) + } + > {isExpanded ? : } {isExpanded ? ( diff --git a/src/pages/Questions/SwitchQuestionsPage.tsx b/src/pages/Questions/SwitchQuestionsPage.tsx index f66fa236..ed695187 100644 --- a/src/pages/Questions/SwitchQuestionsPage.tsx +++ b/src/pages/Questions/SwitchQuestionsPage.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import * as React from "react"; import AnswerOptions from "./answerOptions/AnswerOptions"; import OptionsPicture from "./OptionsPicture/OptionsPicture"; @@ -11,52 +11,52 @@ import RatingOptions from "./RatingOptions/RatingOptions"; import Emoji from "./Emoji/Emoji"; import DropDown from "./DropDown/DropDown"; import UploadFile from "./UploadFile/UploadFile"; -import {useParams} from "react-router-dom"; -import {questionStore} from "@root/questions"; +import { useParams } from "react-router-dom"; +import { questionStore } from "@root/questions"; interface Props { - totalIndex: number, + totalIndex: number; } -export default function SwitchQuestionsPage ({totalIndex }: Props) { - const params = Number(useParams().quizId); - const {listQuestions} = questionStore() - const switchState = listQuestions[totalIndex].type - switch (switchState) { - case 'variant': - return (); +export default function SwitchQuestionsPage({ totalIndex }: Props) { + const params = Number(useParams().quizId); + const { listQuestions } = questionStore(); + const switchState = listQuestions[totalIndex].type; + switch (switchState) { + case "variant": + return ; - case 'images': - return (); + case "images": + return ; - case 'varimg': - return (); + case "varimg": + return ; - case 'emoji': - return (); + case "emoji": + return ; - case 'text': - return (); + case "text": + return ; - case 'select': - return (); + case "select": + return ; - case 'date': - return (); + case "date": + return ; - case 'number': - return (); + case "number": + return ; - case 'file': - return (); + case "file": + return ; - case 'page': - return (); + case "page": + return ; - case 'rating': - return (); + case "rating": + return ; - default: - return (<>) - } -} \ No newline at end of file + default: + return <>; + } +} diff --git a/src/pages/Questions/answerOptions/AnswerDraggableList/AnswerItem.tsx b/src/pages/Questions/answerOptions/AnswerDraggableList/AnswerItem.tsx new file mode 100644 index 00000000..c8f45b0d --- /dev/null +++ b/src/pages/Questions/answerOptions/AnswerDraggableList/AnswerItem.tsx @@ -0,0 +1,162 @@ +import { useState } from "react"; +import { Draggable } from "react-beautiful-dnd"; +import { + Box, + TextField, + FormControl, + InputAdornment, + IconButton, + useTheme, +} from "@mui/material"; + +import { questionStore, updateQuestionsList } from "@root/questions"; + +import PointsIcon from "@icons/questionsPage/PointsIcon"; +import DeleteIcon from "@icons/questionsPage/deleteIcon"; +import MessageIcon from "@icons/messagIcon"; +import Popover from "@mui/material/Popover"; +import TextareaAutosize from "@mui/base/TextareaAutosize"; + +import type { ChangeEvent, KeyboardEvent } from "react"; +import type { Variants } from "@root/questions"; + +type AnswerItemProps = { + index: number; + totalIndex: number; + variants: Variants[]; + variant: Variants; +}; + +export const AnswerItem = ({ + index, + totalIndex, + variants, + variant, +}: AnswerItemProps) => { + const { listQuestions } = questionStore(); + const theme = useTheme(); + + const [isOpen, setIsOpen] = useState(false); + const [anchorEl, setAnchorEl] = useState(null); + + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + setIsOpen(true); + }; + + const handleClose = () => { + setIsOpen(false); + }; + + const onChangeText = (event: ChangeEvent) => { + const answerNew = variants.slice(); + answerNew[index].answer = event.target.value; + + updateQuestionsList(totalIndex, { + content: { ...listQuestions[totalIndex].content, variants: answerNew }, + }); + }; + + const addNewAnswer = () => { + const answerNew = variants.slice(); + answerNew.push({ answer: "", answerLong: "", hints: "" }); + + updateQuestionsList(totalIndex, { + content: { ...listQuestions[totalIndex].content, variants: answerNew }, + }); + }; + + const deleteAnswer = () => { + const answerNew = variants.slice(); + answerNew.splice(index, 1); + + updateQuestionsList(totalIndex, { + content: { ...listQuestions[totalIndex].content, variants: answerNew }, + }); + }; + + const changeAnswerHint = (event: ChangeEvent) => { + const answerNew = variants.slice(); + answerNew[index].hints = event.target.value; + + updateQuestionsList(totalIndex, { + content: { ...listQuestions[totalIndex].content, variants: answerNew }, + }); + }; + + return ( + + {(provided) => ( + + + ) => + event.code === "Enter" && addNewAnswer() + } + InputProps={{ + startAdornment: ( + + + + ), + endAdornment: ( + + + + + + + ) => event.stopPropagation()} + /> + + + + + + ), + }} + sx={{ + "& .MuiInputBase-root": { + height: "48px", + borderRadius: "10px", + background: "#ffffff", + }, + }} + inputProps={{ + sx: { fontSize: "18px", lineHeight: "21px", py: 0 }, + }} + /> + + + )} + + ); +}; diff --git a/src/pages/Questions/answerOptions/AnswerDraggableList/StrictModeDroppable.tsx b/src/pages/Questions/answerOptions/AnswerDraggableList/StrictModeDroppable.tsx new file mode 100644 index 00000000..6441c17e --- /dev/null +++ b/src/pages/Questions/answerOptions/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/answerOptions/AnswerDraggableList/helper.ts new file mode 100644 index 00000000..203ee13b --- /dev/null +++ b/src/pages/Questions/answerOptions/AnswerDraggableList/helper.ts @@ -0,0 +1,11 @@ +export const reorder = ( + list: T[], + startIndex: number, + endIndex: number +): T[] => { + const result = Array.from(list); + const [removed] = result.splice(startIndex, 1); + result.splice(endIndex, 0, removed); + + return result; +}; diff --git a/src/pages/Questions/answerOptions/AnswerDraggableList/index.tsx b/src/pages/Questions/answerOptions/AnswerDraggableList/index.tsx new file mode 100644 index 00000000..c62df4be --- /dev/null +++ b/src/pages/Questions/answerOptions/AnswerDraggableList/index.tsx @@ -0,0 +1,51 @@ +import { Box } from "@mui/material"; +import { DragDropContext } from "react-beautiful-dnd"; + +import { StrictModeDroppable } from "./StrictModeDroppable"; +import { AnswerItem } from "./AnswerItem"; + +import { updateVariants } from "@root/questions"; + +import { reorder } from "./helper"; + +import type { DropResult } from "react-beautiful-dnd"; +import type { Variants } from "@root/questions"; + +type AnswerDraggableListProps = { + variants: Variants[]; + totalIndex: number; +}; + +export const AnswerDraggableList = ({ + variants, + totalIndex, +}: AnswerDraggableListProps) => { + const onDragEnd = ({ destination, source }: DropResult) => { + if (destination) { + const newItems = reorder(variants, source.index, destination.index); + + updateVariants(totalIndex, newItems); + } + }; + + return ( + + + {(provided) => ( + + {variants.map((variant, index) => ( + + ))} + {provided.placeholder} + + )} + + + ); +}; diff --git a/src/pages/Questions/answerOptions/AnswerOptions.tsx b/src/pages/Questions/answerOptions/AnswerOptions.tsx index fbe09ccb..a0c82379 100755 --- a/src/pages/Questions/answerOptions/AnswerOptions.tsx +++ b/src/pages/Questions/answerOptions/AnswerOptions.tsx @@ -1,25 +1,10 @@ -import { - Box, - Typography, - Link, - useTheme, - TextField, - FormControl, - InputAdornment, - IconButton, -} from "@mui/material"; -import React, { useState } from "react"; +import { useState } from "react"; +import { Box, Typography, Link, useTheme } from "@mui/material"; import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import SwitchAnswerOptions from "./switchAnswerOptions"; +import { AnswerDraggableList } from "./AnswerDraggableList"; import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict"; -import QuestionsPageCard from "../DraggableList/QuestionPageCard"; -import { useParams } from "react-router-dom"; -import { Variants, questionStore, updateQuestionsList } from "@root/questions"; -import PointsIcon from "@icons/questionsPage/PointsIcon"; -import DeleteIcon from "@icons/questionsPage/deleteIcon"; -import MessageIcon from "@icons/messagIcon"; -import Popover from "@mui/material/Popover"; -import TextareaAutosize from "@mui/base/TextareaAutosize"; +import { questionStore, updateQuestionsList } from "@root/questions"; // Импортируем интерфейс Varian @@ -28,35 +13,28 @@ interface Props { } export default function AnswerOptions({ totalIndex }: Props) { + const [switchState, setSwitchState] = useState("setting"); const { listQuestions } = questionStore(); - const Answer = listQuestions[totalIndex].content.variants; - console.log(Answer); + const variants = listQuestions[totalIndex].content.variants; const theme = useTheme(); - const [switchState, setSwitchState] = React.useState("setting"); + const SSHC = (data: string) => { setSwitchState(data); }; - const [isOpen, setIsOpen] = React.useState(false); - const [anchorEl, setAnchorEl] = React.useState( - null - ); + const addNewAnswer = () => { + const answerNew = variants.slice(); // Create a shallow copy of the array + answerNew.push({ answer: "", answerLong: "", hints: "" }); - const handleClick = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - setIsOpen(true); + updateQuestionsList(totalIndex, { + content: { ...listQuestions[totalIndex].content, variants: answerNew }, + }); }; - const handleClose = () => { - setIsOpen(false); - }; - - const id = "my-popover-id"; - return ( <> - {Answer.length === 0 ? ( + {variants.length === 0 ? ( ) : ( - - {Answer.map((variant: Variants, index: number) => ( - - { - const answerNew = Answer.slice(); // Create a shallow copy of the array - answerNew[index].answer = e.target.value; - let clonContent = listQuestions[totalIndex].content; - clonContent.variants = answerNew; - updateQuestionsList(totalIndex, { content: clonContent }); - }} - InputProps={{ - startAdornment: ( - - - - ), - endAdornment: ( - - - - - - { - const answerNew = Answer.slice(); // Create a shallow copy of the array - answerNew[index].hints = e.target.value; - let clonContent = - listQuestions[totalIndex].content; - clonContent.variants = answerNew; - updateQuestionsList(totalIndex, { - content: clonContent, - }); - }} - /> - - { - const answerNew = Answer.slice(); // Create a shallow copy of the array - answerNew.splice(index, 1); - let clonContent = listQuestions[totalIndex].content; - clonContent.variants = answerNew; - updateQuestionsList(totalIndex, { - content: clonContent, - }); - }} - > - - - - ), - }} - sx={{ - "& .MuiInputBase-root": { - height: "48px", - borderRadius: "10px", - }, - }} - inputProps={{ - sx: { - borderRadius: "10px", - fontSize: "18px", - lineHeight: "21px", - py: 0, - }, - }} - /> - - ))} - + )} { - const answerNew = Answer.slice(); // Create a shallow copy of the array - answerNew.push({ - answer: "", - answerLong: "", - hints: "", - }); - let clonContent = listQuestions[totalIndex].content; - clonContent.variants = answerNew; - updateQuestionsList(totalIndex, { content: clonContent }); - }} + onClick={addNewAnswer} > Добавьте ответ diff --git a/src/stores/questions.ts b/src/stores/questions.ts index ba990860..810bf0b0 100644 --- a/src/stores/questions.ts +++ b/src/stores/questions.ts @@ -58,6 +58,14 @@ export const updateQuestionsListDragAndDrop = ( questionStore.setState({ listQuestions: updatedQuestions }); }; +export const updateVariants = (index: number, variants: Variants[]) => { + const listQuestions = [...questionStore.getState()["listQuestions"]]; + + listQuestions[index].content.variants = variants; + + questionStore.setState({ listQuestions }); +}; + export const createQuestion = (id: number) => { const idQ = getRandom(1000000, 10000000); const newData = [...questionStore.getState()["listQuestions"]]; //пересоздание массива