mirror of https://github.com/waku-org/js-waku.git
Enable using enter key to send message
This commit is contained in:
parent
79846ee196
commit
06d8c2aca6
|
@ -1,8 +1,9 @@
|
|||
import React, { ChangeEvent } from 'react';
|
||||
import React, { ChangeEvent, KeyboardEvent } from 'react';
|
||||
import { TextField } from '@material-ui/core';
|
||||
|
||||
interface Props {
|
||||
messageHandler: (msg: string) => void;
|
||||
sendMessage: () => void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
|
@ -19,13 +20,22 @@ export default class MessageInput extends React.Component<Props, State> {
|
|||
}
|
||||
|
||||
messageHandler(event: ChangeEvent<HTMLInputElement>) {
|
||||
this.setState({inputText: event.target.value})
|
||||
this.props.messageHandler(event.target.value);
|
||||
}
|
||||
|
||||
keyPressHandler(event: KeyboardEvent<HTMLInputElement>) {
|
||||
if (event.key === 'Enter') {
|
||||
this.props.sendMessage()
|
||||
this.setState({inputText: ''})
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<TextField variant='outlined'
|
||||
label='Send a message'
|
||||
value={this.state.inputText}
|
||||
fullWidth
|
||||
style={{ margin: 8 }}
|
||||
margin="normal"
|
||||
|
@ -33,6 +43,7 @@ export default class MessageInput extends React.Component<Props, State> {
|
|||
shrink: true,
|
||||
}}
|
||||
onChange={this.messageHandler.bind(this)}
|
||||
onKeyPress={this.keyPressHandler.bind(this)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -49,7 +49,7 @@ export default function Room (props :Props) {
|
|||
<Grid item xs={12}>
|
||||
<Grid container spacing={2} direction='row' alignItems='center'>
|
||||
<Grid item xs={11}>
|
||||
<MessageInput messageHandler={messageHandler} />
|
||||
<MessageInput messageHandler={messageHandler} sendMessage={sendMessage} />
|
||||
</Grid>
|
||||
<Grid item xs={1}>
|
||||
<Send sendMessage={sendMessage} />
|
||||
|
|
Loading…
Reference in New Issue