import * as React from 'react'; import {useRef, useState} from 'react'; import Typography from '@mui/material/Typography'; import {rawEmojis} from '../app/emojis'; import Box from "@mui/material/Box"; import TextField from "@mui/material/TextField"; import {ClickAwayListener, Fade, InputAdornment, styled} from "@mui/material"; import IconButton from "@mui/material/IconButton"; import {Close} from "@mui/icons-material"; import Popper from "@mui/material/Popper"; import {splitNoEmpty} from "../app/utils"; import {useTranslation} from "react-i18next"; // Create emoji list by category and create a search base (string with all search words) // // This also filters emojis that are not supported by Desktop Chrome. // This is a hack, but on Ubuntu 18.04, with Chrome 99, only Emoji <= 11 are supported. const emojisByCategory = {}; const isDesktopChrome = /Chrome/.test(navigator.userAgent) && !/Mobile/.test(navigator.userAgent); const maxSupportedVersionForDesktopChrome = 11; rawEmojis.forEach(emoji => { if (!emojisByCategory[emoji.category]) { emojisByCategory[emoji.category] = []; } try { const unicodeVersion = parseFloat(emoji.unicode_version); const supportedEmoji = unicodeVersion <= maxSupportedVersionForDesktopChrome || !isDesktopChrome; if (supportedEmoji) { const searchBase = `${emoji.description.toLowerCase()} ${emoji.aliases.join(" ")} ${emoji.tags.join(" ")}`; const emojiWithSearchBase = { ...emoji, searchBase: searchBase }; emojisByCategory[emoji.category].push(emojiWithSearchBase); } } catch (e) { // Nothing. Ignore. } }); const EmojiPicker = (props) => { const { t } = useTranslation(); const open = Boolean(props.anchorEl); const [search, setSearch] = useState(""); const searchRef = useRef(null); const searchFields = splitNoEmpty(search.toLowerCase(), " "); const handleSearchClear = () => { setSearch(""); searchRef.current?.focus(); }; return ( {({ TransitionProps }) => ( setSearch(ev.target.value)} type="text" variant="standard" fullWidth sx={{ marginTop: 0, marginBottom: "12px", paddingRight: 2 }} InputProps={{ endAdornment: }} /> {Object.keys(emojisByCategory).map(category => )} )} ); }; const Category = (props) => { const showTitle = props.search.length === 0; return ( <> {showTitle && {props.title} } {props.emojis.map(emoji => props.onPick(emoji.aliases[0])} /> )} ); }; const Emoji = (props) => { const emoji = props.emoji; const matches = emojiMatches(emoji, props.search); const title = `${emoji.description} (${emoji.aliases[0]})`; return ( {props.emoji.emoji} ); }; const EmojiDiv = styled("div")({ fontSize: "30px", width: "30px", height: "30px", marginTop: "8px", marginBottom: "8px", marginRight: "8px", lineHeight: "30px", cursor: "pointer", opacity: 0.85, "&:hover": { opacity: 1 } }); const emojiMatches = (emoji, words) => { if (words.length === 0) { return true; } for (const word of words) { if (emoji.searchBase.indexOf(word) === -1) { return false; } } return true; } export default EmojiPicker;