From c8b50ce261b25a458ed78d45b2abac274427d40a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Cruz?= <andremiguelcruz@msn.com>
Date: Wed, 10 Oct 2018 11:36:06 +0100
Subject: [PATCH] feat: add animate to textarea autosize component

Also fix a bug with the auto-grow.
---
 package-lock.json                                     | 10 +++++-----
 package.json                                          |  2 +-
 src/components/textarea-autosize/README.md            |  1 +
 src/components/textarea-autosize/TextareaAutosize.css |  5 ++++-
 src/components/textarea-autosize/TextareaAutosize.js  | 11 +++++++----
 5 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cb5d6c2..7af0072 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -777,6 +777,11 @@
         "rimraf": "^2.5.2"
       }
     },
+    "@moxy/grow-element-fn": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@moxy/grow-element-fn/-/grow-element-fn-1.0.6.tgz",
+      "integrity": "sha512-GO1Vt15zeb9eqlv9iUM+ESKuaXsitwWSAuz5VuVWhVL7zzTV2Rhyb+tXTrlPFJc+8NUncklBDQ+Iz6ojq3aCiw=="
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -8529,11 +8534,6 @@
       "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
       "dev": true
     },
-    "grow-element-fn": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/grow-element-fn/-/grow-element-fn-1.0.3.tgz",
-      "integrity": "sha512-O/dWw8QppRNPmm5UxTFchs6VxVNggBeoWpffv7NZbxkNOpR90uN9LE28wBSLenBBfaz/c8Vt4vA6tHhSZSdmLw=="
-    },
     "gud": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
diff --git a/package.json b/package.json
index 0856d42..7a02083 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
   "dependencies": {
     "classnames": "^2.2.6",
     "date-is-invalid": "^1.0.10",
-    "grow-element-fn": "^1.0.3",
+    "@moxy/grow-element-fn": "^1.0.6",
     "lodash": "^4.17.10",
     "normalize.css": "^8.0.0",
     "prop-types": "^15.6.2",
diff --git a/src/components/textarea-autosize/README.md b/src/components/textarea-autosize/README.md
index ae51d07..6aa05ac 100644
--- a/src/components/textarea-autosize/README.md
+++ b/src/components/textarea-autosize/README.md
@@ -15,5 +15,6 @@ import { TextareaAutosize } from '@discussify/styleguide';
 | name | type | default | description |
 | ---- | ---- | ------- | ----------- |
 | maxRows | number | | The number of max rows of the textarea |
+| animate | bool | true | Animate the textarea height |
 
 Any other properties supplied will be spread to the root element. One useful textarea property is `rows`, which defines the minimum number of rows within the textarea.
diff --git a/src/components/textarea-autosize/TextareaAutosize.css b/src/components/textarea-autosize/TextareaAutosize.css
index d3dda58..22e47b9 100644
--- a/src/components/textarea-autosize/TextareaAutosize.css
+++ b/src/components/textarea-autosize/TextareaAutosize.css
@@ -1,5 +1,8 @@
 .textareaAutosize {
     overflow: hidden;
     resize: none;
-    transition: height 0.2s ease, max-height 0.2s ease;
+
+    &.animate {
+        transition: height 0.2s ease, max-height 0.2s ease;
+    }
 }
diff --git a/src/components/textarea-autosize/TextareaAutosize.js b/src/components/textarea-autosize/TextareaAutosize.js
index 14c7149..a0d4687 100644
--- a/src/components/textarea-autosize/TextareaAutosize.js
+++ b/src/components/textarea-autosize/TextareaAutosize.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import growElementFn from 'grow-element-fn';
+import growElementFn from '@moxy/grow-element-fn';
 import { debounce } from 'lodash';
 import styles from './TextareaAutosize.css';
 
@@ -10,6 +10,7 @@ export default class TextareaAutosize extends Component {
     static propTypes = {
         rows: PropTypes.number,
         maxRows: PropTypes.number,
+        animate: PropTypes.bool,
         onFocus: PropTypes.func,
         onBlur: PropTypes.func,
         className: PropTypes.string,
@@ -17,6 +18,7 @@ export default class TextareaAutosize extends Component {
 
     static defaultProps = {
         rows: 1,
+        animate: true,
     };
 
     componentDidMount() {
@@ -33,7 +35,8 @@ export default class TextareaAutosize extends Component {
     }
 
     render() {
-        const { className, maxRows, ...rest } = this.props;
+        const { className, maxRows, animate, ...rest } = this.props;
+        const finalClassName = classNames(styles.textareaAutosize, animate && styles.animate, className);
 
         return (
             <textarea
@@ -41,7 +44,7 @@ export default class TextareaAutosize extends Component {
                 ref={ this.storeNode }
                 onFocus={ this.handleFocus }
                 onBlur={ this.handleBlur }
-                className={ classNames(styles.textareaAutosize, className) } />
+                className={ finalClassName } />
         );
     }
 
@@ -56,7 +59,7 @@ export default class TextareaAutosize extends Component {
     };
 
     updateSize = () => {
-        growElementFn({
+        this.node && growElementFn({
             el: this.node,
             minLines: this.props.rows,
             maxLines: this.props.maxRows,