changed child height calculation to include element margin. no more j…

…itter
onefinestay · May 28, 2015 · 6a489d9 · 6a489d9
1 parent 1233289
commit 6a489d9
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/dist/LazyRender.js b/dist/LazyRender.js
@@ -1,9 +1,10 @@
 "use strict";
 
 var React = require('react/addons');
+var elementSize = require("element-size");
 var cloneWithProps = React.addons.cloneWithProps;
 
-var LazyRender = React.createClass({displayName: 'LazyRender',
+var LazyRender = React.createClass({displayName: "LazyRender",
   propTypes: {
     children: React.PropTypes.array.isRequired,
     maxHeight: React.PropTypes.number.isRequired,
@@ -55,6 +56,11 @@ var LazyRender = React.createClass({displayName: 'LazyRender',
     }
   },
 
+  getElementHeight: function(element) {
+    var marginTop = parseInt(window.getComputedStyle(element).marginTop);
+    return elementSize(element)[1] - marginTop; //remove one margin since the margins are shared by adjacent elements
+  },
+
   componentWillReceiveProps: function(nextProps) {
     var childrenTop = Math.floor(this.state.scrollTop / this.state.childHeight);
     var childrenBottom = (nextProps.children.length - childrenTop -
@@ -87,8 +93,7 @@ var LazyRender = React.createClass({displayName: 'LazyRender',
   componentDidMount: function() {
     var firstChild = this.refs['child-0'];
     var el = firstChild.getDOMNode();
-    var childHeight = (el.style.height ? el.style.height.replace('px', '') :
-                       null) || el.clientHeight;
+    var childHeight = this.getElementHeight(el);
 
     var height = this.getHeight(
       this.props.children.length,

diff --git a/example/css/index.scss b/example/css/index.scss
@@ -48,3 +48,10 @@ p.info {
         margin-right: 10px;
     }
 }
+
+.list-item {
+  height: 20px;
+  padding: 5px 10px;
+  background-color: #E3F3FB;
+  margin: 5px 0px;
+}
diff --git a/example/index.jsx b/example/index.jsx
@@ -87,7 +87,7 @@ var Index = React.createClass({
   render: function() {
     var rows = _.range(this.state.limit).map(function(row) {
       var index = row % 50;
-      return <div style={{ height: 20, padding: "5px 10px" }}>
+      return <div className="list-item">
         #{row + 1} {NAMES[index]}
       </div>;
     });

diff --git a/src/LazyRender.jsx b/src/LazyRender.jsx
@@ -1,6 +1,7 @@
 "use strict";
 
 var React = require('react/addons');
+var elementSize = require("element-size");
 var cloneWithProps = React.addons.cloneWithProps;
 
 var LazyRender = React.createClass({
@@ -55,6 +56,11 @@ var LazyRender = React.createClass({
     }
   },
 
+  getElementHeight: function(element) {
+    var marginTop = parseInt(window.getComputedStyle(element).marginTop);
+    return elementSize(element)[1] - marginTop; //remove one margin since the margins are shared by adjacent elements
+  },
+
   componentWillReceiveProps: function(nextProps) {
     var childrenTop = Math.floor(this.state.scrollTop / this.state.childHeight);
     var childrenBottom = (nextProps.children.length - childrenTop -
@@ -87,8 +93,7 @@ var LazyRender = React.createClass({
   componentDidMount: function() {
     var firstChild = this.refs['child-0'];
     var el = firstChild.getDOMNode();
-    var childHeight = (el.style.height ? el.style.height.replace('px', '') :
-                       null) || el.clientHeight;
+    var childHeight = this.getElementHeight(el);
 
     var height = this.getHeight(
       this.props.children.length,