From 2e461ef5ae03404cc9e5fb3eb676402e5aca668d Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Wed, 20 Jun 2018 16:10:31 +0300 Subject: lift new message up from MessageInput --- vnext/src/components/MessageInput.js | 88 ++++++++++++++++++++++++++++++++---- vnext/src/components/Thread.js | 2 +- vnext/src/style/main.css | 12 +---- 3 files changed, 80 insertions(+), 22 deletions(-) (limited to 'vnext') diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js index 15d36309..a276225b 100644 --- a/vnext/src/components/MessageInput.js +++ b/vnext/src/components/MessageInput.js @@ -1,32 +1,83 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { MessageType } from './Types'; +import Icon from './Icon'; + export default class MessageInput extends React.Component { constructor(props) { super(props) - this.resize = this.resize.bind(this); + this.textChanged = this.textChanged.bind(this); + this.attachmentChanged = this.attachmentChanged.bind(this); + this.openfile = this.openfile.bind(this); + + this.onSubmit = this.onSubmit.bind(this); + this.textarea = React.createRef(); + this.fileinput = React.createRef(); + this.state = { + isActive: false, + mid: this.props.data.mid, + rid: this.props.data.rid || 0, + body: '', + attach: '' + } } + + onSubmit(event) { + event.preventDefault(); + this.props.onSend({ + mid: this.state.mid, + rid: this.state.rid, + body: this.state.body, + attach: this.state.attach + }) + } + componentDidMount() { - this.resize() + this.textarea.current.focus() } - resize() { + textChanged(event) { + this.setState({ + body: event.target.value + }) const el = this.textarea.current; const offset = el.offsetHeight - el.clientHeight; const height = el.scrollHeight + offset; el.style.height = `${height + offset}px`; } + attachmentChanged(event) { + this.setState({ + attach: event.target.value + }) + } + openfile() { + const input = this.fileinput.current; + if (this.state.attach) { + this.setState({ + attach: '' + }) + } else { + input.click() + } + } render() { - const msg = this.props.data; return (