react-textarea-autosize - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

example/index.js

@@ -0,8 +1,47 @@
+'use strict';
+
 var React = require('react');
 var TextareaAutosize = require('../');
 
-React.render(
-  React.createElement(
-    TextareaAutosize,
-    {defaultValue: (new Array(15)).join('\nLine.')}),
-  document.getElementById('main'));
+var Demo = React.createClass({
+
+  render() {
+    return (
+      <div>
+        <div>
+          <h2>Controlled mode</h2>
+          <TextareaAutosize
+            value={this.state.value}
+            onChange={this.onChange}
+            />
+          <button onClick={this.changeValueProgramatically}>
+            Change value programatically
+          </button>
+        </div>
+        <div>
+          <h2>Uncontrolled mode</h2>
+          <TextareaAutosize
+            defaultValue={this.state.value}
+            />
+        </div>
+      </div>
+    );
+  },
+
+  getInitialState() {
+    var value = (new Array(15)).join('\nLine.');
+    return {value};
+  },
+
+  onChange(e) {
+    var {value} = e.target;
+    this.setState({value});
+  },
+
+  changeValueProgramatically() {
+    var value = 'This value was set programatically';
+    this.setState({value});
+  }
+});
+
+React.render(<Demo />, document.getElementById('main'));

index.js

@@ -0,1 +1,3 @@
+'use strict';
+
 var React = require('react');
@@ -17,14 +19,12 @@ var objectAssign = require('object-assign');
   componentDidMount: function() {
-    this.getDiffSize();
     this.recalculateSize();
   },
 
-  componentWillReceiveProps: function(nextProps) {
-    this.dirty = !!nextProps.style;
-  },
-
-  componentDidUpdate: function() {
-    if (this.dirty) {
-      this.getDiffSize();
-      this.dirty = false;
+  componentDidUpdate: function(prevProps) {
+    if (
+      prevProps.style ||
+      prevProps.value !== this.props.value ||
+      this.props.value === undefined
+    ) {
+      this.recalculateSize();
     }
@@ -37,8 +37,14 @@ },
     }
-    this.recalculateSize();
+    if (this.props.value === undefined) {
+      // controlled mode
+      this.recalculateSize();
+    }
   },
 
-  getDiffSize: function() {
+  recalculateSize: function() {
+    var diff;
+    var node = this.getDOMNode();
+
     if (window.getComputedStyle) {
-      var styles = window.getComputedStyle(this.getDOMNode());
+      var styles = window.getComputedStyle(node);
 
@@ -50,22 +56,16 @@ // If the textarea is set to border-box, it's not necessary to
           styles.getPropertyValue('-webkit-box-sizing') === "border-box") {
-        this.diff = 0;
+        diff = 0;
       } else {
-        this.diff = (
-            parseInt(styles.getPropertyValue('padding-bottom') || 0, 10) +
-            parseInt(styles.getPropertyValue('padding-top') || 0, 10)
-            );
+        diff = (
+          parseInt(styles.getPropertyValue('padding-bottom') || 0, 10) +
+          parseInt(styles.getPropertyValue('padding-top') || 0, 10)
+        );
       }
     } else {
-      this.diff = 0;
+      diff = 0;
     }
-  },
 
-  recalculateSize: function() {
-    if (!this.isMounted()) {
-      return;
-    }
-
     var node = this.getDOMNode();
     node.style.height = 'auto';
-    node.style.height = (node.scrollHeight - this.diff) + 'px';
+    node.style.height = (node.scrollHeight - diff) + 'px';
   }
@@ -72,0 +72,0 @@ });

package.json

 {
   "name": "react-textarea-autosize",
   "description": "textarea component for React which grows with content",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "author": {
@@ -11,3 +11,3 @@ "name": "Andrey Popp",
   "dependencies": {
-    "object-assign": "^1.0.0"
+    "object-assign": "^2.0.0"
   },
@@ -14,0 +14,0 @@ "homepage": "https://github.com/andreypopp/react-textarea-autosize",

No alert changes

Improved metrics

Total package byte prevSize

7521

increased by11.27%

Lines of code

126

increased by35.48%

Dependency changes

• + Addedobject-assign@2.1.1(transitive)

• - Removedobject-assign@1.0.0(transitive)

• Updatedobject-assign@^2.0.0