Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 1 | import React from 'react' |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 2 | import makeStyles from '@mui/styles/makeStyles'; |
| 3 | import { IconButton, InputBase, Paper, Popper } from '@mui/material' |
| 4 | import { Send, EmojiEmotionsRounded } from '@mui/icons-material' |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 5 | import EmojiPicker from 'emoji-picker-react' |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 6 | |
Adrien Béraud | 35e7d7c | 2021-04-13 03:28:39 -0400 | [diff] [blame] | 7 | const useStyles = makeStyles((theme) => ({ |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 8 | root: { |
Adrien Béraud | 4e287b9 | 2021-04-24 16:15:56 -0400 | [diff] [blame] | 9 | marginLeft: 16, |
| 10 | marginRight: 16, |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 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 | 88a5244 | 2021-04-26 12:11:41 -0400 | [diff] [blame] | 39 | if (currentMessage) { |
| 40 | props.onSend(currentMessage) |
| 41 | setCurrentMessage('') |
| 42 | } |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 43 | } |
Adrien Béraud | 5e9e19b | 2021-04-22 01:38:53 -0400 | [diff] [blame] | 44 | const handleInputChange = (event) => setCurrentMessage(event.target.value) |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 45 | const onEmojiClick = (e, emojiObject) => { |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 46 | setCurrentMessage(currentMessage + emojiObject.emoji) |
| 47 | handleClose() |
| 48 | } |
| 49 | const open = Boolean(anchorEl) |
| 50 | const id = open ? 'simple-popover' : undefined |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 51 | |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 52 | return ( |
| 53 | <div className="send-message-form"> |
| 54 | <Paper component="form" |
| 55 | onSubmit={handleSubmit} |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 56 | className={classes.root}> |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 57 | <IconButton |
| 58 | aria-describedby={id} |
| 59 | variant="contained" |
| 60 | color="primary" |
| 61 | onClick={handleOpenEmojiPicker} |
| 62 | size="large"> |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 63 | <EmojiEmotionsRounded /> |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 64 | </IconButton> |
| 65 | <Popper |
| 66 | id={id} |
| 67 | open={open} |
| 68 | anchorEl={anchorEl} |
| 69 | onClose={handleClose} |
| 70 | > |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 71 | <EmojiPicker.default |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 72 | onEmojiClick={onEmojiClick} |
| 73 | disableAutoFocus={true} |
| 74 | disableSkinTonePicker={true} |
| 75 | native |
| 76 | /> |
| 77 | </Popper> |
| 78 | |
| 79 | <InputBase |
| 80 | className={classes.input} |
| 81 | placeholder="Write something nice" |
| 82 | height="35" |
| 83 | value={currentMessage} |
| 84 | onChange={handleInputChange} |
| 85 | /> |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 86 | <IconButton |
| 87 | type="submit" |
| 88 | className={classes.iconButton} |
| 89 | aria-label="search" |
| 90 | size="large"> |
Adrien Béraud | e74741b | 2021-04-19 13:22:54 -0400 | [diff] [blame] | 91 | <Send /> |
Adrien Béraud | 8a438f8 | 2021-04-14 16:18:57 -0400 | [diff] [blame] | 92 | </IconButton> |
| 93 | </Paper> |
| 94 | </div> |
Adrien Béraud | ab519ff | 2022-05-03 15:34:48 -0400 | [diff] [blame] | 95 | ); |
Larbi Gharib | e9af973 | 2021-03-31 15:08:01 +0100 | [diff] [blame] | 96 | } |