aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components/MessageInput.js
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/components/MessageInput.js')
-rw-r--r--vnext/src/components/MessageInput.js88
1 files changed, 78 insertions, 10 deletions
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 (
<form className="msg-comment-target">
- <input type="hidden" name="mid" value={msg.mid} />
<div className="msg-comment">
- <div className="ta-wrapper">
- <textarea name="body" onChange={this.resize}
- ref={this.textarea} style={textInputStyle}
- rows="3" placeholder="Write a comment..." />
+ <div style={inputBarStyle}>
+ <div style={this.state.attach ? activeStyle : inactiveStyle}
+ onClick={this.openfile}>
+ <Icon name="ei-camera" size="s" />
+ <input type="file" accept="image/jpg,image/png" onClick={e => e.stopPropagation()}
+ style={{ display: 'none' }} ref={this.fileinput} value={this.state.attach}
+ onChange={this.attachmentChanged} />
+ </div>
+ <textarea name="body" onChange={this.textChanged}
+ ref={this.textarea} style={textInputStyle} value={this.state.value}
+ rows="1" placeholder="Write a comment..." />
+ <button className="badge" onClick={this.onSubmit}>Send</button>
</div>
</div>
</form>
@@ -34,6 +85,22 @@ export default class MessageInput extends React.Component {
}
}
+const inactiveStyle = {
+ cursor: 'pointer'
+};
+const activeStyle = {
+ cursor: 'pointer',
+ color: 'green'
+};
+
+const inputBarStyle = {
+ border: '1px solid #DDD',
+ display: 'flex',
+ alignItems: 'center',
+ padding: '3px',
+ flexGrow: 1
+}
+
const textInputStyle = {
overflow: 'hidden',
resize: 'none',
@@ -42,5 +109,6 @@ const textInputStyle = {
}
MessageInput.propTypes = {
- data: MessageType
+ data: MessageType.isRequired,
+ onSend: PropTypes.func.isRequired
}; \ No newline at end of file