lift new message up from MessageInput

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;