Adds autoresize functionality to chat input

pkg/interface/chat/src/js/components/lib/chat-input.js

@@ -8,6 +8,7 @@ import { Sigil } from '/components/lib/icons/sigil';
 
 import { uuid, uxToHex } from '/lib/util';
 
+const DEFAULT_INPUT_HEIGHT = 28;
 
 export class ChatInput extends Component {
 
@@ -16,12 +17,15 @@ export class ChatInput extends Component {
 
     this.state = {
       message: '',
+      textareaHeight: DEFAULT_INPUT_HEIGHT
     };
 
     this.textareaRef = React.createRef();
 
     this.messageSubmit = this.messageSubmit.bind(this);
     this.messageChange = this.messageChange.bind(this);
+                         // Call once per frame @ 60hz
+    this.textareaInput = _.debounce(this.textareaInput.bind(this), 16);
 
     // perf testing:
     /*let closure = () => {
@@ -80,6 +84,16 @@ export class ChatInput extends Component {
     });
   }
 
+  textareaInput() {
+    const newHeight = this.textareaRef.current.scrollHeight < DEFAULT_INPUT_HEIGHT * 8
+      ? `${this.textareaRef.current.scrollHeight}px`
+      : `${DEFAULT_INPUT_HEIGHT * 8}px`
+
+    this.setState({
+      textareaHeight: newHeight
+    });
+  }
+
   getLetterType(letter) {
     if (letter[0] === '#') {
       letter = letter.slice(1);
@@ -149,6 +163,7 @@ export class ChatInput extends Component {
 
     this.setState({
       message: '',
+      textareaHeight: DEFAULT_INPUT_HEIGHT
     });
   }
 
@@ -194,7 +209,7 @@ export class ChatInput extends Component {
         <div className="fr h-100 flex bg-gray0-d" style={{ flexGrow: 1 }}>
           <textarea
             className={"pl3 bn bg-gray0-d white-d"}
-            style={{ flexGrow: 1, height: 28, paddingTop: 6, resize: "none" }}
+            style={{ flexGrow: 1, height: state.textareaHeight, paddingTop: 6, resize: "none" }}
             autoCapitalize="none"
             autoFocus={(
               /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(
@@ -204,6 +219,7 @@ export class ChatInput extends Component {
             placeholder={props.placeholder}
             value={state.message}
             onChange={this.messageChange}
+            onInput={this.textareaInput}
           />
         </div>
       </div>