diff --git a/lib/components/ViewPublicationPage/ViewPublicationPage.tsx b/lib/components/ViewPublicationPage/ViewPublicationPage.tsx index 70763eb..73e64d2 100644 --- a/lib/components/ViewPublicationPage/ViewPublicationPage.tsx +++ b/lib/components/ViewPublicationPage/ViewPublicationPage.tsx @@ -19,6 +19,9 @@ import NextButton from "./tools/NextButton"; import PrevButton from "./tools/PrevButton"; import unscreen from "@/ui_kit/unscreen"; import { useQuizStore } from "@/stores/useQuizStore"; +import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill"; + +polyfillCountryFlagEmojis(); export default function ViewPublicationPage() { const { settings, recentlyCompleted, quizId, preview, changeFaviconAndTitle } = useQuizStore(); diff --git a/lib/components/ViewPublicationPage/questions/Emoji/EmojiPicker.tsx b/lib/components/ViewPublicationPage/questions/Emoji/EmojiPicker.tsx new file mode 100644 index 0000000..4d960a6 --- /dev/null +++ b/lib/components/ViewPublicationPage/questions/Emoji/EmojiPicker.tsx @@ -0,0 +1,49 @@ +import EmojiPickerOriginal from "@emoji-mart/react"; +import { Box } from "@mui/material"; + +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) => ( + + + +); + +const ignoreEmojis = [ + "two_men_holding_hands", + "two_women_holding_hands", + "man-kiss-man", + "woman-kiss-woman", + "man-heart-man", + "woman-heart-woman", + "man-man-boy", + "man-man-girl", + "man-man-girl-boy", + "man-man-girl-girl", + "man-man-boy-boy", + "woman-woman-boy", + "woman-woman-girl", + "woman-woman-girl-boy", + "woman-woman-girl-girl", + "woman-woman-boy-boy", + "rainbow-flag", + "transgender_flag", + "transgender_symbol", +]; diff --git a/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx b/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx index 081de0a..8512745 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 { OwnEmojiPicker } from "./OwnEmojiPicker"; polyfillCountryFlagEmojis(); @@ -165,15 +166,19 @@ export const EmojiVariant = ({ cursor: "pointer", }} > - - {variant.extendedText && {variant.extendedText}} - + {own ? ( + + ) : ( + + {variant.extendedText && {variant.extendedText}} + + )} {own && ( void; +} + +export const OwnEmojiPicker = ({ emoji = "", onEmojiSelect }: Props) => { + const theme = useTheme(); + const [isPickerOpen, setIsPickerOpen] = useState(false); + + const handleEmojiSelect = (emojiData: any) => { + onEmojiSelect?.(emojiData.native); + setIsPickerOpen(false); + }; + + const handleClick = (e: React.MouseEvent) => { + e.stopPropagation(); + setIsPickerOpen(true); + }; + + const handleClose = (e: React.MouseEvent) => { + e.stopPropagation(); + setIsPickerOpen(false); + }; + + return ( + <> + + {emoji} + + + + e.stopPropagation()} + sx={{ + bgcolor: "background.paper", + borderRadius: 2, + p: 2, + boxShadow: 24, + }} + > + + + + + ); +}; diff --git a/yarn.lock b/yarn.lock index 78c6749..29948a2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -275,7 +275,7 @@ "@emoji-mart/react@^1.1.1": version "1.1.1" - resolved "https://registry.npmjs.org/@emoji-mart/react/-/react-1.1.1.tgz" + resolved "https://registry.npmjs.org/@emoji-mart/react/-/react-1.1.1.tgz#ddad52f93a25baf31c5383c3e7e4c6e05554312a" integrity sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g== "@emotion/babel-plugin@^11.11.0":