aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--vnext/src/components/MessageInput.js118
1 files changed, 51 insertions, 67 deletions
diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js
index d2b6ad7b..bd80d1ea 100644
--- a/vnext/src/components/MessageInput.js
+++ b/vnext/src/components/MessageInput.js
@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
+import { useFormState } from 'react-use-form-state';
+
import { MessageType } from './Types';
import Icon from './Icon';
@@ -8,81 +10,63 @@ import Button from './Button';
import UploadButton from './UploadButton';
-export default class MessageInput extends React.Component {
- constructor(props) {
- super(props);
- this.textarea = React.createRef();
- this.fileinput = React.createRef();
- this.state = {
- isActive: false,
- mid: this.props.data.mid,
- rid: this.props.data.rid || 0,
- to: this.props.data.to || {},
- body: this.props.text || '',
- attach: ''
- };
- }
+export default function MessageInput({ data, rows, children, onSend }) {
+ let textareaRef = useRef();
+ let fileinput = useRef();
- handleCtrlEnter = (event) => {
- if (event.ctrlKey && (event.charCode == 10 || event.charCode == 13)) {
- this.onSubmit({});
- }
- }
-
- onSubmit = (event) => {
- if (event.preventDefault) {
- event.preventDefault();
- }
- const input = this.fileinput.current;
- this.props.onSend({
- mid: this.state.mid,
- rid: this.state.rid,
- body: this.state.body,
- attach: this.state.attach ? input.files[0] : '',
- to: this.state.to
- });
- this.setState({
- body: '',
- attach: ''
- });
- this.textarea.current.style.height = '';
- }
-
- componentDidMount() {
+ useEffect(() => {
const isDesktop = window.matchMedia('(min-width: 62.5rem)');
if (isDesktop.matches) {
- this.textarea.current.focus();
+ textareaRef.current.focus();
}
- }
- textChanged = (event) => {
- this.setState({
- body: event.target.value
- });
- const el = this.textarea.current;
+ }, []);
+
+ let handleCtrlEnter = (event) => {
+ if (event.ctrlKey && (event.charCode == 10 || event.charCode == 13)) {
+ onSubmit({});
+ }
+ };
+ let textChanged = (event) => {
+ const el = textareaRef.current;
const offset = el.offsetHeight - el.clientHeight;
const height = el.scrollHeight + offset;
el.style.height = `${height + offset}px`;
- }
- uploadValueChanged = (attach) => {
- this.setState({
- attach: attach
+ };
+ const [attach, setAttach] = useState('');
+ const [formState, { textarea }] = useFormState();
+ let uploadValueChanged = (attach) => {
+ setAttach(attach);
+ };
+ let onSubmit = (event) => {
+ if (event.preventDefault) {
+ event.preventDefault();
+ }
+ const input = fileinput.current;
+ onSend({
+ mid: data.mid,
+ rid: data.rid || 0,
+ body: formState.values.body,
+ attach: attach ? input.files[0] : '',
+ to: data.to || {}
});
- }
- render() {
- return (
- <form className="msg-comment-target" style={{padding: '12px'}}>
- <div style={commentStyle}>
- <textarea name="body" onChange={this.textChanged} onKeyPress={this.handleCtrlEnter}
- ref={this.textarea} style={textInputStyle} value={this.state.body}
- rows={this.props.rows || '1'} placeholder={this.props.children} />
- <div style={inputBarStyle}>
- <UploadButton inputRef={this.fileinput} value={this.state.attach} onChange={this.uploadValueChanged} />
- <Button onClick={this.onSubmit}><Icon name="ei-envelope" size="s" />Send</Button>
- </div>
+ setAttach('');
+ formState.values.body = '';
+ textareaRef.current.value = '';
+ textareaRef.current.style.height = '';
+ };
+ return (
+ <form className="msg-comment-target" style={{ padding: '12px' }} onSubmit={onSubmit}>
+ <div style={commentStyle}>
+ <textarea onChange={textChanged} onKeyPress={handleCtrlEnter}
+ ref={textareaRef} style={textInputStyle} value={formState.values.body}
+ rows={rows || '1'} placeholder={children} {...textarea('body')} />
+ <div style={inputBarStyle}>
+ <UploadButton inputRef={fileinput} value={attach} onChange={uploadValueChanged} />
+ <Button onClick={onSubmit}><Icon name="ei-envelope" size="s" />Send</Button>
</div>
- </form>
- );
- }
+ </div>
+ </form>
+ );
}
const commentStyle = {