message input autosize

1 files changed, 21 insertions, 1 deletions

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