diff --git a/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx b/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx index dd88427..7329023 100644 --- a/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx +++ b/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx @@ -18,6 +18,7 @@ import { quizThemes } from "@utils/themes/Publication/themePublication"; import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill"; import type { MouseEvent } from "react"; import { useTranslation } from "react-i18next"; +import { useEffect } from "react"; import { OwnEmojiPicker } from "./OwnEmojiPicker"; polyfillCountryFlagEmojis(); @@ -138,6 +139,12 @@ export const EmojiVariant = ({ updateOwnVariant(variant.id, currentOwnAnswer, emoji); }; + const handleEmojiRemove = () => { + // Сохраняем текущий answer, очищаем только extendedText (эмодзи) + const currentOwnAnswer = ownVariants.find((v: OwnVariant) => v.id === variant.id)?.variant.answer || ""; + updateOwnVariant(variant.id, currentOwnAnswer, ""); + }; + const isSelected = isMulti ? Array.isArray(answer) && answer.includes(variant.id) : answer === variant.id; return ( @@ -174,6 +181,7 @@ export const EmojiVariant = ({ ) : ( void; + onEmojiRemove?: () => void; } -export const OwnEmojiPicker = ({ emoji = "", onEmojiSelect }: Props) => { +export const OwnEmojiPicker = ({ emoji = "", onEmojiSelect, onEmojiRemove }: Props) => { const theme = useTheme(); const { t } = useTranslation(); const [isPickerOpen, setIsPickerOpen] = useState(false); @@ -28,23 +30,51 @@ export const OwnEmojiPicker = ({ emoji = "", onEmojiSelect }: Props) => { setIsPickerOpen(false); }; + const handleRemoveEmoji = (e: React.MouseEvent) => { + e.stopPropagation(); + onEmojiRemove?.(); + }; + return ( <> - - {emoji || t("select emoji")} - + + + {emoji || t("select emoji")} + + + {onEmojiRemove && ( + + + + )} +