From 6c46a4b32e19a8a36b99fb6446cdfa15a81b4a5f Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Thu, 28 Sep 2023 15:29:48 +0300 Subject: [PATCH] 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 && ( <>