Merge pull request #51 from buildo/50-max_rows_not_working

#50: Max rows not working with text without breakline char (closes #50)

2 files changed, 15 insertions, 50 deletions

diff --git a/package.json b/package.json
index 1a59106..8f11c84 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
   },
   "dependencies": {
     "autosize": "^3.0.15",
+    "line-height": "^0.3.1",
     "prop-types": "^15.5.6"
   }
 }
diff --git a/src/TextareaAutosize.js b/src/TextareaAutosize.js
index 04a3251..4abaec7 100644
--- a/src/TextareaAutosize.js
+++ b/src/TextareaAutosize.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import autosize from 'autosize';
+import getLineHeight from 'line-height';
 
 const UPDATE = 'autosize:update',
   DESTROY = 'autosize:destroy',
@@ -21,20 +22,19 @@ export default class TextareaAutosize extends React.Component {
   };
 
   state = {
-    maxHeight: null
+    lineHeight: null
   }
 
   componentDidMount() {
-    const { value, defaultValue, onResize } = this.props;
+    const { onResize, maxRows } = this.props;
 
-    autosize(this.textarea);
-
-    if (this.hasReachedMaxRows(value || defaultValue)) {
-      this.updateMaxHeight(value || defaultValue);
+    if (typeof maxRows === 'number') {
+      this.updateLineHeight();
 
       // this trick is needed to force "autosize" to activate the scrollbar
-      this.dispatchEvent(DESTROY);
       setTimeout(() => autosize(this.textarea));
+    } else {
+      autosize(this.textarea);
     }
 
     if (onResize) {
@@ -58,51 +58,13 @@ export default class TextareaAutosize extends React.Component {
 
   getValue = ({ valueLink, value }) => valueLink ? valueLink.value : value;
 
-  hasReachedMaxRows = (value) => {
-    const { maxRows } = this.props;
-
-    const numberOfRows = (value || '').split('\n').length;
-
-    return numberOfRows >= parseInt(maxRows);
-  }
-
-  updateMaxHeight = (value) => {
-    const {
-      props: { maxRows },
-      state: { maxHeight }
-    } = this;
-
-    const hasReachedMaxRows = this.hasReachedMaxRows(value);
-
-    if (!maxHeight && hasReachedMaxRows) {
-      const numberOfRows = (value || '').split('\n').length;
-      const computedStyle = window.getComputedStyle(this.textarea);
-
-      const paddingTop = parseFloat(computedStyle.getPropertyValue('padding-top'), 10);
-      const paddingBottom = parseFloat(computedStyle.getPropertyValue('padding-top'), 10);
-      const verticalPadding = (paddingTop || 0) + (paddingBottom || 0);
-
-      const borderTopWidth = parseInt(computedStyle.getPropertyValue('border-top-width'), 10);
-      const borderBottomWidth = parseInt(computedStyle.getPropertyValue('border-bottom-width'), 10);
-      const verticalBorderWidth = (borderTopWidth || 0) + (borderBottomWidth || 0);
-
-      const height = this.textarea.offsetHeight - verticalPadding - verticalBorderWidth;
-
-      this.setState({
-        maxHeight: height / numberOfRows * maxRows
-      });
-
-      return true;
-    } else if (maxHeight && !hasReachedMaxRows) {
-      this.setState({ maxHeight: null });
-
-      return false;
-    }
-
+  updateLineHeight = () => {
+    this.setState({
+      lineHeight: getLineHeight(this.textarea)
+    });
   }
 
   onChange = e => {
-    this.updateMaxHeight(e.target.value);
     this.props.onChange && this.props.onChange(e);
   }
 
@@ -119,10 +81,12 @@ export default class TextareaAutosize extends React.Component {
   getLocals = () => {
     const {
       props: { onResize, maxRows, onChange, style, innerRef, ...props }, // eslint-disable-line no-unused-vars
-      state: { maxHeight },
+      state: { lineHeight },
       saveDOMNodeRef
     } = this;
 
+    const maxHeight = maxRows && lineHeight ? lineHeight * maxRows : null;
+
     return {
       ...props,
       saveDOMNodeRef,