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