Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 1 | import React from 'react' |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 2 | import { makeStyles } from '@material-ui/core/styles' |
| 3 | import { IconButton, InputBase, Paper, Popper } from '@material-ui/core' |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 4 | import { Send, EmojiEmotionsRounded } from '@material-ui/icons' |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 5 | import EmojiPicker from 'emoji-picker-react' |
Adrien Béraud | 5e9e19b | 2021-04-22 01:38:53 -0400 | [diff] [blame] | 6 | import authManager from '../AuthManager' |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 7 | |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 8 | const useStyles = makeStyles((theme) => ({ |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 9 | root: { |
Adrien Béraud | 4e287b9 | 2021-04-24 16:15:56 -0400 | [diff] [blame] | 10 | marginLeft: 16, |
| 11 | marginRight: 16, |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 12 | padding: '2px 4px', |
| 13 | display: 'flex', |
| 14 | alignItems: 'center', |
| 15 | borderRadius: 8 |
| 16 | }, |
| 17 | input: { |
| 18 | marginLeft: theme.spacing(1), |
| 19 | flex: 1, |
| 20 | }, |
| 21 | iconButton: { |
| 22 | padding: 10, |
| 23 | }, |
| 24 | divider: { |
| 25 | height: 28, |
| 26 | margin: 4, |
| 27 | }, |
Adrien Béraud | 5e9e19b | 2021-04-22 01:38:53 -0400 | [diff] [blame] | 28 | })) |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 29 | |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 30 | export default function SendMessageForm(props) { |
| 31 | const classes = useStyles() |
| 32 | const [anchorEl, setAnchorEl] = React.useState(null) |
| 33 | const [currentMessage, setCurrentMessage] = React.useState("") |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 34 | |
Adrien Béraud | 5e9e19b | 2021-04-22 01:38:53 -0400 | [diff] [blame] | 35 | const handleOpenEmojiPicker = e => setAnchorEl(anchorEl ? null : e.currentTarget) |
| 36 | const handleClose = () => setAnchorEl(null) |
| 37 | |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 38 | const handleSubmit = e => { |
| 39 | e.preventDefault() |
Adrien Béraud | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 40 | if (currentMessage) { |
| 41 | props.onSend(currentMessage) |
| 42 | setCurrentMessage('') |
| 43 | } |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 44 | } |
Adrien Béraud | 5e9e19b | 2021-04-22 01:38:53 -0400 | [diff] [blame] | 45 | const handleInputChange = (event) => setCurrentMessage(event.target.value) |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 46 | const onEmojiClick = (e, emojiObject) => { |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 47 | setCurrentMessage(currentMessage + emojiObject.emoji) |
| 48 | handleClose() |
| 49 | } |
| 50 | const open = Boolean(anchorEl) |
| 51 | const id = open ? 'simple-popover' : undefined |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 52 | |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 53 | return ( |
| 54 | <div className="send-message-form"> |
| 55 | <Paper component="form" |
| 56 | onSubmit={handleSubmit} |
| 57 | className="send-message-card" |
| 58 | className={classes.root}> |
| 59 | <IconButton aria-describedby={id} variant="contained" color="primary" onClick={handleOpenEmojiPicker}> |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 60 | <EmojiEmotionsRounded /> |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 61 | </IconButton> |
| 62 | <Popper |
| 63 | id={id} |
| 64 | open={open} |
| 65 | anchorEl={anchorEl} |
| 66 | onClose={handleClose} |
| 67 | > |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 68 | <EmojiPicker.default |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 69 | onEmojiClick={onEmojiClick} |
| 70 | disableAutoFocus={true} |
| 71 | disableSkinTonePicker={true} |
| 72 | native |
| 73 | /> |
| 74 | </Popper> |
| 75 | |
| 76 | <InputBase |
| 77 | className={classes.input} |
| 78 | placeholder="Write something nice" |
| 79 | height="35" |
| 80 | value={currentMessage} |
| 81 | onChange={handleInputChange} |
| 82 | /> |
| 83 | <IconButton type="submit" className={classes.iconButton} aria-label="search"> |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 84 | <Send /> |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 85 | </IconButton> |
| 86 | </Paper> |
| 87 | </div> |
| 88 | ) |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 89 | } |