feat: add animate to textarea autosize component

Also fix a bug with the auto-grow.

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",

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.

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;
+ }
 }

src/components/textarea-autosize/TextareaAutosize.js

@@ -2,21 +2,23 @@ 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';
 
 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,
  };
 
  static defaultProps = {
  rows: 1,
+ animate: true,
  };
 
  componentDidMount() {
@@ -33,15 +35,16 @@ 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
  { ...rest }
  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,