From 1e744bd9e8f3df7e57dab281c0553f9ef7fb0598 Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Wed, 20 Jun 2018 13:38:22 +0300
Subject: message input autosize

---
 vnext/src/components/MessageInput.js | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

(limited to 'vnext/src/components')

diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js
index 2a7eab1d..15d36309 100644
--- a/vnext/src/components/MessageInput.js
+++ b/vnext/src/components/MessageInput.js
@@ -5,6 +5,17 @@ import { MessageType } from './Types';
 export default class MessageInput extends React.Component {
     constructor(props) {
         super(props)
+        this.resize = this.resize.bind(this);
+        this.textarea = React.createRef();
+    }
+    componentDidMount() {
+        this.resize()
+    }
+    resize() {
+        const el = this.textarea.current;
+        const offset = el.offsetHeight - el.clientHeight;
+        const height = el.scrollHeight + offset;
+        el.style.height = `${height + offset}px`;
     }
     render() {
         const msg = this.props.data;
@@ -13,7 +24,9 @@ export default class MessageInput extends React.Component {
                 <input type="hidden" name="mid" value={msg.mid} />
                 <div className="msg-comment">
                     <div className="ta-wrapper">
-                        <textarea name="body" rows="1" className="reply" placeholder="Write a comment..."></textarea>
+                        <textarea name="body" onChange={this.resize}
+                            ref={this.textarea} style={textInputStyle}
+                            rows="3" placeholder="Write a comment..." />
                     </div>
                 </div>
             </form>
@@ -21,6 +34,13 @@ export default class MessageInput extends React.Component {
     }
 }
 
+const textInputStyle = {
+    overflow: 'hidden',
+    resize: 'none',
+    display: 'block',
+    boxSizing: 'border-box'
+}
+
 MessageInput.propTypes = {
     data: MessageType
 };
\ No newline at end of file
-- 
cgit v1.2.3