From d5fdee1d3cdac2436413639085cb8c6ed9c3c94d Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Fri, 19 Jan 2018 12:11:38 -0800
Subject: [PATCH] added ... and ExpandingTextArea component

---
 package.json                                  |  1 +
 react/components/ExpandingTextArea.jsx        | 41 +++++++++++++++++++
 .../containers/PublishMetadataInputs/view.jsx | 17 +++-----
 webpack.config.js                             |  2 +-
 4 files changed, 48 insertions(+), 13 deletions(-)
 create mode 100644 react/components/ExpandingTextArea.jsx

diff --git a/package.json b/package.json
index 0d869e4d..5618e025 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "babel-loader": "^7.1.2",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
     "chai": "^4.1.2",
     "chai-http": "^3.0.0",
     "eslint": "3.19.0",
diff --git a/react/components/ExpandingTextArea.jsx b/react/components/ExpandingTextArea.jsx
new file mode 100644
index 00000000..d628b8de
--- /dev/null
+++ b/react/components/ExpandingTextArea.jsx
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class ExpandingTextarea extends Component {
+  componentDidMount () {
+    this._adjustTextarea({});
+  }
+
+  render () {
+    const { onChange, maxHeight, ...rest } = this.props;
+    return (
+      <textarea
+        { ...rest }
+        ref={x => this.el = x}
+        onChange={ this._handleChange.bind(this) }
+      />
+    );
+  }
+
+  _handleChange (e) {
+    const { onChange } = this.props;
+    if (onChange) onChange(e);
+    this._adjustTextarea(e);
+  }
+
+  _adjustTextarea ({ target = this.el }) {
+    target.style.height = 0;
+    if (this.props.maxHeight) {
+      target.style.height = `${Math.min(target.scrollHeight, this.props.maxHeight)}px`;
+    } else {
+      target.style.height = `${target.scrollHeight}px`;
+    }
+  }
+}
+
+ExpandingTextarea.propTypes = {
+  onChange : PropTypes.func,
+  maxHeight: PropTypes.number,
+};
+
+export default ExpandingTextarea;
diff --git a/react/containers/PublishMetadataInputs/view.jsx b/react/containers/PublishMetadataInputs/view.jsx
index 17098c0d..3fa9b149 100644
--- a/react/containers/PublishMetadataInputs/view.jsx
+++ b/react/containers/PublishMetadataInputs/view.jsx
@@ -1,18 +1,16 @@
 import React from 'react';
+import ExpandingTextArea from 'components/ExpandingTextArea';
 
 class PublishMetadataInputs extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
       showInputs       : false,
-      descriptionLimit : 100,
-      descriptionHeight: '',
     };
     this.toggleShowInputs = this.toggleShowInputs.bind(this);
     this.handleDescriptionInput = this.handleDescriptionInput.bind(this);
     this.handleNsfwCheck = this.handleNsfwCheck.bind(this);
     this.handleLicenseSelection = this.handleLicenseSelection.bind(this);
-    this.setDescriptionTextBoxHeight = this.setDescriptionTextBoxHeight.bind(this);
   }
   toggleShowInputs () {
     this.setState({'showInputs': !this.state.showInputs});
@@ -22,13 +20,6 @@ class PublishMetadataInputs extends React.Component {
     const name = event.target.name;
     const value = event.target.value;
     this.props.onMetadataChange(name, value);
-    this.setDescriptionTextBoxHeight(event);
-  }
-  setDescriptionTextBoxHeight (event) {
-    const scrollHeight = event.target.scrollHeight;
-    // console.log('scrollHeight:', scrollHeight);
-    const height = Math.min(scrollHeight, this.state.descriptionLimit) + 'px';
-    this.setState({descriptionHeight: height});
   }
   handleNsfwCheck (event) {
     console.log('handle input', event);
@@ -52,10 +43,12 @@ class PublishMetadataInputs extends React.Component {
             <div className="column column--3 column--med-10 align-content-top">
               <label htmlFor="publish-license" className="label">Description:</label>
             </div><div className="column column--7 column--sml-10">
-              <textarea
-                rows="1"
+              <ExpandingTextArea
                 id="publish-description"
                 className="textarea textarea--primary textarea--full-width"
+                rows={1}
+                maxLength={2000}
+                maxHeight={150}
                 name="description"
                 placeholder="Optional description"
                 value={this.props.description}
diff --git a/webpack.config.js b/webpack.config.js
index 3c9912d5..0918818e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -16,7 +16,7 @@ module.exports = {
         loader : 'babel-loader',
         exclude: /node_modules/,
         query  : {
-          presets: ['es2015', 'react'],
+          presets: ['es2015', 'react', 'stage-2'],
         },
       },
     ],