From 547c956e9d14ae13e7d185567d6bc3c774266d41 Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Wed, 20 Sep 2023 20:39:17 +0300 Subject: [PATCH 01/16] fix style Card Squiz --- src/assets/icons/BackArrowIcon.tsx | 44 +-- src/assets/icons/Burger.tsx | 9 + src/assets/icons/ChartPieIcon.tsx | 58 ++-- src/assets/icons/EmojiIocns.tsx | 28 ++ src/assets/icons/ImageAddIcons.tsx | 24 ++ src/assets/icons/PenaLogoIcon.tsx | 49 ++++ .../icons/questionsPage/DoubleArrowRight.tsx | 20 ++ src/assets/icons/questionsPage/DoubleTick.tsx | 13 + .../icons/questionsPage/VectorQuestions.tsx | 20 ++ src/assets/icons/questionsPage/addImage.tsx | 1 + src/pages/Questions/ButtonsOptions.tsx | 46 ++- src/pages/Questions/ButtonsOptionsAndPict.tsx | 41 ++- .../Questions/DataOptions/settingData.tsx | 14 +- .../DraggableList/QuestionPageCard.tsx | 6 +- src/pages/Questions/Emoji/Emoji.tsx | 99 ++++++- src/pages/Questions/Emoji/settingEmoji.tsx | 9 +- .../OptionsAndPicture/OptionsAndPicture.tsx | 95 ++++++- .../SettingOptionsAndPict.tsx | 8 +- .../OptionsPicture/OptionsPicture.tsx | 121 +++++++- .../OptionsPicture/settingOpytionsPict.tsx | 13 +- .../OwnTextField/settingTextField.tsx | 9 +- .../PageOptions/SettingPageOptions.tsx | 14 +- .../Questions/RatingOptions/RatingOptions.tsx | 2 +- .../Questions/RatingOptions/settingRating.tsx | 8 +- .../Questions/SliderOptions/SliderOptions.tsx | 13 +- .../Questions/SliderOptions/settingSlider.tsx | 11 +- .../Questions/UploadFile/settingUpload.tsx | 13 +- .../answerOptions/responseSettings.tsx | 12 +- src/pages/startPage/Sidebar/SidebarMobile.tsx | 137 +++++++++ .../startPage/Sidebar/icons/ArrowDown.tsx | 13 + .../startPage/Sidebar/icons/ChartLineUp.tsx | 15 + src/pages/startPage/Sidebar/icons/Pencil.tsx | 16 ++ src/pages/startPage/Sidebar/icons/People.tsx | 10 + .../startPage/Sidebar/icons/Question.tsx | 14 + .../startPage/Sidebar/icons/ReturnTime.tsx | 13 + .../startPage/Sidebar/icons/Settings.tsx | 24 ++ src/pages/startPage/StartPage.tsx | 34 ++- .../ReallyChangingModal.tsx | 48 ++++ src/ui_kit/Sidebar.tsx | 262 +++++++++--------- 39 files changed, 1124 insertions(+), 262 deletions(-) create mode 100644 src/assets/icons/Burger.tsx create mode 100644 src/assets/icons/EmojiIocns.tsx create mode 100644 src/assets/icons/ImageAddIcons.tsx create mode 100644 src/assets/icons/PenaLogoIcon.tsx create mode 100644 src/assets/icons/questionsPage/DoubleArrowRight.tsx create mode 100644 src/assets/icons/questionsPage/DoubleTick.tsx create mode 100644 src/assets/icons/questionsPage/VectorQuestions.tsx create mode 100644 src/pages/startPage/Sidebar/SidebarMobile.tsx create mode 100644 src/pages/startPage/Sidebar/icons/ArrowDown.tsx create mode 100644 src/pages/startPage/Sidebar/icons/ChartLineUp.tsx create mode 100644 src/pages/startPage/Sidebar/icons/Pencil.tsx create mode 100644 src/pages/startPage/Sidebar/icons/People.tsx create mode 100644 src/pages/startPage/Sidebar/icons/Question.tsx create mode 100644 src/pages/startPage/Sidebar/icons/ReturnTime.tsx create mode 100644 src/pages/startPage/Sidebar/icons/Settings.tsx create mode 100644 src/ui_kit/Modal/ReallyChangingModal/ReallyChangingModal.tsx diff --git a/src/assets/icons/BackArrowIcon.tsx b/src/assets/icons/BackArrowIcon.tsx index 9bfcba4f..cbfef395 100755 --- a/src/assets/icons/BackArrowIcon.tsx +++ b/src/assets/icons/BackArrowIcon.tsx @@ -1,22 +1,26 @@ import { Box } from "@mui/material"; - -export default function BackArrowIcon() { - - return ( - - - - - - - ); -} \ No newline at end of file +export default function BackArrowIcon({ color = "black" }: { color?: string }) { + return ( + + + + + + + ); +} diff --git a/src/assets/icons/Burger.tsx b/src/assets/icons/Burger.tsx new file mode 100644 index 00000000..eb247987 --- /dev/null +++ b/src/assets/icons/Burger.tsx @@ -0,0 +1,9 @@ +import { FC, SVGProps } from "react"; + +export const Burger: FC> = (props) => ( + + + + + +); diff --git a/src/assets/icons/ChartPieIcon.tsx b/src/assets/icons/ChartPieIcon.tsx index f9dd4254..6671f740 100755 --- a/src/assets/icons/ChartPieIcon.tsx +++ b/src/assets/icons/ChartPieIcon.tsx @@ -1,30 +1,40 @@ import { Box } from "@mui/material"; - interface Props { - height: string; - width: string; - color: string; + height: string; + width: string; + color: string; } export default function ChartPieIcon({ height, width, color }: Props) { - - return ( - - - - - - - - ); -} \ No newline at end of file + return ( + + + + + + + + ); +} diff --git a/src/assets/icons/EmojiIocns.tsx b/src/assets/icons/EmojiIocns.tsx new file mode 100644 index 00000000..ba654c61 --- /dev/null +++ b/src/assets/icons/EmojiIocns.tsx @@ -0,0 +1,28 @@ +import { FC, SVGProps } from "react"; + +export const EmojiIcons: FC> = (props) => ( + + + + + + +); diff --git a/src/assets/icons/ImageAddIcons.tsx b/src/assets/icons/ImageAddIcons.tsx new file mode 100644 index 00000000..b1664427 --- /dev/null +++ b/src/assets/icons/ImageAddIcons.tsx @@ -0,0 +1,24 @@ +import { FC, SVGProps } from "react"; + +export const ImageAddIcons: FC> = (props) => ( + + + + + +); diff --git a/src/assets/icons/PenaLogoIcon.tsx b/src/assets/icons/PenaLogoIcon.tsx new file mode 100644 index 00000000..0641f00f --- /dev/null +++ b/src/assets/icons/PenaLogoIcon.tsx @@ -0,0 +1,49 @@ +import { FC, SVGProps } from "react"; + +export const PenaLogoIcon: FC> = (props) => ( + + + + + + + + + + + + + + + + + + + +); diff --git a/src/assets/icons/questionsPage/DoubleArrowRight.tsx b/src/assets/icons/questionsPage/DoubleArrowRight.tsx new file mode 100644 index 00000000..a7b73064 --- /dev/null +++ b/src/assets/icons/questionsPage/DoubleArrowRight.tsx @@ -0,0 +1,20 @@ +import { FC, SVGProps } from "react"; + +export const DoubleArrowRight: FC> = (props) => ( + + + + +); diff --git a/src/assets/icons/questionsPage/DoubleTick.tsx b/src/assets/icons/questionsPage/DoubleTick.tsx new file mode 100644 index 00000000..cac66c3e --- /dev/null +++ b/src/assets/icons/questionsPage/DoubleTick.tsx @@ -0,0 +1,13 @@ +import { FC, SVGProps } from "react"; + +export const DoubleTick: FC> = (props) => ( + + + +); diff --git a/src/assets/icons/questionsPage/VectorQuestions.tsx b/src/assets/icons/questionsPage/VectorQuestions.tsx new file mode 100644 index 00000000..98a28492 --- /dev/null +++ b/src/assets/icons/questionsPage/VectorQuestions.tsx @@ -0,0 +1,20 @@ +import { FC, SVGProps } from "react"; + +export const VectorQuestions: FC> = (props) => ( + + + + +); diff --git a/src/assets/icons/questionsPage/addImage.tsx b/src/assets/icons/questionsPage/addImage.tsx index 25285ee7..3842072d 100644 --- a/src/assets/icons/questionsPage/addImage.tsx +++ b/src/assets/icons/questionsPage/addImage.tsx @@ -17,6 +17,7 @@ const AddImage: FC = ({ onClick, sx }) => { alignItems: "center", justifyContent: "center", cursor: "pointer", + ...sx, }} > diff --git a/src/pages/Questions/ButtonsOptions.tsx b/src/pages/Questions/ButtonsOptions.tsx index 0f8f19cd..d5a203fb 100644 --- a/src/pages/Questions/ButtonsOptions.tsx +++ b/src/pages/Questions/ButtonsOptions.tsx @@ -1,6 +1,6 @@ import MiniButtonSetting from "@ui_kit/MiniButtonSetting"; import { useParams } from "react-router-dom"; -import React from "react"; +import React, { useState } from "react"; import SettingIcon from "../../assets/icons/questionsPage/settingIcon"; import Clue from "../../assets/icons/questionsPage/clue"; import Branching from "../../assets/icons/questionsPage/branching"; @@ -9,6 +9,9 @@ import HideIcon from "../../assets/icons/questionsPage/hideIcon"; import CopyIcon from "../../assets/icons/questionsPage/CopyIcon"; import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon"; import { questionStore, resetSomeField, copyQuestion, removeQuestion } from "@root/questions"; +import { DoubleTick } from "@icons/questionsPage/DoubleTick"; +import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight"; +import { VectorQuestions } from "@icons/questionsPage/VectorQuestions"; interface Props { switchState: string; @@ -23,9 +26,12 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) resetSomeField({ openedModalSettings: "open" }); console.log(openedModalSettings); }; + const [openedReallyChangingModal, setOpenedReallyChangingModal] = useState(false); + const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920)); const buttonSetting: { icon: JSX.Element; title: string; @@ -108,13 +114,13 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) sx={{ backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent", color: switchState === value ? "#ffffff" : theme.palette.grey3.main, - minWidth: isMobile ? "30px" : "64px", + minWidth: isWrappMiniButtonSetting ? "30px" : "64px", height: "30px", }} > {icon} - {isMobile ? null : title} + {isWrappMiniButtonSetting ? null : title} ) : ( @@ -127,16 +133,46 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) sx={{ backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent", color: switchState === value ? "#ffffff" : theme.palette.grey3.main, - minWidth: isMobile ? "30px" : "64px", + minWidth: isWrappMiniButtonSetting ? "30px" : "64px", height: "30px", }} > {icon} - {isMobile ? null : title} + {isWrappMiniButtonSetting ? null : title} )} ))} + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + (false); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(790)); - const isIconMobile = useMediaQuery(theme.breakpoints.down(930)); + const isIconMobile = useMediaQuery(theme.breakpoints.down(1050)); const openedModal = () => { resetSomeField({ openedModalSettings: "open" }); @@ -134,6 +139,36 @@ export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }: {isIconMobile ? null : "Изображение"} + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + setOpenedReallyChangingModal(true)} + sx={{ + minWidth: "30px", + height: "30px", + backgroundColor: "#FEDFD0", + }} + > + + + + setOpenedReallyChangingModal(false)} /> ); } diff --git a/src/pages/Questions/DataOptions/settingData.tsx b/src/pages/Questions/DataOptions/settingData.tsx index e53879ad..4eb4da84 100644 --- a/src/pages/Questions/DataOptions/settingData.tsx +++ b/src/pages/Questions/DataOptions/settingData.tsx @@ -14,12 +14,14 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) { const { listQuestions } = questionStore(); const theme = useTheme(); const isWrappColumn = useMediaQuery(theme.breakpoints.down(980)); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); return ( - + Настройки календаря { @@ -29,7 +31,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) { }} /> { @@ -43,11 +45,12 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) { sx={{ padding: isWrappColumn ? "0px 20px 20px 20px " : "20px 20px 20px 20px", minWidth: isWrappColumn ? null : "350px", - marginRight: "30px", + marginRight: isMobile ? "0px" : "30px", }} > Настройки вопросов { @@ -56,8 +59,9 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) { }); }} /> - + { @@ -70,7 +74,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) { updateQuestionsList(quizId, totalIndex, { content: clonContent }); }} - />{" "} + /> {listQuestions[quizId][totalIndex].content.innerNameCheck && ( diff --git a/src/pages/Questions/DraggableList/QuestionPageCard.tsx b/src/pages/Questions/DraggableList/QuestionPageCard.tsx index a5890b96..a4c6ecd7 100644 --- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx @@ -83,6 +83,8 @@ export default function QuestionsPageCard({ totalIndex, draggableProps, isDraggi const { listQuestions } = questionStore(); const { type: switchState, expanded: isExpanded } = listQuestions[quizId][totalIndex]; + console.log(draggableProps); + return ( <> - + updateQuestionsList(quizId, totalIndex, { expanded: !isExpanded })}> {isExpanded ? : } @@ -175,7 +177,7 @@ export default function QuestionsPageCard({ totalIndex, draggableProps, isDraggi { @@ -25,15 +42,79 @@ export default function Emoji({ totalIndex }: Props) { return ( <> - - + + + + + + {!isMobile && } + + ), + endAdornment: ( + + + + + + + + + + + + ), + }} + sx={{ + "& .MuiInputBase-root": { + padding: "13.5px", + borderRadius: "10px", + background: "#ffffff", + }, + "& .MuiOutlinedInput-notchedOutline": { + border: "none", + }, + }} + inputProps={{ + sx: { fontSize: "18px", lineHeight: "21px", py: 0 }, + }} + /> + + {isMobile && ( + + + + + + + - } - /> + )} + - + Настройки ответов { @@ -48,6 +49,7 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) { > Настройки вопросов { @@ -56,8 +58,9 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) { }); }} /> - + { @@ -70,7 +73,7 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) { updateQuestionsList(quizId, totalIndex, { content: clonContent }); }} - />{" "} + /> {listQuestions[quizId][totalIndex].content.innerNameCheck && ( diff --git a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx index 1185c955..f4d8a734 100644 --- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx +++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx @@ -1,4 +1,16 @@ -import { Box, Link, Typography, ButtonBase, useTheme, useMediaQuery } from "@mui/material"; +import { + Box, + Link, + Typography, + ButtonBase, + useTheme, + useMediaQuery, + InputAdornment, + IconButton, + Popover, + TextareaAutosize, + TextField, +} from "@mui/material"; import { useParams } from "react-router-dom"; import AddImage from "../../../assets/icons/questionsPage/addImage"; import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; @@ -6,6 +18,10 @@ import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict"; import SwitchOptionsAndPict from "./switchOptionsAndPict"; import React from "react"; import { questionStore, updateQuestionsList } from "@root/questions"; +import { ImageAddIcons } from "@icons/ImageAddIcons"; +import PointsIcon from "@icons/questionsPage/PointsIcon"; +import MessageIcon from "@icons/messagIcon"; +import DeleteIcon from "@icons/questionsPage/deleteIcon"; interface Props { totalIndex: number; @@ -16,6 +32,7 @@ export default function OptionsAndPicture({ totalIndex }: Props) { const { listQuestions } = questionStore(); const quizId = Number(useParams().quizId); const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isMobile = useMediaQuery(theme.breakpoints.down(790)); const SSHC = (data: string) => { @@ -31,7 +48,7 @@ export default function OptionsAndPicture({ totalIndex }: Props) { component="label" sx={{ cursor: "pointer", - display: "flex", + display: isTablet ? "none" : "flex", alignItems: "center", justifyContent: "flex-start", marginBottom: "15px", @@ -68,6 +85,80 @@ export default function OptionsAndPicture({ totalIndex }: Props) { ))} + + + + + + {!isMobile && } + + ), + endAdornment: ( + + + + + + + + + + + + ), + }} + sx={{ + "& .MuiInputBase-root": { + padding: "13.5px", + borderRadius: "10px", + background: "#ffffff", + }, + "& .MuiOutlinedInput-notchedOutline": { + border: "none", + }, + }} + inputProps={{ + sx: { fontSize: "18px", lineHeight: "21px", py: 0 }, + }} + /> + + {isMobile && ( + + + + + + + + + )} + - + Настройки ответов { @@ -43,7 +44,7 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP /> Текст-заглушка на картинке { @@ -64,6 +65,7 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP > Настройки вопросов { @@ -77,7 +79,7 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP /> { diff --git a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx index 3ae34c1a..8fbd1b70 100644 --- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx +++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx @@ -1,6 +1,18 @@ import { useState } from "react"; import { useParams } from "react-router-dom"; -import { Box, Link, Typography, Button, useTheme, useMediaQuery } from "@mui/material"; +import { + Box, + Link, + Typography, + Button, + useTheme, + useMediaQuery, + InputAdornment, + IconButton, + TextareaAutosize, + Popover, + TextField, +} from "@mui/material"; import ButtonsOptions from "../ButtonsOptions"; import { questionStore, updateQuestionsList } from "@root/questions"; @@ -10,6 +22,10 @@ import AddImage from "../../../assets/icons/questionsPage/addImage"; import SwitchAnswerOptionsPict from "./switchOptionsPict"; import type { ChangeEvent } from "react"; +import PointsIcon from "@icons/questionsPage/PointsIcon"; +import MessageIcon from "@icons/messagIcon"; +import DeleteIcon from "@icons/questionsPage/deleteIcon"; +import { ImageAddIcons } from "@icons/ImageAddIcons"; interface Props { totalIndex: number; @@ -37,25 +53,104 @@ export default function OptionsPicture({ totalIndex }: Props) { } }; + console.log(); + return ( <> - - + + + + Добавьте ответ + + + + - Добавьте ответ - + + + + + {!isMobile && } + + ), + endAdornment: ( + + + + + + + + + + + + ), + }} + sx={{ + "& .MuiInputBase-root": { + padding: "13.5px", + borderRadius: "10px", + background: "#ffffff", + }, + "& .MuiOutlinedInput-notchedOutline": { + border: "none", + }, + }} + inputProps={{ + sx: { fontSize: "18px", lineHeight: "21px", py: 0 }, + }} + /> + + {isMobile && ( + + + + + + + + + )} + diff --git a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx index 7678ca3d..0abfff18 100644 --- a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx +++ b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx @@ -84,10 +84,10 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP display: "flex", justifyContent: "space-between", flexDirection: isTablet ? "column" : null, - marginRight: "30px", + marginRight: isMobile ? "0px" : "30px", }} > - + Пропорции Настройки ответов @@ -122,7 +122,7 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP } /> @@ -135,7 +135,7 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP } /> @@ -195,9 +195,8 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP }) } /> - + diff --git a/src/pages/Questions/OwnTextField/settingTextField.tsx b/src/pages/Questions/OwnTextField/settingTextField.tsx index 40069da6..cc12adf1 100644 --- a/src/pages/Questions/OwnTextField/settingTextField.tsx +++ b/src/pages/Questions/OwnTextField/settingTextField.tsx @@ -46,7 +46,7 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps) display: "flex", justifyContent: "space-between", flexDirection: isWrapperColumn ? "column" : null, - marginRight: "50px", + marginRight: isMobile ? "0px" : "50px", }} > @@ -86,6 +86,7 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps) Настройки вопросов { @@ -95,6 +96,7 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps) }} /> { @@ -103,8 +105,9 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps) }); }} /> - + { @@ -117,7 +120,7 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps) updateQuestionsList(quizId, totalIndex, { content: clonContent }); }} - />{" "} + /> {listQuestions[quizId][totalIndex].content.innerNameCheck && ( diff --git a/src/pages/Questions/PageOptions/SettingPageOptions.tsx b/src/pages/Questions/PageOptions/SettingPageOptions.tsx index 034a00ee..e7a0c1d1 100644 --- a/src/pages/Questions/PageOptions/SettingPageOptions.tsx +++ b/src/pages/Questions/PageOptions/SettingPageOptions.tsx @@ -1,5 +1,5 @@ import { useParams } from "react-router-dom"; -import { Box, Typography } from "@mui/material"; +import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomTextField from "@ui_kit/CustomTextField"; @@ -11,17 +11,19 @@ type SettingPageOptionsProps = { totalIndex: number; }; -export default function SettingPageOptions({ - totalIndex, -}: SettingPageOptionsProps) { +export default function SettingPageOptions({ totalIndex }: SettingPageOptionsProps) { const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); + return ( - + Настройки вопроса - + diff --git a/src/pages/Questions/RatingOptions/RatingOptions.tsx b/src/pages/Questions/RatingOptions/RatingOptions.tsx index 343f667f..2ae4acf6 100644 --- a/src/pages/Questions/RatingOptions/RatingOptions.tsx +++ b/src/pages/Questions/RatingOptions/RatingOptions.tsx @@ -34,7 +34,7 @@ export default function RatingOptions({ totalIndex }: Props) { gap: "20px", }} > - + { updateQuestionsList(quizId, totalIndex, { diff --git a/src/pages/Questions/RatingOptions/settingRating.tsx b/src/pages/Questions/RatingOptions/settingRating.tsx index 879ff8ef..39d9a3aa 100644 --- a/src/pages/Questions/RatingOptions/settingRating.tsx +++ b/src/pages/Questions/RatingOptions/settingRating.tsx @@ -45,7 +45,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { return ( - + Настройки рейтинга Настройки вопросов { @@ -116,8 +117,9 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { }); }} /> - + { @@ -130,7 +132,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { updateQuestionsList(quizId, totalIndex, { content: clonContent }); }} - />{" "} + /> {listQuestions[quizId][totalIndex].content.innerNameCheck && ( diff --git a/src/pages/Questions/SliderOptions/SliderOptions.tsx b/src/pages/Questions/SliderOptions/SliderOptions.tsx index d9211b58..3bd1069c 100644 --- a/src/pages/Questions/SliderOptions/SliderOptions.tsx +++ b/src/pages/Questions/SliderOptions/SliderOptions.tsx @@ -36,7 +36,9 @@ export default function SliderOptions({ totalIndex }: Props) { }} > - Выбор значения из диапазона + + Выбор значения из диапазона + - Начальное значение + + Начальное значение + - Шаг + Шаг - + Настройки ползунка { @@ -30,9 +31,10 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { }} /> - + Настройки вопросов { @@ -41,8 +43,9 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { }); }} /> - + { @@ -55,7 +58,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { updateQuestionsList(quizId, totalIndex, { content: clonContent }); }} - />{" "} + /> {listQuestions[quizId][totalIndex].content.innerNameCheck && ( diff --git a/src/pages/Questions/UploadFile/settingUpload.tsx b/src/pages/Questions/UploadFile/settingUpload.tsx index 58bf0820..6f724f15 100644 --- a/src/pages/Questions/UploadFile/settingUpload.tsx +++ b/src/pages/Questions/UploadFile/settingUpload.tsx @@ -1,5 +1,5 @@ import { useParams } from "react-router-dom"; -import { Box, Typography } from "@mui/material"; +import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomTextField from "@ui_kit/CustomTextField"; @@ -14,11 +14,14 @@ type SettingsUploadProps = { export default function SettingsUpload({ totalIndex }: SettingsUploadProps) { const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(790)); return ( - + Настройки вопроса { @@ -28,6 +31,7 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) { }} /> { @@ -36,8 +40,9 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) { }); }} /> - + { @@ -50,7 +55,7 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) { updateQuestionsList(quizId, totalIndex, { content: clonContent }); }} - />{" "} + /> {listQuestions[quizId][totalIndex].content.innerNameCheck && ( diff --git a/src/pages/Questions/answerOptions/responseSettings.tsx b/src/pages/Questions/answerOptions/responseSettings.tsx index 0077534b..9893ad63 100644 --- a/src/pages/Questions/answerOptions/responseSettings.tsx +++ b/src/pages/Questions/answerOptions/responseSettings.tsx @@ -22,12 +22,13 @@ export default function ResponseSettings({ totalIndex }: Props) { display: "flex", justifyContent: "space-between", flexDirection: isTablet ? "column" : "none", - marginRight: "30px", + marginRight: isMobile ? "0" : "30px", }} > - + Настройки ответов { @@ -42,6 +43,7 @@ export default function ResponseSettings({ totalIndex }: Props) { }} /> { @@ -51,6 +53,7 @@ export default function ResponseSettings({ totalIndex }: Props) { }} /> { @@ -63,6 +66,7 @@ export default function ResponseSettings({ totalIndex }: Props) { Настройки вопросов { @@ -71,8 +75,9 @@ export default function ResponseSettings({ totalIndex }: Props) { }); }} /> - + { @@ -90,6 +95,7 @@ export default function ResponseSettings({ totalIndex }: Props) { {listQuestions[quizId][totalIndex].content.innerNameCheck && ( { diff --git a/src/pages/startPage/Sidebar/SidebarMobile.tsx b/src/pages/startPage/Sidebar/SidebarMobile.tsx new file mode 100644 index 00000000..24271895 --- /dev/null +++ b/src/pages/startPage/Sidebar/SidebarMobile.tsx @@ -0,0 +1,137 @@ +import BackArrowIcon from "@icons/BackArrowIcon"; +import { People } from "@mui/icons-material"; +import { Box, Typography } from "@mui/material"; +import { FC } from "react"; +import { ChartLineUp } from "./icons/ChartLineUp"; +import { ReturnTime } from "./icons/ReturnTime"; +import { Question } from "./icons/Question"; +import { Settings } from "./icons/Settings"; +import { Pencil } from "./icons/Pencil"; +import { ArrowDown } from "./icons/ArrowDown"; + +interface Iprops { + open: boolean; +} + +export const SidebarMobile: FC = ({ open }) => ( + + + + + + + Название + Название проекта + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/src/pages/startPage/Sidebar/icons/ArrowDown.tsx b/src/pages/startPage/Sidebar/icons/ArrowDown.tsx new file mode 100644 index 00000000..29ee7918 --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/ArrowDown.tsx @@ -0,0 +1,13 @@ +import { FC, SVGProps } from "react"; + +export const ArrowDown: FC> = (props) => ( + + + +); diff --git a/src/pages/startPage/Sidebar/icons/ChartLineUp.tsx b/src/pages/startPage/Sidebar/icons/ChartLineUp.tsx new file mode 100644 index 00000000..acef1b80 --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/ChartLineUp.tsx @@ -0,0 +1,15 @@ +import { FC, SVGProps } from "react"; + +export const ChartLineUp: FC> = (props) => ( + + + + + +); diff --git a/src/pages/startPage/Sidebar/icons/Pencil.tsx b/src/pages/startPage/Sidebar/icons/Pencil.tsx new file mode 100644 index 00000000..c2db708d --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/Pencil.tsx @@ -0,0 +1,16 @@ +import { FC, SVGProps } from "react"; + +export const Pencil: FC> = (props) => ( + + + + + + + +); diff --git a/src/pages/startPage/Sidebar/icons/People.tsx b/src/pages/startPage/Sidebar/icons/People.tsx new file mode 100644 index 00000000..d880126d --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/People.tsx @@ -0,0 +1,10 @@ +import { FC, SVGProps } from "react"; + +export const People: FC> = (props) => ( + + + +); diff --git a/src/pages/startPage/Sidebar/icons/Question.tsx b/src/pages/startPage/Sidebar/icons/Question.tsx new file mode 100644 index 00000000..69989347 --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/Question.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from "react"; + +export const Question: FC> = (props) => ( + + + + + +); diff --git a/src/pages/startPage/Sidebar/icons/ReturnTime.tsx b/src/pages/startPage/Sidebar/icons/ReturnTime.tsx new file mode 100644 index 00000000..3724be6e --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/ReturnTime.tsx @@ -0,0 +1,13 @@ +import { FC, SVGProps } from "react"; + +export const ReturnTime: FC> = (props) => ( + + + +); diff --git a/src/pages/startPage/Sidebar/icons/Settings.tsx b/src/pages/startPage/Sidebar/icons/Settings.tsx new file mode 100644 index 00000000..d96c590b --- /dev/null +++ b/src/pages/startPage/Sidebar/icons/Settings.tsx @@ -0,0 +1,24 @@ +import { FC, SVGProps } from "react"; + +export const Settings: FC> = (props) => ( + + + + + +); diff --git a/src/pages/startPage/StartPage.tsx b/src/pages/startPage/StartPage.tsx index bca81903..0dd43b12 100755 --- a/src/pages/startPage/StartPage.tsx +++ b/src/pages/startPage/StartPage.tsx @@ -1,6 +1,6 @@ import Stepper from "@ui_kit/Stepper"; import SwitchStepPages from "@ui_kit/switchStepPages"; -import React from "react"; +import React, { useState } from "react"; import PenaLogo from "@ui_kit/PenaLogo"; import { Box, Button, Container, FormControl, IconButton, TextField, useMediaQuery, useTheme } from "@mui/material"; import BackArrowIcon from "@icons/BackArrowIcon"; @@ -10,6 +10,9 @@ import CustomAvatar from "@ui_kit/Header/Avatar"; import Sidebar from "@ui_kit/Sidebar"; import { quizStore } from "@root/quizes"; import { useParams } from "react-router-dom"; +import { Burger } from "@icons/Burger"; +import { PenaLogoIcon } from "@icons/PenaLogoIcon"; +import { SidebarMobile } from "./Sidebar/SidebarMobile"; export default function StartPage() { const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore(); @@ -17,6 +20,9 @@ export default function StartPage() { const activeStep = listQuizes[params].step; const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const isMobile = useMediaQuery(theme.breakpoints.down(660)); + + const [mobileSidebar, setMobileSidebar] = useState(false); const handleNext = () => { updateQuizesList(params, { step: listQuizes[params].step + 1 }); @@ -37,17 +43,18 @@ export default function StartPage() { sx={{ px: "16px", display: "flex", - height: "80px", + height: isMobile ? "51px" : "80px", alignItems: "center", - bgcolor: "white", + bgcolor: isMobile ? "#333647" : "white", borderBottom: "1px solid #E3E3E3", zIndex: theme.zIndex.drawer + 1, }} > - + {isMobile ? : } + - + {isMobile ? ( + setMobileSidebar(!mobileSidebar)} + style={{ fontSize: "30px", color: "white", cursor: "pointer" }} + /> + ) : ( + + )} ) : ( <> @@ -153,10 +167,10 @@ export default function StartPage() { - + {isMobile ? : } void; +} + +const style: CSSObject = { + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + width: 620, + minHeight: 251, + bgcolor: "background.paper", + borderRadius: "12px", + boxShadow: "24", +}; + +export const ReallyChangingModal: FC = ({ opened, onClose }) => ( + + + + Точно меняем? + + + + + Если поменять формат этого вопроса + на Варианты ответов , заполненные поля в этом вопросе пропадут, а + условия показа вопросов / результатов, зависимые от него, сбросятся. + + + + + + + + + +); diff --git a/src/ui_kit/Sidebar.tsx b/src/ui_kit/Sidebar.tsx index 0664f2e2..c84968b8 100755 --- a/src/ui_kit/Sidebar.tsx +++ b/src/ui_kit/Sidebar.tsx @@ -15,139 +15,143 @@ import LayoutIcon from "../assets/icons/LayoutIcon"; import MenuItem from "./MenuItem"; const createQuizMenuItems = [ - [LayoutIcon, "Стартовая страница"], - [QuestionIcon, "Вопросы"], - [ChartPieIcon, "Результаты"], - [ContactBookIcon, "Форма контактов"], - [FlowArrowIcon, "Установка квиза"], - [MegaphoneIcon, "Запуск рекламы"], + [LayoutIcon, "Стартовая страница"], + [QuestionIcon, "Вопросы"], + [ChartPieIcon, "Результаты"], + [ContactBookIcon, "Форма контактов"], + [FlowArrowIcon, "Установка квиза"], + [MegaphoneIcon, "Запуск рекламы"], ] as const; const quizSettingsMenuItems = [ - [TagIcon, "Дополнения"], - [PencilCircleIcon, "Дизайн"], - [PuzzlePieceIcon, "Интеграции"], - [GearIcon, "Настройки"], + [TagIcon, "Дополнения"], + [PencilCircleIcon, "Дизайн"], + [PuzzlePieceIcon, "Интеграции"], + [GearIcon, "Настройки"], ] as const; - export default function Sidebar() { - const theme = useTheme(); - const [isMenuCollapsed, setIsMenuCollapsed] = useState(false); - const [activeMenuItemIndex, setActiveMenuItemIndex] = useState(0); - const [progress, setProgress] = useState(1 / 6); + const theme = useTheme(); + const [isMenuCollapsed, setIsMenuCollapsed] = useState(false); + const [activeMenuItemIndex, setActiveMenuItemIndex] = useState(0); + const [progress, setProgress] = useState(1 / 6); - const handleMenuCollapseToggle = () => setIsMenuCollapsed(prev => !prev); - return ( - - - - {!isMenuCollapsed && - Создание квиза - } - - - - - - {createQuizMenuItems.map((menuItem, index) => { - const Icon = menuItem[0]; - return ( - setActiveMenuItemIndex(index)} - key={menuItem[1]} - text={menuItem[1]} - isCollapsed={isMenuCollapsed} - isActive={activeMenuItemIndex === index} - icon={} - /> - ); - })} - - {!isMenuCollapsed && - Настройки квиза - } - - {quizSettingsMenuItems.map((menuItem, index) => { - const Icon = menuItem[0]; - const totalIndex = index + createQuizMenuItems.length; - const isActive = activeMenuItemIndex === totalIndex; - return ( - setActiveMenuItemIndex(totalIndex)} - key={menuItem[1]} - text={menuItem[1]} - isActive={isActive} - isCollapsed={isMenuCollapsed} - icon={} - /> - ); - })} - - - - ) -} \ No newline at end of file + const handleMenuCollapseToggle = () => setIsMenuCollapsed((prev) => !prev); + return ( + + + {!isMenuCollapsed && ( + + Создание квиза + + )} + + + + + + {createQuizMenuItems.map((menuItem, index) => { + const Icon = menuItem[0]; + return ( + setActiveMenuItemIndex(index)} + key={menuItem[1]} + text={menuItem[1]} + isCollapsed={isMenuCollapsed} + isActive={activeMenuItemIndex === index} + icon={ + + } + /> + ); + })} + + {!isMenuCollapsed && ( + + Настройки квиза + + )} + + {quizSettingsMenuItems.map((menuItem, index) => { + const Icon = menuItem[0]; + const totalIndex = index + createQuizMenuItems.length; + const isActive = activeMenuItemIndex === totalIndex; + return ( + setActiveMenuItemIndex(totalIndex)} + key={menuItem[1]} + text={menuItem[1]} + isActive={isActive} + isCollapsed={isMenuCollapsed} + icon={ + + } + /> + ); + })} + + + ); +} From af59c764eddccdb95990ed1dc4e5be66723bb0d1 Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Thu, 21 Sep 2023 13:07:30 +0300 Subject: [PATCH 02/16] feat: emojies --- package.json | 3 + .../AnswerDraggableList/AnswerItem.tsx | 74 +++++++++++++++---- .../Questions/AnswerDraggableList/index.tsx | 7 +- src/pages/Questions/ButtonsOptions.tsx | 4 +- src/pages/Questions/DropDown/DropDown.tsx | 14 +++- src/pages/Questions/Emoji/Emoji.tsx | 22 +++--- .../OptionsAndPicture/OptionsAndPicture.tsx | 3 +- .../Questions/answerOptions/AnswerOptions.tsx | 8 +- src/stores/questions.ts | 2 + src/ui_kit/EmojiPicker.tsx | 19 +++++ yarn.lock | 15 ++++ 11 files changed, 135 insertions(+), 36 deletions(-) create mode 100644 src/ui_kit/EmojiPicker.tsx diff --git a/package.json b/package.json index cd513276..64e4ba21 100755 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@types/react": "^18.0.0", "@types/react-dnd": "^3.0.2", "@types/react-dom": "^18.0.0", + "emoji-mart": "^5.5.2", "file-saver": "^2.0.5", "html-to-image": "^1.11.11", "jszip": "^3.10.1", @@ -71,6 +72,8 @@ ] }, "devDependencies": { + "@emoji-mart/data": "^1.1.2", + "@emoji-mart/react": "^1.1.1", "@types/react-beautiful-dnd": "^13.1.4", "craco-alias": "^3.0.1" } diff --git a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx index ef5bc917..58a34e0f 100644 --- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx +++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useRef } from "react"; import { useParams } from "react-router-dom"; import { Draggable } from "react-beautiful-dnd"; import { @@ -7,29 +7,30 @@ import { FormControl, InputAdornment, IconButton, + Popover, useTheme, useMediaQuery, } from "@mui/material"; import { useDebouncedCallback } from "use-debounce"; +import { EmojiPicker } from "@ui_kit/EmojiPicker"; 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 AddEmoji from "../../../assets/icons/questionsPage/addEmoji"; import type { ChangeEvent, KeyboardEvent } from "react"; import type { Variants } from "@root/questions"; -import { ReactNode } from "react"; type AnswerItemProps = { index: number; totalIndex: number; variants: Variants[]; variant: Variants; - icon?: ReactNode; + emoji: boolean; }; export const AnswerItem = ({ @@ -37,12 +38,14 @@ export const AnswerItem = ({ totalIndex, variants, variant, - icon, + emoji, }: AnswerItemProps) => { + const [open, setOpen] = useState(false); const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const anchorElement = useRef(); const debounced = useDebouncedCallback((value) => { const answerNew = variants.slice(); answerNew[index].answer = value; @@ -69,7 +72,7 @@ export const AnswerItem = ({ const addNewAnswer = () => { const answerNew = variants.slice(); - answerNew.push({ answer: "", hints: "" }); + answerNew.push({ answer: "", hints: "", emoji: "" }); updateQuestionsList(quizId, totalIndex, { content: { @@ -137,19 +140,64 @@ export const AnswerItem = ({ > - {icon && icon} + {emoji && ( + + setOpen(true)}> + + {variant.emoji} + + + + setOpen(false)} + anchorOrigin={{ + vertical: "bottom", + horizontal: "right", + }} + sx={{ + ".MuiPaper-root.MuiPaper-rounded": { + background: "transparent", + }, + }} + > + { + setOpen(false); + const cloneVariants = [...variants]; + + cloneVariants[index] = { + ...cloneVariants[index], + emoji: native, + }; + + updateQuestionsList(quizId, totalIndex, { + content: { + ...listQuestions[quizId][totalIndex].content, + variants: cloneVariants, + }, + }); + }} + /> + + + )} ), endAdornment: ( - + { const quizId = Number(useParams().quizId); @@ -45,7 +44,7 @@ export const AnswerDraggableList = ({ totalIndex={totalIndex} variants={variants} variant={variant} - icon={icon} + emoji={emoji} /> ))} {provided.placeholder} diff --git a/src/pages/Questions/ButtonsOptions.tsx b/src/pages/Questions/ButtonsOptions.tsx index 0f8f19cd..af8ca330 100644 --- a/src/pages/Questions/ButtonsOptions.tsx +++ b/src/pages/Questions/ButtonsOptions.tsx @@ -68,7 +68,7 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) }} > {buttonSetting.map(({ icon, title, value, myFunc }) => ( - <> + {value === "branching" ? ( )} - + ))} { const answerNew = variants.slice(); - answerNew.push({ answer: "", hints: "" }); + answerNew.push({ answer: "", hints: "", emoji: "" }); updateQuestionsList(quizId, totalIndex, { content: { @@ -39,7 +39,11 @@ export default function DropDown({ totalIndex }: Props) { return ( <> - + {variants.length === 0 ? ( - + ); diff --git a/src/pages/Questions/Emoji/Emoji.tsx b/src/pages/Questions/Emoji/Emoji.tsx index 2fb6a375..a546df2f 100644 --- a/src/pages/Questions/Emoji/Emoji.tsx +++ b/src/pages/Questions/Emoji/Emoji.tsx @@ -1,10 +1,9 @@ +import { useState } from "react"; import { useParams } from "react-router-dom"; import { Box, Link, Typography, useMediaQuery, useTheme } from "@mui/material"; import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import ButtonsOptions from "../ButtonsOptions"; import SwitchEmoji from "./switchEmoji"; -import React from "react"; -import AddEmoji from "../../../assets/icons/questionsPage/addEmoji"; import { AnswerDraggableList } from "../AnswerDraggableList"; import { questionStore, updateQuestionsList } from "@root/questions"; @@ -12,7 +11,7 @@ interface Props { totalIndex: number; } export default function Emoji({ totalIndex }: Props) { - const [switchState, setSwitchState] = React.useState("setting"); + const [switchState, setSwitchState] = useState("setting"); const { listQuestions } = questionStore(); const quizId = Number(useParams().quizId); const theme = useTheme(); @@ -28,11 +27,7 @@ export default function Emoji({ totalIndex }: Props) { - - - } + emoji /> { - const answerNew = listQuestions[quizId][totalIndex].content.variants.slice(); - answerNew.push({ answer: "", hints: "" }); + const answerNew = + listQuestions[quizId][totalIndex].content.variants.slice(); + answerNew.push({ answer: "", hints: "", emoji: "" }); updateQuestionsList(quizId, totalIndex, { content: { @@ -70,7 +66,11 @@ export default function Emoji({ totalIndex }: Props) { )} - + ); diff --git a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx index 1185c955..331162c3 100644 --- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx +++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx @@ -28,6 +28,7 @@ export default function OptionsAndPicture({ totalIndex }: Props) { {listQuestions[quizId][totalIndex].content.variants.map((_, index) => ( { const clonContent = listQuestions[quizId][totalIndex].content; - clonContent.variants.push({ answer: "", hints: "" }); + clonContent.variants.push({ answer: "", hints: "", emoji: "" }); updateQuestionsList(quizId, totalIndex, { content: clonContent }); }} diff --git a/src/pages/Questions/answerOptions/AnswerOptions.tsx b/src/pages/Questions/answerOptions/AnswerOptions.tsx index 6caf7783..5687e255 100755 --- a/src/pages/Questions/answerOptions/AnswerOptions.tsx +++ b/src/pages/Questions/answerOptions/AnswerOptions.tsx @@ -25,7 +25,7 @@ export default function AnswerOptions({ totalIndex }: Props) { const addNewAnswer = () => { const answerNew = variants.slice(); - answerNew.push({ answer: "", hints: "" }); + answerNew.push({ answer: "", hints: "", emoji: "" }); updateQuestionsList(quizId, totalIndex, { content: { @@ -87,7 +87,11 @@ export default function AnswerOptions({ totalIndex }: Props) { )} - + ); diff --git a/src/stores/questions.ts b/src/stores/questions.ts index 89cda2f5..1f63663f 100644 --- a/src/stores/questions.ts +++ b/src/stores/questions.ts @@ -4,6 +4,7 @@ import { persist } from "zustand/middleware"; export type Variants = { answer: string; hints: string; + emoji: string; }; type Hint = { @@ -121,6 +122,7 @@ export const DEFAULT_QUESTION: Omit = { { answer: "", hints: "", + emoji: "", }, ], hint: { diff --git a/src/ui_kit/EmojiPicker.tsx b/src/ui_kit/EmojiPicker.tsx new file mode 100644 index 00000000..e1b86ce2 --- /dev/null +++ b/src/ui_kit/EmojiPicker.tsx @@ -0,0 +1,19 @@ +import EmojiPickerOriginal from "@emoji-mart/react"; + +type Emoji = { + emoticons: string[]; + id: string; + keywords: string[]; + name: string; + native: string; + shortcodes: string; + unified: string; +}; + +type EmojiPickerProps = { + onEmojiSelect: (emoji: Emoji) => void; +}; + +export const EmojiPicker = ({ onEmojiSelect }: EmojiPickerProps) => ( + +); diff --git a/yarn.lock b/yarn.lock index aaaf157b..87ce3a16 100755 --- a/yarn.lock +++ b/yarn.lock @@ -1218,6 +1218,16 @@ resolved "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz" integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg== +"@emoji-mart/data@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@emoji-mart/data/-/data-1.1.2.tgz#777c976f8f143df47cbb23a7077c9ca9fe5fc513" + integrity sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg== + +"@emoji-mart/react@^1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@emoji-mart/react/-/react-1.1.1.tgz#ddad52f93a25baf31c5383c3e7e4c6e05554312a" + integrity sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g== + "@emotion/babel-plugin@^11.10.5": version "11.10.5" resolved "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz" @@ -4163,6 +4173,11 @@ emittery@^0.8.1: resolved "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz" integrity sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg== +emoji-mart@^5.5.2: + version "5.5.2" + resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-5.5.2.tgz#3ddbaf053139cf4aa217650078bc1c50ca8381af" + integrity sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A== + emoji-regex@^8.0.0: version "8.0.0" resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz" From cf6109eb4e2e388fffc4848f6175f9b7926806bf Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Thu, 21 Sep 2023 14:37:10 +0300 Subject: [PATCH 03/16] fix: EmojiPicker theme --- src/pages/Questions/AnswerDraggableList/AnswerItem.tsx | 2 +- src/ui_kit/EmojiPicker.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx index 25f6bfdc..ca125024 100644 --- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx +++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx @@ -167,7 +167,7 @@ export const AnswerItem = ({ }} sx={{ ".MuiPaper-root.MuiPaper-rounded": { - background: "transparent", + borderRadius: "10px", }, }} > diff --git a/src/ui_kit/EmojiPicker.tsx b/src/ui_kit/EmojiPicker.tsx index e1b86ce2..0da1ddd6 100644 --- a/src/ui_kit/EmojiPicker.tsx +++ b/src/ui_kit/EmojiPicker.tsx @@ -15,5 +15,5 @@ type EmojiPickerProps = { }; export const EmojiPicker = ({ onEmojiSelect }: EmojiPickerProps) => ( - + ); From d855833c967566967af335efa2718e54fc9bb076 Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Thu, 21 Sep 2023 15:15:49 +0300 Subject: [PATCH 04/16] fix: rating stars --- .../Questions/RatingOptions/RatingOptions.tsx | 55 ++++++++++--------- .../Questions/RatingOptions/settingRating.tsx | 10 +++- 2 files changed, 38 insertions(+), 27 deletions(-) diff --git a/src/pages/Questions/RatingOptions/RatingOptions.tsx b/src/pages/Questions/RatingOptions/RatingOptions.tsx index e353d21a..733a4aed 100644 --- a/src/pages/Questions/RatingOptions/RatingOptions.tsx +++ b/src/pages/Questions/RatingOptions/RatingOptions.tsx @@ -51,8 +51,11 @@ export default function RatingOptions({ totalIndex }: Props) { <> ))} - - - Негативно - - - Позитивно - - + + Негативно + + + Позитивно + + + )} {listQuestions[quizId][totalIndex].content.ratingExpanded && (listQuestions[quizId][totalIndex].content.ratingDescription ? ( diff --git a/src/pages/Questions/RatingOptions/settingRating.tsx b/src/pages/Questions/RatingOptions/settingRating.tsx index 7b440392..48207ce9 100644 --- a/src/pages/Questions/RatingOptions/settingRating.tsx +++ b/src/pages/Questions/RatingOptions/settingRating.tsx @@ -115,7 +115,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { - + Date: Mon, 25 Sep 2023 10:12:22 +0300 Subject: [PATCH 05/16] fix: emojies --- .../DraggableList/QuestionPageCard.tsx | 2 - src/pages/Questions/Emoji/Emoji.tsx | 98 ++----------------- 2 files changed, 6 insertions(+), 94 deletions(-) diff --git a/src/pages/Questions/DraggableList/QuestionPageCard.tsx b/src/pages/Questions/DraggableList/QuestionPageCard.tsx index f701358a..48ed112b 100644 --- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx @@ -157,8 +157,6 @@ export default function QuestionsPageCard({ updateQuestionsList(quizId, totalIndex, { title }); }, 1000); - console.log(draggableProps); - return ( <> { @@ -42,79 +24,11 @@ export default function Emoji({ totalIndex }: Props) { return ( <> - - - - - - {!isMobile && } - - ), - endAdornment: ( - - - - - - - - - - - - ), - }} - sx={{ - "& .MuiInputBase-root": { - padding: "13.5px", - borderRadius: "10px", - background: "#ffffff", - }, - "& .MuiOutlinedInput-notchedOutline": { - border: "none", - }, - }} - inputProps={{ - sx: { fontSize: "18px", lineHeight: "21px", py: 0 }, - }} - /> - - {isMobile && ( - - - - - + - - - )} - + Date: Mon, 25 Sep 2023 11:38:06 +0300 Subject: [PATCH 06/16] fix: rating starts slider --- src/pages/Questions/DraggableList/index.tsx | 14 +++++++++++--- .../Questions/RatingOptions/RatingOptions.tsx | 1 + .../Questions/RatingOptions/settingRating.tsx | 9 ++++++--- 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/pages/Questions/DraggableList/index.tsx b/src/pages/Questions/DraggableList/index.tsx index 4eeb5631..3cb435cc 100644 --- a/src/pages/Questions/DraggableList/index.tsx +++ b/src/pages/Questions/DraggableList/index.tsx @@ -17,7 +17,11 @@ export const DraggableList = () => { const onDragEnd = ({ destination, source }: DropResult) => { if (destination) { - const newItems = reorder(listQuestions[quizId], source.index, destination.index); + const newItems = reorder( + listQuestions[quizId], + source.index, + destination.index + ); updateQuestionsListDragAndDrop(quizId, newItems); } @@ -28,8 +32,12 @@ export const DraggableList = () => { {(provided, snapshot) => ( - {listQuestions[quizId]?.map((_, index) => ( - + {listQuestions[quizId]?.map(({ id }, index) => ( + ))} {provided.placeholder} diff --git a/src/pages/Questions/RatingOptions/RatingOptions.tsx b/src/pages/Questions/RatingOptions/RatingOptions.tsx index 733a4aed..bbe907fa 100644 --- a/src/pages/Questions/RatingOptions/RatingOptions.tsx +++ b/src/pages/Questions/RatingOptions/RatingOptions.tsx @@ -68,6 +68,7 @@ export default function RatingOptions({ totalIndex }: Props) { (_, index) => index ).map((itemNumber) => ( { - const clonContent = listQuestions[quizId][totalIndex].content; - clonContent.steps = Number(value) || 1; - updateQuestionsList(quizId, totalIndex, { content: clonContent }); + updateQuestionsList(quizId, totalIndex, { + content: { + ...listQuestions[quizId][totalIndex].content, + steps: Number(value) || 1, + }, + }); }} /> From eeb6bb5e3522bf57927bf8f863adfe6ba88ff844 Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Mon, 25 Sep 2023 13:57:58 +0300 Subject: [PATCH 07/16] fix: emoji input --- .../AnswerDraggableList/AnswerItem.tsx | 112 +++++++++++++++++- src/pages/Questions/DraggableList/index.tsx | 4 +- 2 files changed, 109 insertions(+), 7 deletions(-) diff --git a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx index ca125024..81898c2c 100644 --- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx +++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx @@ -19,6 +19,7 @@ import { questionStore, updateQuestionsList } from "@root/questions"; import PointsIcon from "@icons/questionsPage/PointsIcon"; import DeleteIcon from "@icons/questionsPage/deleteIcon"; import MessageIcon from "@icons/messagIcon"; +import { EmojiIcons } from "@icons/EmojiIocns"; import TextareaAutosize from "@mui/base/TextareaAutosize"; import AddEmoji from "../../../assets/icons/questionsPage/addEmoji"; @@ -44,8 +45,9 @@ export const AnswerItem = ({ const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const isTablet = useMediaQuery(theme.breakpoints.down(790)); const anchorElement = useRef(); + const anchorMobileElement = useRef(); const debounced = useDebouncedCallback((value) => { const answerNew = variants.slice(); answerNew[index].answer = value; @@ -114,7 +116,12 @@ export const AnswerItem = ({ key={index} fullWidth variant="standard" - sx={{ padding: isMobile ? " 15px 0 20px 0" : "0 0 20px 0" }} + sx={{ + margin: isTablet ? " 15px 0 20px 0" : "0 0 20px 0", + borderRadius: "10px", + border: "1px solid rgba(0, 0, 0, 0.23)", + background: "white", + }} > - {emoji && ( + {emoji && !isTablet && ( setOpen(true)}> + {emoji && isTablet && ( + setOpen(true)} + sx={{ + display: "flex", + alignItems: "center", + m: "8px", + position: "relative", + }} + > + + {variant.emoji ? ( + + {variant.emoji} + + ) : ( + + )} + + + + + event.stopPropagation()} + onClose={() => setOpen(false)} + anchorOrigin={{ + vertical: "bottom", + horizontal: "left", + }} + sx={{ + display: open ? "block" : "none", + ".MuiPaper-root.MuiPaper-rounded": { + borderRadius: "10px", + }, + }} + > + { + setOpen(false); + const cloneVariants = [...variants]; + + cloneVariants[index] = { + ...cloneVariants[index], + emoji: native, + }; + + updateQuestionsList(quizId, totalIndex, { + content: { + ...listQuestions[quizId][totalIndex].content, + variants: cloneVariants, + }, + }); + }} + /> + + + )} )} diff --git a/src/pages/Questions/DraggableList/index.tsx b/src/pages/Questions/DraggableList/index.tsx index 3cb435cc..8db7887e 100644 --- a/src/pages/Questions/DraggableList/index.tsx +++ b/src/pages/Questions/DraggableList/index.tsx @@ -32,9 +32,9 @@ export const DraggableList = () => { {(provided, snapshot) => ( - {listQuestions[quizId]?.map(({ id }, index) => ( + {listQuestions[quizId]?.map((_, index) => ( From 123a26a436db3415aa2e1d8c4a128d17e1c24877 Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Mon, 25 Sep 2023 15:35:12 +0300 Subject: [PATCH 08/16] fix: settingOpytionsPict logic --- .../OptionsPicture/settingOpytionsPict.tsx | 49 +++++++++++++------ 1 file changed, 34 insertions(+), 15 deletions(-) diff --git a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx index 1f4c65cc..334fe66d 100644 --- a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx +++ b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx @@ -154,19 +154,22 @@ export default function SettingOpytionsPict({ }) } /> - - updateQuestionsList(quizId, totalIndex, { - content: { - ...listQuestions[quizId][totalIndex].content, - largeCheck: target.checked, - }, - }) - } - /> + {listQuestions[quizId][totalIndex].content.xy !== "1:1" && + listQuestions[quizId][totalIndex].content.format !== "masonry" && ( + + updateQuestionsList(quizId, totalIndex, { + content: { + ...listQuestions[quizId][totalIndex].content, + largeCheck: target.checked, + }, + }) + } + /> + )} - Форма + + Формат + - + Date: Wed, 27 Sep 2023 10:55:11 +0300 Subject: [PATCH 09/16] feat: rating autosize inputs --- .../Questions/RatingOptions/RatingOptions.tsx | 256 ++++++++++++------ src/stores/questions.ts | 8 +- 2 files changed, 176 insertions(+), 88 deletions(-) diff --git a/src/pages/Questions/RatingOptions/RatingOptions.tsx b/src/pages/Questions/RatingOptions/RatingOptions.tsx index bbe907fa..3e5887d9 100644 --- a/src/pages/Questions/RatingOptions/RatingOptions.tsx +++ b/src/pages/Questions/RatingOptions/RatingOptions.tsx @@ -1,10 +1,16 @@ -import { useState } from "react"; +import { useState, useEffect, useRef } from "react"; import { useParams } from "react-router-dom"; -import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; +import { + Box, + Typography, + TextField, + useMediaQuery, + useTheme, +} from "@mui/material"; +import { useDebouncedCallback } from "use-debounce"; +import { questionStore, updateQuestionsList } from "@root/questions"; import ButtonsOptions from "../ButtonsOptions"; import SwitchRating from "./switchRating"; -import { questionStore, updateQuestionsList } from "@root/questions"; -import CustomTextField from "@ui_kit/CustomTextField"; import TropfyIcon from "../../../assets/icons/questionsPage/tropfyIcon"; import FlagIcon from "../../../assets/icons/questionsPage/FlagIcon"; @@ -25,10 +31,49 @@ export type ButtonRatingFrom = { export default function RatingOptions({ totalIndex }: Props) { const [switchState, setSwitchState] = useState("setting"); + const [negativeText, setNegativeText] = useState(""); + const [positiveText, setPositiveText] = useState(""); + const [negativeTextWidth, setNegativeTextWidth] = useState(0); + const [positiveTextWidth, setPositiveTextWidth] = useState(0); const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const negativeRef = useRef(null); + const positiveRef = useRef(null); + const debounceNegativeDescription = useDebouncedCallback((value) => { + updateQuestionsList(quizId, totalIndex, { + content: { + ...listQuestions[quizId][totalIndex].content, + ratingNegativeDescription: value.substring(0, 15), + }, + }); + }, 500); + const debouncePositiveDescription = useDebouncedCallback((value) => { + updateQuestionsList(quizId, totalIndex, { + content: { + ...listQuestions[quizId][totalIndex].content, + ratingPositiveDescription: value.substring(0, 15), + }, + }); + }, 500); + + useEffect(() => { + setNegativeText( + listQuestions[quizId][totalIndex].content.ratingNegativeDescription + ); + setPositiveText( + listQuestions[quizId][totalIndex].content.ratingPositiveDescription + ); + }, []); + + useEffect(() => { + setNegativeTextWidth(negativeRef.current?.offsetWidth || 0); + }, [negativeText]); + + useEffect(() => { + setPositiveTextWidth(positiveRef.current?.offsetWidth || 0); + }, [positiveText]); const buttonRatingForm: ButtonRatingFrom[] = [ { name: "star", icon: }, @@ -54,7 +99,7 @@ export default function RatingOptions({ totalIndex }: Props) { width: isMobile ? "auto" : `${listQuestions[quizId][totalIndex].content.steps * 44}px`, - minWidth: "200px", + minWidth: "300px", maxWidth: "440px", display: "flex", padding: "20px", @@ -62,35 +107,19 @@ export default function RatingOptions({ totalIndex }: Props) { gap: "20px", }} > - + {Array.from( { length: listQuestions[quizId][totalIndex].content.steps }, (_, index) => index ).map((itemNumber) => ( - { - updateQuestionsList(quizId, totalIndex, { - content: { - ...listQuestions[quizId][totalIndex].content, - ratingExpanded: true, - }, - }); - }, - sx: { - cursor: "pointer", - transform: "scale(1.5)", - ":hover": { - transform: "scale(1.7)", - transition: "0.2s", - }, - }, - } - : { sx: { transform: "scale(1.5)" } })} - > + { buttonRatingForm.find( ({ name }) => @@ -100,65 +129,124 @@ export default function RatingOptions({ totalIndex }: Props) { ))} - {!listQuestions[quizId][totalIndex].content.ratingDescription && ( - + - - Негативно - - - Позитивно - - - )} - {listQuestions[quizId][totalIndex].content.ratingExpanded && - (listQuestions[quizId][totalIndex].content.ratingDescription ? ( - - {listQuestions[quizId][totalIndex].content.ratingDescription} - - ) : ( - { - if (key === "Enter") { - const currentTarget = target as HTMLInputElement; + {negativeText} + + { + if (positiveText) { + setPositiveText(""); + debouncePositiveDescription(""); + } - updateQuestionsList(quizId, totalIndex, { - content: { - ...listQuestions[quizId][totalIndex].content, - ratingDescription: currentTarget.value.substring(0, 20), - }, - }); - } - }} - onBlur={({ target }) => { - updateQuestionsList(quizId, totalIndex, { - content: { - ...listQuestions[quizId][totalIndex].content, - ratingDescription: target.value.substring(0, 20), + if (target.value.length <= 15) { + setNegativeText(target.value); + debounceNegativeDescription(target.value); + } + }} + onBlur={({ target }) => debounceNegativeDescription(target.value)} + sx={{ + width: negativeTextWidth + 10 + "px", + background: "transparent", + fontSize: "18px", + minWidth: "95px", + maxWidth: "230px", + transition: "0.2s", + "& .MuiInputBase-root": { + "& .MuiInputBase-input": { + color: theme.palette.grey2.main, + fontSize: "16px", + padding: "0 3px", + borderRadius: "3px", + border: "1px solid", + borderColor: "transparent", + "&:hover, &:focus": { + borderColor: theme.palette.grey2.main, }, - }); - }} - /> - ))} + }, + "& .MuiOutlinedInput-notchedOutline": { + outline: "none", + border: "none", + }, + }, + }} + /> + + {positiveText} + + { + if (negativeText) { + setNegativeText(""); + debounceNegativeDescription(""); + } + + if (target.value.length <= 15) { + setPositiveText(target.value); + debouncePositiveDescription(target.value); + } + }} + onBlur={({ target }) => debouncePositiveDescription(target.value)} + sx={{ + width: positiveTextWidth + 10 + "px", + background: "transparent", + fontSize: "18px", + minWidth: "95px", + maxWidth: "230px", + transition: "0.2s", + "& .MuiInputBase-root": { + "& .MuiInputBase-input": { + color: theme.palette.grey2.main, + fontSize: "16px", + padding: "0 3px", + borderRadius: "3px", + border: "1px solid", + borderColor: "transparent", + "&:hover, &:focus": { + borderColor: theme.palette.grey2.main, + }, + }, + "& .MuiOutlinedInput-notchedOutline": { + outline: "none", + border: "none", + }, + }, + }} + /> + = { chooseRange: false, required: false, replText: "", - ratingExpanded: false, - ratingDescription: "", + ratingNegativeDescription: "", + ratingPositiveDescription: "", variants: [ { answer: "", From b4f1e4857de73c0a4f18581181f87a62fcac5fa3 Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Wed, 27 Sep 2023 17:14:48 +0300 Subject: [PATCH 10/16] feat: cancel questin deleting --- src/pages/Questions/ButtonsOptions.tsx | 31 ++++++- src/pages/Questions/ButtonsOptionsAndPict.tsx | 39 ++++++-- .../DraggableList/DraggableListItem.tsx | 91 ++++++++++++++----- .../DraggableList/QuestionPageCard.tsx | 29 +++++- src/pages/Questions/DraggableList/index.tsx | 1 - src/stores/questions.ts | 41 +++++++-- 6 files changed, 193 insertions(+), 39 deletions(-) diff --git a/src/pages/Questions/ButtonsOptions.tsx b/src/pages/Questions/ButtonsOptions.tsx index e4b65a4f..dda5a917 100644 --- a/src/pages/Questions/ButtonsOptions.tsx +++ b/src/pages/Questions/ButtonsOptions.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import MiniButtonSetting from "@ui_kit/MiniButtonSetting"; import { useParams } from "react-router-dom"; import SettingIcon from "../../assets/icons/questionsPage/settingIcon"; @@ -20,6 +20,8 @@ import { resetSomeField, copyQuestion, removeQuestion, + removeQuestionForce, + updateQuestionsList, } from "@root/questions"; import { DoubleTick } from "@icons/questionsPage/DoubleTick"; import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight"; @@ -37,10 +39,16 @@ export default function ButtonsOptions({ totalIndex, }: Props) { const quizId = Number(useParams().quizId); - const { openedModalSettings } = questionStore(); + const { openedModalSettings, listQuestions } = questionStore(); const [openedReallyChangingModal, setOpenedReallyChangingModal] = useState(false); + useEffect(() => { + if (listQuestions[quizId][totalIndex].deleteTimeoutId) { + clearTimeout(listQuestions[quizId][totalIndex].deleteTimeoutId); + } + }, [listQuestions]); + const openedModal = () => { resetSomeField({ openedModalSettings: "open" }); console.log(openedModalSettings); @@ -50,6 +58,7 @@ export default function ButtonsOptions({ const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920)); + const buttonSetting: { icon: JSX.Element; title: string; @@ -241,7 +250,23 @@ export default function ButtonsOptions({ removeQuestion(quizId, totalIndex)} + onClick={() => { + const removedId = listQuestions[quizId][totalIndex].id; + if (listQuestions[quizId][totalIndex].deleteTimeoutId) { + clearTimeout(listQuestions[quizId][totalIndex].deleteTimeoutId); + } + + removeQuestion(quizId, totalIndex); + + const newTimeoutId = window.setTimeout(() => { + removeQuestionForce(quizId, removedId); + }, 5000); + + updateQuestionsList(quizId, totalIndex, { + ...listQuestions[quizId][totalIndex], + deleteTimeoutId: newTimeoutId, + }); + }} > diff --git a/src/pages/Questions/ButtonsOptionsAndPict.tsx b/src/pages/Questions/ButtonsOptionsAndPict.tsx index 10321f95..27411c70 100644 --- a/src/pages/Questions/ButtonsOptionsAndPict.tsx +++ b/src/pages/Questions/ButtonsOptionsAndPict.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import MiniButtonSetting from "@ui_kit/MiniButtonSetting"; import SettingIcon from "../../assets/icons/questionsPage/settingIcon"; import Clue from "../../assets/icons/questionsPage/clue"; @@ -21,13 +21,14 @@ import { copyQuestion, removeQuestion, resetSomeField, + removeQuestionForce, + updateQuestionsList, } from "@root/questions"; import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight"; import { DoubleTick } from "@icons/questionsPage/DoubleTick"; import { VectorQuestions } from "@icons/questionsPage/VectorQuestions"; import { ReallyChangingModal } from "@ui_kit/Modal/ReallyChangingModal/ReallyChangingModal"; - import "./ButtonsOptionsAndPict.css"; interface Props { @@ -43,12 +44,19 @@ export default function ButtonsOptionsAndPict({ }: Props) { const [buttonHover, setButtonHover] = useState(""); const quizId = Number(useParams().quizId); - const { openedModalSettings } = questionStore(); - const [openedReallyChangingModal, setOpenedReallyChangingModal] = useState(false); + const { listQuestions } = questionStore(); + const [openedReallyChangingModal, setOpenedReallyChangingModal] = + useState(false); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isIconMobile = useMediaQuery(theme.breakpoints.down(1050)); + useEffect(() => { + if (listQuestions[quizId][totalIndex].deleteTimeoutId) { + clearTimeout(listQuestions[quizId][totalIndex].deleteTimeoutId); + } + }, [listQuestions]); + const openedModal = () => { resetSomeField({ openedModalSettings: "open" }); }; @@ -280,13 +288,32 @@ export default function ButtonsOptionsAndPict({ removeQuestion(quizId, totalIndex)} + onClick={() => { + const removedId = listQuestions[quizId][totalIndex].id; + if (listQuestions[quizId][totalIndex].deleteTimeoutId) { + clearTimeout(listQuestions[quizId][totalIndex].deleteTimeoutId); + } + + removeQuestion(quizId, totalIndex); + + const newTimeoutId = window.setTimeout(() => { + removeQuestionForce(quizId, removedId); + }, 5000); + + updateQuestionsList(quizId, totalIndex, { + ...listQuestions[quizId][totalIndex], + deleteTimeoutId: newTimeoutId, + }); + }} > - setOpenedReallyChangingModal(false)} /> + setOpenedReallyChangingModal(false)} + /> ); } diff --git a/src/pages/Questions/DraggableList/DraggableListItem.tsx b/src/pages/Questions/DraggableList/DraggableListItem.tsx index 1f0fb7dd..ad0eeb68 100644 --- a/src/pages/Questions/DraggableList/DraggableListItem.tsx +++ b/src/pages/Questions/DraggableList/DraggableListItem.tsx @@ -1,8 +1,11 @@ +import { useParams } from "react-router-dom"; import { Draggable } from "react-beautiful-dnd"; -import { Box, ListItem } from "@mui/material"; +import { Box, ListItem, Typography, useTheme } from "@mui/material"; import QuestionsPageCard from "./QuestionPageCard"; +import { questionStore, updateQuestionsList } from "@root/questions"; + type DraggableListItemProps = { index: number; isDragging: boolean; @@ -11,23 +14,69 @@ type DraggableListItemProps = { export const DraggableListItem = ({ index, isDragging, -}: DraggableListItemProps) => ( - - {(provided) => ( - - - - - - )} - -); +}: DraggableListItemProps) => { + const quizId = Number(useParams().quizId); + const { listQuestions } = questionStore(); + const theme = useTheme(); + + return ( + + {(provided) => ( + + {listQuestions[quizId][index].deleted ? ( + + + Вопрос удалён. + + { + updateQuestionsList(quizId, index, { + ...listQuestions[quizId][index], + deleted: false, + }); + }} + sx={{ + cursor: "pointer", + fontSize: "16px", + textDecoration: "underline", + color: theme.palette.brightPurple.main, + textDecorationColor: theme.palette.brightPurple.main, + }} + > + Восстановить? + + + ) : ( + + + + )} + + )} + + ); +}; diff --git a/src/pages/Questions/DraggableList/QuestionPageCard.tsx b/src/pages/Questions/DraggableList/QuestionPageCard.tsx index 48ed112b..65b77830 100644 --- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx @@ -1,4 +1,4 @@ -import { useState, useRef } from "react"; +import { useState, useRef, useEffect } from "react"; import { useParams } from "react-router-dom"; import { Box, @@ -24,6 +24,7 @@ import { createQuestion, copyQuestion, removeQuestion, + removeQuestionForce, } from "@root/questions"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; @@ -157,6 +158,12 @@ export default function QuestionsPageCard({ updateQuestionsList(quizId, totalIndex, { title }); }, 1000); + useEffect(() => { + if (listQuestions[quizId][totalIndex].deleteTimeoutId) { + clearTimeout(listQuestions[quizId][totalIndex].deleteTimeoutId); + } + }, [listQuestions]); + return ( <> removeQuestion(quizId, totalIndex)} + onClick={() => { + const removedId = listQuestions[quizId][totalIndex].id; + if (listQuestions[quizId][totalIndex].deleteTimeoutId) { + clearTimeout( + listQuestions[quizId][totalIndex].deleteTimeoutId + ); + } + + removeQuestion(quizId, totalIndex); + + const newTimeoutId = window.setTimeout(() => { + removeQuestionForce(quizId, removedId); + }, 5000); + + updateQuestionsList(quizId, totalIndex, { + ...listQuestions[quizId][totalIndex], + deleteTimeoutId: newTimeoutId, + }); + }} > diff --git a/src/pages/Questions/DraggableList/index.tsx b/src/pages/Questions/DraggableList/index.tsx index 8db7887e..f6b5842b 100644 --- a/src/pages/Questions/DraggableList/index.tsx +++ b/src/pages/Questions/DraggableList/index.tsx @@ -1,4 +1,3 @@ -import { useState } from "react"; import { useParams } from "react-router-dom"; import { Box } from "@mui/material"; import { DragDropContext, Droppable } from "react-beautiful-dnd"; diff --git a/src/stores/questions.ts b/src/stores/questions.ts index ed37b07f..36788b87 100644 --- a/src/stores/questions.ts +++ b/src/stores/questions.ts @@ -29,7 +29,8 @@ export interface Question { description: string; type: string; required: boolean; - deleted: true; + deleted: boolean; + deleteTimeoutId: number; page: number; content: { variants: Variants[]; @@ -84,7 +85,8 @@ export const DEFAULT_QUESTION: Omit = { description: "", type: "", required: true, - deleted: true, + deleted: false, + deleteTimeoutId: 0, page: 0, content: { largeCheck: false, @@ -147,15 +149,35 @@ export const DEFAULT_QUESTION: Omit = { expanded: false, }; +let isFirstPartialize = true; + export const questionStore = create()( persist( () => ({ listQuestions: {}, openedModalSettings: "", }), - { name: "question", + partialize: (state: QuestionStore) => { + if (isFirstPartialize) { + isFirstPartialize = false; + + Object.keys(state.listQuestions).forEach((quizId) => { + [...state.listQuestions[quizId]].forEach(({ id, deleted }) => { + if (deleted) { + const removedItemIndex = state.listQuestions[quizId].findIndex( + (item) => item.id === id + ); + + state.listQuestions[quizId].splice(removedItemIndex, 1); + } + }); + }); + } + + return state; + }, } ) ); @@ -222,11 +244,18 @@ export const copyQuestion = (quizId: number, copiedQuestionIndex: number) => { questionStore.setState({ listQuestions }); }; +export const removeQuestionForce = (quizId: number, removedId: number) => { + const questionListClone = { ...questionStore.getState()["listQuestions"] }; + const removedItemIndex = questionListClone[quizId].findIndex( + ({ id }) => id === removedId + ); + questionListClone[quizId].splice(removedItemIndex, 1); + questionStore.setState({ listQuestions: questionListClone }); +}; + export const removeQuestion = (quizId: number, index: number) => { const questionListClone = { ...questionStore.getState()["listQuestions"] }; - - questionListClone[quizId].splice(index, 1); - + questionListClone[quizId][index].deleted = true; questionStore.setState({ listQuestions: questionListClone }); }; From e85df285a30b1946b0fa58967f3db3b3f7faebe4 Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Thu, 28 Sep 2023 09:38:22 +0300 Subject: [PATCH 11/16] fix: rating inputs --- .../Questions/RatingOptions/RatingOptions.tsx | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/src/pages/Questions/RatingOptions/RatingOptions.tsx b/src/pages/Questions/RatingOptions/RatingOptions.tsx index 3e5887d9..6b4c35e4 100644 --- a/src/pages/Questions/RatingOptions/RatingOptions.tsx +++ b/src/pages/Questions/RatingOptions/RatingOptions.tsx @@ -98,7 +98,12 @@ export default function RatingOptions({ totalIndex }: Props) { sx={{ width: isMobile ? "auto" - : `${listQuestions[quizId][totalIndex].content.steps * 44}px`, + : `${ + listQuestions[quizId][totalIndex].content.steps * 44 > + negativeTextWidth + positiveTextWidth + ? listQuestions[quizId][totalIndex].content.steps * 44 + : negativeTextWidth + positiveTextWidth + 20 + }px`, minWidth: "300px", maxWidth: "440px", display: "flex", @@ -156,11 +161,6 @@ export default function RatingOptions({ totalIndex }: Props) { value={negativeText} placeholder="Негативно" onChange={({ target }) => { - if (positiveText) { - setPositiveText(""); - debouncePositiveDescription(""); - } - if (target.value.length <= 15) { setNegativeText(target.value); debounceNegativeDescription(target.value); @@ -209,11 +209,6 @@ export default function RatingOptions({ totalIndex }: Props) { value={positiveText} placeholder="Позитивно" onChange={({ target }) => { - if (negativeText) { - setNegativeText(""); - debounceNegativeDescription(""); - } - if (target.value.length <= 15) { setPositiveText(target.value); debouncePositiveDescription(target.value); From 45a33c1f9120d217c3fdd6ca7ea2c6d2f8d809a0 Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Thu, 28 Sep 2023 10:39:43 +0300 Subject: [PATCH 12/16] fix: title --- src/pages/Questions/branchingQuestions.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/pages/Questions/branchingQuestions.tsx b/src/pages/Questions/branchingQuestions.tsx index 0e697d85..edab7795 100644 --- a/src/pages/Questions/branchingQuestions.tsx +++ b/src/pages/Questions/branchingQuestions.tsx @@ -41,7 +41,7 @@ const CONDITIONS = [ export default function BranchingQuestions({ totalIndex, }: BranchingQuestionsProps) { - const [title, setTitle] = useState("Заголовок вопроса"); + const [title, setTitle] = useState(""); const [titleInputWidth, setTitleInputWidth] = useState(0); const quizId = Number(useParams().quizId); const { openedModalSettings, listQuestions } = questionStore(); @@ -105,15 +105,18 @@ export default function BranchingQuestions({ setTitle(target.value)} style={{ - width: titleInputWidth, + width: titleInputWidth ? titleInputWidth : 170, outline: "none", background: "transparent", border: "none", fontSize: "18px", - minWidth: "160px", + minWidth: "50px", maxWidth: "500px", + fontFamily: "Rubik", + transition: ".2s", }} /> From 7edb4fc9f2aaaf5ca6d70221def954957e91d415 Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Thu, 28 Sep 2023 12:35:25 +0300 Subject: [PATCH 13/16] fix: emoji and question type select --- .../DraggableList/ChooseAnswerModal.tsx | 27 ++++++++++++++----- .../DraggableList/QuestionPageCard.tsx | 1 + src/pages/Questions/branchingQuestions.tsx | 2 +- src/ui_kit/EmojiPicker.tsx | 9 ++++++- 4 files changed, 31 insertions(+), 8 deletions(-) diff --git a/src/pages/Questions/DraggableList/ChooseAnswerModal.tsx b/src/pages/Questions/DraggableList/ChooseAnswerModal.tsx index 90e10705..17d70e6b 100644 --- a/src/pages/Questions/DraggableList/ChooseAnswerModal.tsx +++ b/src/pages/Questions/DraggableList/ChooseAnswerModal.tsx @@ -11,6 +11,7 @@ import { ClickAwayListener, Modal, Button, + useTheme, } from "@mui/material"; import { @@ -27,6 +28,7 @@ type ChooseAnswerModalProps = { onClose: () => void; anchorRef: RefObject; totalIndex: number; + switchState: string; }; export const ChooseAnswerModal = ({ @@ -34,11 +36,13 @@ export const ChooseAnswerModal = ({ onClose, anchorRef, totalIndex, + switchState, }: ChooseAnswerModalProps) => { const [openModal, setOpenModal] = useState(false); const [selectedValue, setSelectedValue] = useState(""); const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); + const theme = useTheme(); return ( <> @@ -56,15 +60,26 @@ export const ChooseAnswerModal = ({ {BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => ( { - onClose(); - setOpenModal(true); - setSelectedValue(value); - }} sx={{ display: "flex", gap: "10px" }} + {...(value !== switchState && { + onClick: () => { + onClose(); + setOpenModal(true); + setSelectedValue(value); + }, + })} > {icon} - {title} + + {title} + ))} diff --git a/src/pages/Questions/DraggableList/QuestionPageCard.tsx b/src/pages/Questions/DraggableList/QuestionPageCard.tsx index 65b77830..e685259e 100644 --- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx @@ -213,6 +213,7 @@ export default function QuestionsPageCard({ onClose={() => setOpen(false)} anchorRef={anchorRef} totalIndex={totalIndex} + switchState={switchState} /> ), diff --git a/src/pages/Questions/branchingQuestions.tsx b/src/pages/Questions/branchingQuestions.tsx index edab7795..2b52a2ba 100644 --- a/src/pages/Questions/branchingQuestions.tsx +++ b/src/pages/Questions/branchingQuestions.tsx @@ -108,7 +108,7 @@ export default function BranchingQuestions({ placeholder="Заголовок вопроса" onChange={({ target }) => setTitle(target.value)} style={{ - width: titleInputWidth ? titleInputWidth : 170, + width: titleInputWidth ? titleInputWidth : 170, outline: "none", background: "transparent", border: "none", diff --git a/src/ui_kit/EmojiPicker.tsx b/src/ui_kit/EmojiPicker.tsx index 0da1ddd6..50714d45 100644 --- a/src/ui_kit/EmojiPicker.tsx +++ b/src/ui_kit/EmojiPicker.tsx @@ -1,4 +1,5 @@ import EmojiPickerOriginal from "@emoji-mart/react"; +import { Box } from "@mui/material"; type Emoji = { emoticons: string[]; @@ -15,5 +16,11 @@ type EmojiPickerProps = { }; export const EmojiPicker = ({ onEmojiSelect }: EmojiPickerProps) => ( - + + + ); From 6c46a4b32e19a8a36b99fb6446cdfa15a81b4a5f Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Thu, 28 Sep 2023 15:29:48 +0300 Subject: [PATCH 14/16] fix: AnswerDraggableList logic --- .../AnswerDraggableList/AnswerItem.tsx | 160 +----------------- .../Questions/AnswerDraggableList/index.tsx | 10 +- src/pages/Questions/Emoji/Emoji.tsx | 154 ++++++++++++++++- 3 files changed, 166 insertions(+), 158 deletions(-) diff --git a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx index 81898c2c..a9e3c86c 100644 --- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx +++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx @@ -12,18 +12,15 @@ import { useMediaQuery, } from "@mui/material"; import { useDebouncedCallback } from "use-debounce"; -import { EmojiPicker } from "@ui_kit/EmojiPicker"; import { questionStore, updateQuestionsList } from "@root/questions"; import PointsIcon from "@icons/questionsPage/PointsIcon"; import DeleteIcon from "@icons/questionsPage/deleteIcon"; import MessageIcon from "@icons/messagIcon"; -import { EmojiIcons } from "@icons/EmojiIocns"; import TextareaAutosize from "@mui/base/TextareaAutosize"; -import AddEmoji from "../../../assets/icons/questionsPage/addEmoji"; -import type { ChangeEvent, KeyboardEvent } from "react"; +import type { ChangeEvent, KeyboardEvent, ReactNode } from "react"; import type { Variants } from "@root/questions"; type AnswerItemProps = { @@ -31,7 +28,8 @@ type AnswerItemProps = { totalIndex: number; variants: Variants[]; variant: Variants; - emoji: boolean; + additionalContent?: ReactNode; + additionalMobile?: ReactNode; }; export const AnswerItem = ({ @@ -39,15 +37,13 @@ export const AnswerItem = ({ totalIndex, variants, variant, - emoji, + additionalContent, + additionalMobile, }: AnswerItemProps) => { - const [open, setOpen] = useState(false); const quizId = Number(useParams().quizId); const { listQuestions } = questionStore(); const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down(790)); - const anchorElement = useRef(); - const anchorMobileElement = useRef(); const debounced = useDebouncedCallback((value) => { const answerNew = variants.slice(); answerNew[index].answer = value; @@ -147,58 +143,7 @@ export const AnswerItem = ({ > - {emoji && !isTablet && ( - - setOpen(true)}> - - {variant.emoji && ( - {variant.emoji} - )} - - - - setOpen(false)} - anchorOrigin={{ - vertical: "bottom", - horizontal: "right", - }} - sx={{ - ".MuiPaper-root.MuiPaper-rounded": { - borderRadius: "10px", - }, - }} - > - { - setOpen(false); - const cloneVariants = [...variants]; - - cloneVariants[index] = { - ...cloneVariants[index], - emoji: native, - }; - - updateQuestionsList(quizId, totalIndex, { - content: { - ...listQuestions[quizId][totalIndex].content, - variants: cloneVariants, - }, - }); - }} - /> - - - )} + {additionalContent} ), endAdornment: ( @@ -232,9 +177,9 @@ export const AnswerItem = ({ ), }} sx={{ - padding: emoji && isTablet ? "10px 0px" : 0, + padding: isTablet ? "10px 0px" : 0, "& .MuiInputBase-root": { - padding: emoji ? "5px 13.5px" : "13.5px", + minHeight: "48px", borderRadius: "10px", background: "#ffffff", "& .MuiOutlinedInput-notchedOutline": { @@ -246,94 +191,7 @@ export const AnswerItem = ({ sx: { fontSize: "18px", height: "21px", py: 0 }, }} /> - {emoji && isTablet && ( - setOpen(true)} - sx={{ - display: "flex", - alignItems: "center", - m: "8px", - position: "relative", - }} - > - - {variant.emoji ? ( - - {variant.emoji} - - ) : ( - - )} - - + - - event.stopPropagation()} - onClose={() => setOpen(false)} - anchorOrigin={{ - vertical: "bottom", - horizontal: "left", - }} - sx={{ - display: open ? "block" : "none", - ".MuiPaper-root.MuiPaper-rounded": { - borderRadius: "10px", - }, - }} - > - { - setOpen(false); - const cloneVariants = [...variants]; - - cloneVariants[index] = { - ...cloneVariants[index], - emoji: native, - }; - - updateQuestionsList(quizId, totalIndex, { - content: { - ...listQuestions[quizId][totalIndex].content, - variants: cloneVariants, - }, - }); - }} - /> - - - )} + {additionalMobile} )} diff --git a/src/pages/Questions/AnswerDraggableList/index.tsx b/src/pages/Questions/AnswerDraggableList/index.tsx index 479f1312..7086c648 100644 --- a/src/pages/Questions/AnswerDraggableList/index.tsx +++ b/src/pages/Questions/AnswerDraggableList/index.tsx @@ -8,19 +8,22 @@ import { updateVariants } from "@root/questions"; import { reorder } from "./helper"; +import type { ReactNode } from "react"; import type { DropResult } from "react-beautiful-dnd"; import type { Variants } from "@root/questions"; type AnswerDraggableListProps = { variants: Variants[]; totalIndex: number; - emoji?: boolean; + additionalContent?: (variant: Variants, index: number) => ReactNode; + additionalMobile?: (variant: Variants, index: number) => ReactNode; }; export const AnswerDraggableList = ({ variants, totalIndex, - emoji = false, + additionalContent, + additionalMobile, }: AnswerDraggableListProps) => { const quizId = Number(useParams().quizId); @@ -44,7 +47,8 @@ export const AnswerDraggableList = ({ totalIndex={totalIndex} variants={variants} variant={variant} - emoji={emoji} + additionalContent={additionalContent?.(variant, index)} + additionalMobile={additionalMobile?.(variant, index)} /> ))} {provided.placeholder} diff --git a/src/pages/Questions/Emoji/Emoji.tsx b/src/pages/Questions/Emoji/Emoji.tsx index a546df2f..d01f7cc7 100644 --- a/src/pages/Questions/Emoji/Emoji.tsx +++ b/src/pages/Questions/Emoji/Emoji.tsx @@ -1,21 +1,39 @@ import { useState } from "react"; import { useParams } from "react-router-dom"; -import { Box, Link, Typography, useMediaQuery, useTheme } from "@mui/material"; +import { + Box, + Link, + Typography, + Popover, + useMediaQuery, + useTheme, +} from "@mui/material"; + import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import ButtonsOptions from "../ButtonsOptions"; import SwitchEmoji from "./switchEmoji"; import { AnswerDraggableList } from "../AnswerDraggableList"; +import { EmojiPicker } from "@ui_kit/EmojiPicker"; +import { EmojiIcons } from "@icons/EmojiIocns"; + import { questionStore, updateQuestionsList } from "@root/questions"; +import AddEmoji from "../../../assets/icons/questionsPage/addEmoji"; + interface Props { totalIndex: number; } export default function Emoji({ totalIndex }: Props) { const [switchState, setSwitchState] = useState("setting"); + const [open, setOpen] = useState(false); + const [anchorElement, setAnchorElement] = useState( + null + ); + const [currentIndex, setCurrentIndex] = useState(0); const { listQuestions } = questionStore(); const quizId = Number(useParams().quizId); const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const isTablet = useMediaQuery(theme.breakpoints.down(790)); const SSHC = (data: string) => { setSwitchState(data); @@ -27,8 +45,136 @@ export default function Emoji({ totalIndex }: Props) { ( + <> + {!isTablet && ( + + { + setAnchorElement(currentTarget); + setCurrentIndex(index); + setOpen(true); + }} + > + + {variant.emoji && ( + {variant.emoji} + )} + + + + + )} + + )} + additionalMobile={(variant, index) => ( + <> + {isTablet && ( + { + setAnchorElement(currentTarget); + setCurrentIndex(index); + setOpen(true); + }} + sx={{ + display: "flex", + alignItems: "center", + m: "8px", + position: "relative", + }} + > + + {variant.emoji ? ( + + {variant.emoji} + + ) : ( + + )} + + + + + + )} + + )} /> + event.stopPropagation()} + onClose={() => setOpen(false)} + anchorOrigin={{ + vertical: "bottom", + horizontal: "right", + }} + sx={{ + ".MuiPaper-root.MuiPaper-rounded": { + borderRadius: "10px", + }, + }} + > + { + setOpen(false); + const cloneVariants = [ + ...listQuestions[quizId][totalIndex].content.variants, + ]; + + cloneVariants[currentIndex] = { + ...cloneVariants[currentIndex], + emoji: native, + }; + + updateQuestionsList(quizId, totalIndex, { + content: { + ...listQuestions[quizId][totalIndex].content, + variants: cloneVariants, + }, + }); + }} + /> + Добавьте ответ - {isMobile ? null : ( + {!isTablet && ( <> Date: Thu, 28 Sep 2023 15:33:02 +0300 Subject: [PATCH 15/16] fix: DraggableListItem with memo --- src/pages/Questions/ButtonsOptions.tsx | 1 - .../DraggableList/DraggableListItem.tsx | 16 +++++++++---- src/pages/Questions/DraggableList/index.tsx | 3 ++- .../OptionsPicture/OptionsPicture.tsx | 1 - src/pages/Questions/QuestionsPage.tsx | 1 - src/pages/Questions/TypeQuestions.tsx | 1 - src/pages/startPage/StartPageSettings.tsx | 2 -- src/pages/startPage/dropZone.tsx | 5 ---- src/pages/startPage/dropfavicon.tsx | 23 ------------------- src/pages/startPage/stepOne.tsx | 2 -- src/ui_kit/Modal/CropModal.tsx | 3 --- src/ui_kit/reactImageFileResizer.ts | 1 - 12 files changed, 13 insertions(+), 46 deletions(-) diff --git a/src/pages/Questions/ButtonsOptions.tsx b/src/pages/Questions/ButtonsOptions.tsx index dda5a917..20727762 100644 --- a/src/pages/Questions/ButtonsOptions.tsx +++ b/src/pages/Questions/ButtonsOptions.tsx @@ -51,7 +51,6 @@ export default function ButtonsOptions({ const openedModal = () => { resetSomeField({ openedModalSettings: "open" }); - console.log(openedModalSettings); }; const theme = useTheme(); diff --git a/src/pages/Questions/DraggableList/DraggableListItem.tsx b/src/pages/Questions/DraggableList/DraggableListItem.tsx index ad0eeb68..de222151 100644 --- a/src/pages/Questions/DraggableList/DraggableListItem.tsx +++ b/src/pages/Questions/DraggableList/DraggableListItem.tsx @@ -1,3 +1,4 @@ +import { memo } from "react"; import { useParams } from "react-router-dom"; import { Draggable } from "react-beautiful-dnd"; import { Box, ListItem, Typography, useTheme } from "@mui/material"; @@ -6,18 +7,23 @@ import QuestionsPageCard from "./QuestionPageCard"; import { questionStore, updateQuestionsList } from "@root/questions"; +import {Question} from "@root/questions" + type DraggableListItemProps = { index: number; isDragging: boolean; + questionData: Question; }; -export const DraggableListItem = ({ +export default memo(({ index, isDragging, + questionData }: DraggableListItemProps) => { const quizId = Number(useParams().quizId); - const { listQuestions } = questionStore(); const theme = useTheme(); + console.log("Мой индекс "+index) + console.log(questionData) return ( @@ -27,7 +33,7 @@ export const DraggableListItem = ({ {...provided.draggableProps} sx={{ userSelect: "none", padding: 0 }} > - {listQuestions[quizId][index].deleted ? ( + {questionData.deleted ? ( { updateQuestionsList(quizId, index, { - ...listQuestions[quizId][index], + ...questionData, deleted: false, }); }} @@ -79,4 +85,4 @@ export const DraggableListItem = ({ )} ); -}; +}); diff --git a/src/pages/Questions/DraggableList/index.tsx b/src/pages/Questions/DraggableList/index.tsx index f6b5842b..7ff2474c 100644 --- a/src/pages/Questions/DraggableList/index.tsx +++ b/src/pages/Questions/DraggableList/index.tsx @@ -2,7 +2,7 @@ import { useParams } from "react-router-dom"; import { Box } from "@mui/material"; import { DragDropContext, Droppable } from "react-beautiful-dnd"; -import { DraggableListItem } from "./DraggableListItem"; +import DraggableListItem from "./DraggableListItem"; import { questionStore, updateQuestionsListDragAndDrop } from "@root/questions"; @@ -36,6 +36,7 @@ export const DraggableList = () => { key={index} index={index} isDragging={snapshot.isDraggingOver} + questionData={_} /> ))} {provided.placeholder} diff --git a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx index 81db9f50..27d75747 100644 --- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx +++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx @@ -53,7 +53,6 @@ export default function OptionsPicture({ totalIndex }: Props) { } }; - console.log(); return ( <> diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx index 1ecb607c..a712be3e 100755 --- a/src/pages/Questions/QuestionsPage.tsx +++ b/src/pages/Questions/QuestionsPage.tsx @@ -77,7 +77,6 @@ export default function QuestionsPage() { { createQuestion(quizId); - console.log(listQuestions); }} > diff --git a/src/pages/Questions/TypeQuestions.tsx b/src/pages/Questions/TypeQuestions.tsx index 74c28e4a..fe5a9989 100755 --- a/src/pages/Questions/TypeQuestions.tsx +++ b/src/pages/Questions/TypeQuestions.tsx @@ -101,7 +101,6 @@ export default function TypeQuestions({ totalIndex }: Props) { { - console.log(value); updateQuestionsList(quizId, totalIndex, { type: value }); }} icon={icon} diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx index 113cd9b6..ec1239a1 100755 --- a/src/pages/startPage/StartPageSettings.tsx +++ b/src/pages/startPage/StartPageSettings.tsx @@ -68,7 +68,6 @@ export default function StartPageSettings({ handleNext }: HandleNext) { const theme = useTheme(); const designType = listQuizes[params].startpage; const StartPageClone = listQuizes[params]; - console.log(StartPageClone); const [backgroundType, setBackgroundType] = useState( listQuizes[params].config.startpage.background.type ); @@ -616,7 +615,6 @@ export default function StartPageSettings({ handleNext }: HandleNext) { label="Кликабельный" checked={listQuizes[params].config.info.clickable} handleChange={(e) => { - console.log(e.target.checked); let SPageClone = listQuizes[params].config; SPageClone.info.clickable = e.target.checked; updateQuizesList(params, { config: SPageClone }); diff --git a/src/pages/startPage/dropZone.tsx b/src/pages/startPage/dropZone.tsx index 3a4f785c..d354b077 100644 --- a/src/pages/startPage/dropZone.tsx +++ b/src/pages/startPage/dropZone.tsx @@ -28,22 +28,18 @@ export default ({ text, sx, heightImg, widthImg }: Props) => { const [ready, setReady] = useState(false); const dragenterHC = () => { - // console.log("onDragEnter") setReady(true); }; const dragexitHC = () => { - // console.log("onDragExit") setReady(false); }; const dropHC = (event: React.DragEvent) => { event.preventDefault(); - // console.log("onDrop") setReady(false); const file = event.dataTransfer.files[0]; - console.log(event.dataTransfer.files[0]); if (file.size < 5242880) { setData(URL.createObjectURL(file)); } else { @@ -53,7 +49,6 @@ export default ({ text, sx, heightImg, widthImg }: Props) => { const dragOverHC = (event: React.DragEvent) => { event.preventDefault(); - // console.log("onDragOver") }; return ( diff --git a/src/pages/startPage/dropfavicon.tsx b/src/pages/startPage/dropfavicon.tsx index 2d67ae07..2eace103 100644 --- a/src/pages/startPage/dropfavicon.tsx +++ b/src/pages/startPage/dropfavicon.tsx @@ -146,14 +146,11 @@ export default ({ text, sx, heightImg, widthImg }: Props) => { const [favList, setFavList] = useState([]); useEffect(() => { - console.log(favList); if (favList.length === 18) { - console.log("сейчас я сработаю"); const zip = new JSZip(); //создание зип архива favList.forEach((uri, i) => { - console.log(i); const idx = uri.indexOf("base64,") + "base64,".length; //обработка строки картинки const content = uri.substring(idx); //обработка строки картинки zip.file(`fav${i}.jpg`, content, { base64: true }); //сохранение картинки в архив с именем "fav.jpg" @@ -201,46 +198,26 @@ export default ({ text, sx, heightImg, widthImg }: Props) => { const [ready, setReady] = useState(false); const dragenterHC = () => { - // console.log("onDragEnter") setReady(true); }; const dragexitHC = () => { - // console.log("onDragExit") setReady(false); }; const dropHC = (event: React.DragEvent) => { event.preventDefault(); - // console.log("onDrop") setReady(false); const file = event.dataTransfer.files[0]; - console.log(event.dataTransfer.files[0]); if (file.size < 5242880) { setData(URL.createObjectURL(file)); } else { enqueueSnackbar("Размер картинки слишком велик"); } - // try { - // Resizer.imageFileResizer( - // file, - // 50, - // 50, - // "JPEG", - // 100, - // 0, - // callback, - // ); - // - // } catch (err) { - // console.log(err); - // } - // }; const dragOverHC = (event: React.DragEvent) => { event.preventDefault(); - // console.log("onDragOver") }; return ( diff --git a/src/pages/startPage/stepOne.tsx b/src/pages/startPage/stepOne.tsx index e8cc287a..bf13c9c0 100755 --- a/src/pages/startPage/stepOne.tsx +++ b/src/pages/startPage/stepOne.tsx @@ -13,10 +13,8 @@ export default function StepOne({ handleNext }: HandleNext) { const theme = useTheme(); const params = Number(useParams().quizId); - console.log(params) const {listQuizes, updateQuizesList,} = quizStore() - console.log(listQuizes) return ( <> = ({ opened, onClose, picture }) => { const aspect = imageWidth / imageHeight; - console.log(aspect); - - console.log(width); if (aspect <= 1.333) { setWidth(240); diff --git a/src/ui_kit/reactImageFileResizer.ts b/src/ui_kit/reactImageFileResizer.ts index 0c2e8ebf..7b4b8498 100644 --- a/src/ui_kit/reactImageFileResizer.ts +++ b/src/ui_kit/reactImageFileResizer.ts @@ -51,7 +51,6 @@ class Resizer { Yoffset = Math.round((size - height) / 2) } - console.log(height, width) ctx.drawImage(image, Xoffset, Yoffset, width, height); From 5b3da138bac91b49c5cb26907d03816acf23112c Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Thu, 28 Sep 2023 16:52:50 +0300 Subject: [PATCH 16/16] fix: emoji displaying --- src/assets/icons/questionsPage/plus.tsx | 32 +++++++++++++++++++++++++ src/pages/Questions/Emoji/Emoji.tsx | 22 ++++++++++++++--- 2 files changed, 51 insertions(+), 3 deletions(-) create mode 100644 src/assets/icons/questionsPage/plus.tsx diff --git a/src/assets/icons/questionsPage/plus.tsx b/src/assets/icons/questionsPage/plus.tsx new file mode 100644 index 00000000..eddbe273 --- /dev/null +++ b/src/assets/icons/questionsPage/plus.tsx @@ -0,0 +1,32 @@ +import { Box } from "@mui/material"; + +export default function Plus() { + return ( + + + + + + + ); +} diff --git a/src/pages/Questions/Emoji/Emoji.tsx b/src/pages/Questions/Emoji/Emoji.tsx index d01f7cc7..cdfa43c8 100644 --- a/src/pages/Questions/Emoji/Emoji.tsx +++ b/src/pages/Questions/Emoji/Emoji.tsx @@ -19,6 +19,7 @@ import { EmojiIcons } from "@icons/EmojiIocns"; import { questionStore, updateQuestionsList } from "@root/questions"; import AddEmoji from "../../../assets/icons/questionsPage/addEmoji"; +import PlusImage from "../../../assets/icons/questionsPage/plus"; interface Props { totalIndex: number; @@ -64,10 +65,25 @@ export default function Emoji({ totalIndex }: Props) { gap: "5px", }} > - {variant.emoji && ( - {variant.emoji} + {variant.emoji ? ( + + {variant.emoji} + + + + + ) : ( + )} -