aboutsummaryrefslogtreecommitdiff
path: root/vnext
diff options
context:
space:
mode:
Diffstat (limited to 'vnext')
-rw-r--r--vnext/src/components/MessageInput.js88
-rw-r--r--vnext/src/components/Thread.js2
-rw-r--r--vnext/src/style/main.css12
3 files changed, 80 insertions, 22 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
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 6830a821..96b7e093 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -61,7 +61,7 @@ export default class Thread extends React.Component {
{
this.loaded() ? (
<Message data={msg} visitor={this.props.visitor}>
- <MessageInput data={msg} />
+ <MessageInput data={msg} onSend={console.log} />
<Recommendations src={msg.recommendations} />
</Message>
) : (
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index 4518ce93..a5b872eb 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -373,6 +373,7 @@ article .tags > a,
background: #eee;
border: 1px solid #eee;
color: #888;
+ cursor: pointer;
display: inline-block;
font-size: 10pt;
margin-bottom: 5px;
@@ -445,11 +446,6 @@ article .tags > a,
overflow: hidden;
text-indent: 10px;
}
-.ta-wrapper {
- border: 1px solid #DDD;
- display: flex;
- flex-grow: 1;
-}
.msg-comment {
display: flex;
width: 100%;
@@ -466,12 +462,6 @@ article .tags > a,
resize: vertical;
vertical-align: top;
}
-.attach-photo {
- cursor: pointer;
-}
-.attach-photo-active {
- color: green;
-}
.msg-comment input {
align-self: flex-start;
background: #EEE;