diff options
author | 2019-04-08 02:20:43 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | ee6944ac4bb5c0e673e23b87df1c0ef8cf29f05a (patch) | |
tree | 76698d871943f8640cfe225fe9decc3a60494737 /vnext/src | |
parent | c869329d6e961a9758a4671b9a2f1872e909b1e4 (diff) |
MessageInput using hooks
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/components/MessageInput.js | 118 |
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 = { |