astra/ntfy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Emoji picker

Browse source
This commit is contained in:
Philipp Heckel 2022-04-04 10:04:01 -04:00
parent d44ee2bbf6
commit f2d4af04e3
6 changed files with 197 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

24
web/src/components/SendDialog.js
View file

@ -24,6 +24,7 @@ import AttachmentIcon from "./AttachmentIcon";
import DialogFooter from "./DialogFooter";
import api from "../app/Api";
import userManager from "../app/UserManager";
import EmojiPicker from "./EmojiPicker";
const SendDialog = (props) => {
const [topicUrl, setTopicUrl] = useState("");
@ -54,6 +55,8 @@ const SendDialog = (props) => {
const [status, setStatus] = useState("");
const disabled = !!activeRequest;
const [emojiPickerAnchorEl, setEmojiPickerAnchorEl] = useState(null);
const [dropZone, setDropZone] = useState(false);
const [sendButtonEnabled, setSendButtonEnabled] = useState(true);
@ -191,6 +194,18 @@ const SendDialog = (props) => {
}
};
const handleEmojiClick = (ev) => {
setEmojiPickerAnchorEl(ev.currentTarget);
};
const handleEmojiPick = (emoji) => {
setTags(tags => (tags.trim()) ? `${tags.trim()}, ${emoji}` : emoji);
};
const handleEmojiClose = () => {
setEmojiPickerAnchorEl(null);
};
return (
<>
{dropZone && <DropArea
@ -245,7 +260,14 @@ const SendDialog = (props) => {
multiline
/>
<div style={{display: 'flex'}}>
<DialogIconButton disabled={disabled} onClick={() => null}><InsertEmoticonIcon/></DialogIconButton>
<EmojiPicker
anchorEl={emojiPickerAnchorEl}
onEmojiPick={handleEmojiPick}
onClose={handleEmojiClose}
/>
<DialogIconButton disabled={disabled} onClick={handleEmojiClick}>
<InsertEmoticonIcon/>
</DialogIconButton>
<TextField
margin="dense"
label="Tags"