From e246d239856cd256f2e124535ba8ae9ed3e24a7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Cruz?= <andremiguelcruz@msn.com>
Date: Wed, 3 Oct 2018 01:25:43 +0100
Subject: [PATCH] feat: add textarea-autosize

---
 package-lock.json                             |  5 ++
 package.json                                  |  1 +
 src/components/textarea-autosize/README.md    | 19 +++++
 .../textarea-autosize/TextareaAutosize.css    |  5 ++
 .../textarea-autosize/TextareaAutosize.js     | 80 +++++++++++++++++++
 src/components/textarea-autosize/index.js     |  1 +
 src/index.js                                  |  1 +
 src/styles/base.css                           | 13 +++
 stories/index.js                              |  1 +
 stories/textarea-autosize.js                  | 33 ++++++++
 10 files changed, 159 insertions(+)
 create mode 100644 src/components/textarea-autosize/README.md
 create mode 100644 src/components/textarea-autosize/TextareaAutosize.css
 create mode 100644 src/components/textarea-autosize/TextareaAutosize.js
 create mode 100644 src/components/textarea-autosize/index.js
 create mode 100644 stories/textarea-autosize.js

diff --git a/package-lock.json b/package-lock.json
index c909b78..c5a71e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8529,6 +8529,11 @@
       "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 77f017c..793552b 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
   "dependencies": {
     "classnames": "^2.2.6",
     "date-is-invalid": "^1.0.10",
+    "grow-element-fn": "^1.0.3",
     "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
new file mode 100644
index 0000000..ae51d07
--- /dev/null
+++ b/src/components/textarea-autosize/README.md
@@ -0,0 +1,19 @@
+# TextareaAutosize
+
+A textarea component that auto-resizes.
+
+## Usage
+
+```jsx
+import { TextareaAutosize } from '@discussify/styleguide';
+
+<TextareaAutosize />
+```
+
+## Props
+
+| name | type | default | description |
+| ---- | ---- | ------- | ----------- |
+| maxRows | number | | The number of max rows of the textarea |
+
+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
new file mode 100644
index 0000000..d3dda58
--- /dev/null
+++ b/src/components/textarea-autosize/TextareaAutosize.css
@@ -0,0 +1,5 @@
+.textareaAutosize {
+    overflow: hidden;
+    resize: none;
+    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
new file mode 100644
index 0000000..60c3124
--- /dev/null
+++ b/src/components/textarea-autosize/TextareaAutosize.js
@@ -0,0 +1,80 @@
+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 { debounce } from 'lodash';
+import styles from './TextareaAutosize.css';
+
+export default class TextareaAutosize extends Component {
+    static propTypes = {
+        rows: PropTypes.number,
+        maxRows: PropTypes.number,
+        onFocus: PropTypes.func,
+        onBlur: PropTypes.func,
+        className: PropTypes.string,
+    };
+
+    static defaultProps = {
+        rows: 1,
+    };
+
+    componentDidMount() {
+        this.updateSize();
+        window.addEventListener('resize', this.handleResize);
+    }
+
+    componentDidUpdate() {
+        this.updateSize();
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.handleResize);
+    }
+
+    render() {
+        const { className, rest } = this.props;
+
+        return (
+            <textarea
+                ref={ this.storeNode }
+                onFocus={ this.handleFocus }
+                onBlur={ this.handleBlur }
+                { ...rest }
+                className={ classNames(styles.textareaAutosize, className) } />
+        );
+    }
+
+    storeNode = (ref) => {
+        this.node = findDOMNode(ref);
+
+        if (this.node) {
+            this.node.addEventListener('focus', this.updateSize);
+            this.node.addEventListener('blur', this.updateSize);
+            this.node.addEventListener('input', this.updateSize);
+        }
+    };
+
+    updateSize = () => {
+        growElementFn({
+            el: this.node,
+            minLines: this.props.rows,
+            maxLines: this.props.maxRows,
+            extraLine: this.focused,
+        });
+    };
+
+    handleFocus = () => {
+        this.focused = true;
+        this.updateSize();
+        this.props.onFocus && this.props.onFocus();
+    };
+
+    handleBlur = () => {
+        this.focused = false;
+        this.updateSize();
+        this.props.onBlur && this.props.onBlur();
+    };
+
+    handleResize = debounce(() => this.updateSize(), 500);
+}
diff --git a/src/components/textarea-autosize/index.js b/src/components/textarea-autosize/index.js
new file mode 100644
index 0000000..bd999d0
--- /dev/null
+++ b/src/components/textarea-autosize/index.js
@@ -0,0 +1 @@
+export { default } from './TextareaAutosize.js';
diff --git a/src/index.js b/src/index.js
index 7aa1b43..6c56d14 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,4 +9,5 @@ export * from './components/icon';
 export * from './components/modal';
 export * from './components/popover';
 export { default as TextButton } from './components/text-button';
+export { default as TextareaAutosize } from './components/textarea-autosize';
 export { default as TimeAgo } from './components/time-ago';
diff --git a/src/styles/base.css b/src/styles/base.css
index 5c74634..586e852 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -59,6 +59,19 @@ body {
     overflow-wrap: break-word;  /* Break long words by default */
 }
 
+input,
+select {
+    @mixin typography-body-1 rem;
+    color: var(--color-black);
+}
+
+textarea {
+    @mixin typography-body-1 rem;
+    color: var(--color-black);
+    white-space: pre-line;
+    overflow-wrap: break-word;  /* Break long words by default */
+}
+
 ::selection {
     background: var(--color-science-blue);
     color: var(--color-seashell);
diff --git a/stories/index.js b/stories/index.js
index e76db92..85441ad 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -9,5 +9,6 @@ import './icon';
 import './modal';
 import './popover';
 import './text-button';
+import './textarea-autosize';
 import './time-ago';
 import './typing-indicator';
diff --git a/stories/textarea-autosize.js b/stories/textarea-autosize.js
new file mode 100644
index 0000000..9da2ffa
--- /dev/null
+++ b/stories/textarea-autosize.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, boolean, number } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { withReadme } from 'storybook-readme';
+import { TextareaAutosize } from '../src';
+import readme from '../src/components/textarea-autosize/README.md';
+
+storiesOf('TextareaAutosize', module)
+.addDecorator(withReadme(readme))
+.addDecorator(withKnobs)
+.add('Default', () => (
+    <TextareaAutosize />
+))
+.add('5 max rows ', () => (
+    <TextareaAutosize maxRows={ 5 } />
+))
+.add('2 rows, 5 max rows ', () => (
+    <TextareaAutosize rows={ 2 } maxRows={ 5 } />
+))
+.add('Knobs playground ⚽', () => {
+    const rows = number('rows', 1);
+    const maxRows = number('maxRows', 5);
+    const disabled = boolean('disabled');
+
+    return (
+        <TextareaAutosize
+            rows={ rows }
+            maxRows={ maxRows }
+            disabled={ disabled }
+            onHeightChange={ action('height changed') } />
+    );
+});