feat: allow multiline messages with shift+enter

This commit is contained in:
Jeremy Kahn 2022-08-27 19:40:51 -05:00
parent 7e107e8290
commit cd3f1b0fd7
2 changed files with 34 additions and 7 deletions

View File

@ -29,6 +29,7 @@ export const Message = ({ message, userId }: MessageProps) => {
borderRadius: 6,
float: message.authorId === userId ? 'right' : 'left',
transition: 'background-color 1s',
wordBreak: 'break-all',
}}
>
{message.text}

View File

@ -1,4 +1,4 @@
import { useState } from 'react'
import React, { useState } from 'react'
import { v4 as uuid } from 'uuid'
import FormControl from '@mui/material/FormControl'
import Typography from '@mui/material/Typography'
@ -48,10 +48,12 @@ export function Room({
setTextMessage(value)
}
const handleMessageSubmit = async (
event: React.SyntheticEvent<HTMLFormElement>
) => {
event.preventDefault()
const canMessageBeSent = () => {
return textMessage.trim().length > 0 && !isMessageSending
}
const performMessageSend = async () => {
if (!canMessageBeSent()) return
const unsentMessage: UnsentMessage = {
authorId: userId,
@ -72,6 +74,24 @@ export function Room({
setIsMessageSending(false)
}
const handleMessageKeyPress = async (
event: React.KeyboardEvent<HTMLInputElement>
) => {
const { key, shiftKey } = event
if (key === 'Enter' && shiftKey === false) {
event.preventDefault()
await performMessageSend()
}
}
const handleMessageSubmit = async (
event: React.SyntheticEvent<HTMLFormElement>
) => {
event.preventDefault()
await performMessageSend()
}
receiveMessage(message => {
setMessageLog([...messageLog, { ...message, timeReceived: Date.now() }])
})
@ -91,15 +111,21 @@ export function Room({
variant="outlined"
value={textMessage}
onChange={handleMessageChange}
onKeyPress={handleMessageKeyPress}
size="medium"
placeholder="Your message"
multiline
/>
</FormControl>
<Fab
className="shrink-0"
sx={{
flexShrink: 0,
// The !important is needed to override a Stack style
marginTop: 'auto!important',
}}
aria-label="Send"
type="submit"
disabled={textMessage.length === 0 || isMessageSending}
disabled={!canMessageBeSent()}
color="primary"
>
<ArrowUpward />