возможность убрать смайлик
This commit is contained in:
parent
7686c9e326
commit
48ae1359ac
5
.vscode/extensions.json
vendored
Normal file
5
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"godrix.svgr-preview"
|
||||
]
|
||||
}
|
18
src/assets/icons/SmallAddPluse.tsx
Normal file
18
src/assets/icons/SmallAddPluse.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import { SvgIcon, SxProps } from "@mui/material";
|
||||
|
||||
export default function SmallAddPluse({ sx }: { sx: SxProps }) {
|
||||
return (
|
||||
<SvgIcon
|
||||
sx={{
|
||||
width: "11px",
|
||||
height: "11px",
|
||||
|
||||
...sx
|
||||
}}
|
||||
>
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.518 9.612C4.398 9.612 4.296 9.576 4.212 9.504C4.14 9.42 4.104 9.318 4.104 9.198V5.454H0.414C0.294 5.454 0.192 5.418 0.108 5.346C0.036 5.262 0 5.16 0 5.04V4.464C0 4.344 0.036 4.248 0.108 4.176C0.192 4.092 0.294 4.05 0.414 4.05H4.104V0.414C4.104 0.294 4.14 0.198 4.212 0.126C4.296 0.0420001 4.398 0 4.518 0H5.148C5.268 0 5.364 0.0420001 5.436 0.126C5.52 0.198 5.562 0.294 5.562 0.414V4.05H9.27C9.39 4.05 9.486 4.092 9.558 4.176C9.642 4.248 9.684 4.344 9.684 4.464V5.04C9.684 5.16 9.642 5.262 9.558 5.346C9.486 5.418 9.39 5.454 9.27 5.454H5.562V9.198C5.562 9.318 5.52 9.42 5.436 9.504C5.364 9.576 5.268 9.612 5.148 9.612H4.518Z" fill="white" />
|
||||
</svg>
|
||||
</SvgIcon>
|
||||
);
|
||||
}
|
@ -41,6 +41,7 @@ const AnswerItem = memo<AnswerItemProps>(
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Draggable
|
||||
draggableId={String(index)}
|
||||
@ -63,7 +64,7 @@ const AnswerItem = memo<AnswerItemProps>(
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
value={ isOwn ? ownPlaceholder : variant.answer}
|
||||
value={isOwn ? ownPlaceholder : variant.answer}
|
||||
fullWidth
|
||||
focused={false}
|
||||
placeholder={isOwn ? "Добавьте текст-подсказку для ввода “своего ответа”" : "Добавьте ответ"}
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { ComponentPropsWithoutRef, useMemo } from "react";
|
||||
import { ComponentPropsWithoutRef, MouseEvent, useMemo } from "react";
|
||||
import AnswerItem from "../../AnswerDraggableList/AnswerItem";
|
||||
import VariantAdornment from "./VariantAdornment";
|
||||
import VariantAdornmentMobile from "./VariantAdornmentMobile";
|
||||
@ -31,6 +31,17 @@ export default function EmojiAnswerItem({
|
||||
}: Props) {
|
||||
|
||||
|
||||
const clearEmoji = (e: MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation()
|
||||
updateQuestion(questionId, (question) => {
|
||||
if (question.type !== "emoji") return;
|
||||
|
||||
const v = question.content.variants.find((v) => v.id === variant.id);
|
||||
if (!v) return;
|
||||
|
||||
v.extendedText = "";
|
||||
});
|
||||
}
|
||||
const addOrEditImageButton = useMemo(() => {
|
||||
return (
|
||||
!isTablet && (
|
||||
@ -41,6 +52,7 @@ export default function EmojiAnswerItem({
|
||||
setSelectedVariant(variant.id);
|
||||
setOpen(true);
|
||||
}}
|
||||
clearEmoji={clearEmoji}
|
||||
/>
|
||||
)
|
||||
);
|
||||
@ -63,6 +75,7 @@ export default function EmojiAnswerItem({
|
||||
setSelectedVariant(variant.id);
|
||||
setOpen(true);
|
||||
}}
|
||||
clearEmoji={clearEmoji}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
@ -1,15 +1,19 @@
|
||||
import SmallAddPluse from "@/assets/icons/SmallAddPluse";
|
||||
import AddEmoji from "@icons/questionsPage/addEmoji";
|
||||
import PlusImage from "@icons/questionsPage/plus";
|
||||
import { Box } from "@mui/material";
|
||||
import { Box, useTheme, IconButton } from "@mui/material";
|
||||
import { MouseEventHandler } from "react";
|
||||
|
||||
export default function VariantAdornment({
|
||||
onClick,
|
||||
extendedText,
|
||||
clearEmoji,
|
||||
}: {
|
||||
onClick: MouseEventHandler<HTMLDivElement>;
|
||||
extendedText: string;
|
||||
clearEmoji: () => void;
|
||||
}) {
|
||||
const theme = useTheme();
|
||||
|
||||
console.log("VariantAdornment extendedText", extendedText)
|
||||
return (
|
||||
@ -44,13 +48,20 @@ export default function VariantAdornment({
|
||||
>
|
||||
{extendedText}
|
||||
</Box>
|
||||
<Box>
|
||||
<PlusImage
|
||||
<IconButton
|
||||
onClick={clearEmoji}
|
||||
sx={{
|
||||
transform: extendedText ? "rotate(45)" : ""
|
||||
height: "100%",
|
||||
width: "20px",
|
||||
borderRadius: "0 3px 3px 0",
|
||||
bgcolor: theme.palette.brightPurple.main
|
||||
}}>
|
||||
<SmallAddPluse
|
||||
sx={{
|
||||
transform: extendedText ? "rotate(45deg)" : ""
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</IconButton>
|
||||
</Box>
|
||||
) : (
|
||||
<AddEmoji />
|
||||
|
@ -1,14 +1,19 @@
|
||||
import SmallAddPluse from "@/assets/icons/SmallAddPluse";
|
||||
import { EmojiIcons } from "@icons/EmojiIocns";
|
||||
import { Box } from "@mui/material";
|
||||
import { Box, IconButton, useTheme } from "@mui/material";
|
||||
import { MouseEventHandler } from "react";
|
||||
|
||||
export default function VariantAdornmentMobile({
|
||||
onClick,
|
||||
extendedText,
|
||||
clearEmoji
|
||||
}: {
|
||||
onClick: MouseEventHandler<HTMLDivElement>;
|
||||
extendedText: string;
|
||||
clearEmoji: () => void;
|
||||
}) {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box
|
||||
onClick={onClick}
|
||||
@ -61,7 +66,20 @@ export default function VariantAdornmentMobile({
|
||||
backgroundColor: "#7E2AEA",
|
||||
}}
|
||||
>
|
||||
+
|
||||
<IconButton
|
||||
onClick={clearEmoji}
|
||||
sx={{
|
||||
height: "100%",
|
||||
width: "20px",
|
||||
borderRadius: "0 3px 3px 0",
|
||||
bgcolor: theme.palette.brightPurple.main
|
||||
}}>
|
||||
<SmallAddPluse
|
||||
sx={{
|
||||
transform: extendedText ? "rotate(45deg)" : ""
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user