Emoji picker

web/src/components/EmojiPicker.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import Popover from '@mui/material/Popover';
+import Typography from '@mui/material/Typography';
+import {rawEmojis} from '../app/emojis';
+import Box from "@mui/material/Box";
+
+const emojisByCategory = {};
+rawEmojis.forEach(emoji => {
+    if (!emojisByCategory[emoji.category]) {
+        emojisByCategory[emoji.category] = [];
+    }
+    emojisByCategory[emoji.category].push(emoji);
+});
+
+const EmojiPicker = (props) => {
+    const open = Boolean(props.anchorEl);
+
+    return (
+        <>
+            <Popover
+                open={open}
+                anchorEl={props.anchorEl}
+                onClose={props.onClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }}
+            >
+                <Box sx={{ padding: 2, paddingRight: 0, width: "370px", maxHeight: "300px" }}>
+                    {Object.keys(emojisByCategory).map(category =>
+                        <Category title={category} emojis={emojisByCategory[category]} onPick={props.onEmojiPick}/>
+                    )}
+                </Box>
+            </Popover>
+        </>
+    );
+};
+
+const Category = (props) => {
+    return (
+        <>
+            <Typography variant="body2">{props.title}</Typography>
+            <Box sx={{ display: "flex", flexWrap: "wrap", paddingRight: 0, marginBottom: 1 }}>
+                {props.emojis.map(emoji => <Emoji emoji={emoji} onClick={() => props.onPick(emoji.aliases[0])}/>)}
+            </Box>
+        </>
+    );
+};
+
+const Emoji = (props) => {
+    const emoji = props.emoji;
+    return (
+        <div
+            onClick={props.onClick}
+            title={`${emoji.description} (${emoji.aliases[0]})`}
+            style={{
+                fontSize: "30px",
+                width: "30px",
+                height: "30px",
+                marginTop: "8px",
+                marginBottom: "8px",
+                marginRight: "8px",
+                lineHeight: "30px",
+                cursor: "pointer"
+            }}
+        >
+            {props.emoji.emoji}
+        </div>
+    );
+};
+
+export default EmojiPicker;