Merge pull request #2 from tehandyb/master

FIXED JITTER. must set child height state if children changed.
onefinestay · Jun 2, 2015 · e30e8ec · e30e8ec
2 parents dfb2841 + c2f3dd9
commit e30e8ec
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/dist/LazyRender.js b/dist/LazyRender.js
@@ -91,9 +91,7 @@ var LazyRender = React.createClass({displayName: "LazyRender",
   },
 
   componentDidMount: function() {
-    var firstChild = this.refs['child-0'];
-    var el = firstChild.getDOMNode();
-    var childHeight = this.getElementHeight(el);
+    var childHeight = this.getChildHeight();
 
     var height = this.getHeight(
       this.props.children.length,
@@ -116,6 +114,19 @@ var LazyRender = React.createClass({displayName: "LazyRender",
     });
   },
 
+  componentDidUpdate: function() {
+    //important to update the child height in the case that the children change(example: ajax call for data)
+    if(this.state.childHeight !== this.getChildHeight())
+      this.setState({childHeight: this.getChildHeight()});
+
+  },
+
+  getChildHeight: function() {
+    var firstChild = this.refs['child-0'];
+    var el = firstChild.getDOMNode();
+    return this.getElementHeight(el);
+  },
+
   render: function() {
     var start = this.state.childrenTop;
     var end = this.state.childrenTop + this.state.childrenToRender;

diff --git a/src/LazyRender.jsx b/src/LazyRender.jsx
@@ -91,9 +91,7 @@ var LazyRender = React.createClass({
   },
 
   componentDidMount: function() {
-    var firstChild = this.refs['child-0'];
-    var el = firstChild.getDOMNode();
-    var childHeight = this.getElementHeight(el);
+    var childHeight = this.getChildHeight();
 
     var height = this.getHeight(
       this.props.children.length,
@@ -116,6 +114,19 @@ var LazyRender = React.createClass({
     });
   },
 
+  componentDidUpdate: function() {
+    //important to update the child height in the case that the children change(example: ajax call for data)
+    if(this.state.childHeight !== this.getChildHeight())
+      this.setState({childHeight: this.getChildHeight()});
+
+  },
+
+  getChildHeight: function() {
+    var firstChild = this.refs['child-0'];
+    var el = firstChild.getDOMNode();
+    return this.getElementHeight(el);
+  },
+
   render: function() {
     var start = this.state.childrenTop;
     var end = this.state.childrenTop + this.state.childrenToRender;