ntfy/web/src/components/EmojiPicker.js
Philipp Heckel f2d4af04e3 Emoji picker
2022-04-04 10:04:01 -04:00

73 lines
2.1 KiB
JavaScript

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;