From ee6944ac4bb5c0e673e23b87df1c0ef8cf29f05a Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Mon, 8 Apr 2019 02:20:43 +0300 Subject: MessageInput using hooks --- vnext/src/components/MessageInput.js | 118 +++++++++++++++-------------------- 1 file 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 ( -
-
-