react-variable-height-infinite-scroller - npm Package Compare versions

Comparing version 3.3.1 to 3.3.3

CHANGELOG.md

@@ -0,1 +1,8 @@
+v3.3.3 - Wed, 13 Jan 2016 07:33:19 GMT
+--------------------------------------
+
+- [0f4e0cf](../../commit/0f4e0cf) [fixed] error with jumping to a row when dealing with a  small number of rows + small row heights relative to the size of container
+
+
+
 v3.3.1 - Sat, 02 Jan 2016 08:27:05 GMT
@@ -2,0 +9,0 @@ --------------------------------------

example.js

@@ -5,2 +5,3 @@ import React from 'react';
 import Example3 from './example3.js';
+import Example4 from './example4.js';
 
@@ -87,3 +88,5 @@ function getFakeRowsWithHeights(numberOfRows) {
     <Example3 />
+    <div style={{width: 100}}/>
+    <Example4 />
   </div>
   ), document.getElementById('container'));

index.js

@@ -170,4 +170,15 @@ 'use strict';
     }
-
     var adjustInfiniteContainerByThisAmount = undefined;
+    function adjustScrollHeightToRowJump() {
+      this.rowJumpTriggered = false;
+      var icbr = infiniteContainer.getBoundingClientRect();
+      var vrbr = visibleRowsContainer.children[this.state.visibleRows.indexOf(this.rowJumpedTo)].getBoundingClientRect();
+      // if a rowJump has been triggered, we need to adjust the row to sit at the top of the infinite container
+      if (this.props.jumpToBottomOfRow) {
+        adjustInfiniteContainerByThisAmount = icbr.bottom - vrbr.bottom;
+      } else {
+        adjustInfiniteContainerByThisAmount = icbr.top - vrbr.top;
+      }
+      infiniteContainer.scrollTop = infiniteContainer.scrollTop - adjustInfiniteContainerByThisAmount;
+    }
     // check if the visible rows fill up the viewport
@@ -181,20 +192,15 @@ // tnrtodo: maybe put logic in here to reshrink the number of rows to display... maybe...
       } else {
-        // there aren't more rows that we can load at the bottom so we load more at the top
+        // there aren't more rows that we can load at the bottom
         if (this.rowStart - 1 > 0) {
+          // so we load more at the top
           this.prepareVisibleRows(this.rowStart - 1, this.state.visibleRows.length + 1); // don't want to just shift view
-        } else if (this.state.visibleRows.length < this.props.totalNumberOfRows) {
-            this.prepareVisibleRows(0, this.state.visibleRows.length + 1);
+        } else {
+            // all the rows are already visible
+            if (this.rowJumpTriggered) {
+              adjustScrollHeightToRowJump.call(this);
+            }
           }
       }
     } else if (this.rowJumpTriggered) {
-      this.rowJumpTriggered = false;
-      var icbr = infiniteContainer.getBoundingClientRect();
-      var rbr = visibleRowsContainer.children[this.state.visibleRows.indexOf(this.rowJumpedTo)].getBoundingClientRect();
-      // if a rowJump has been triggered, we need to adjust the row to sit at the top of the infinite container
-      if (this.props.jumpToBottomOfRow) {
-        adjustInfiniteContainerByThisAmount = icbr.bottom - rbr.bottom;
-      } else {
-        adjustInfiniteContainerByThisAmount = icbr.top - rbr.top;
-      }
-      infiniteContainer.scrollTop = infiniteContainer.scrollTop - adjustInfiniteContainerByThisAmount;
+      adjustScrollHeightToRowJump.call(this);
     } else if (visibleRowsContainer.getBoundingClientRect().top > infiniteContainer.getBoundingClientRect().top) {
@@ -201,0 +207,0 @@ // scroll to align the tops of the boxes

InfiniteScroller.js

@@ -154,4 +154,15 @@ import React, { PropTypes } from 'react';
     }
-
     let adjustInfiniteContainerByThisAmount;
+    function adjustScrollHeightToRowJump() {
+      this.rowJumpTriggered = false;
+      const icbr = infiniteContainer.getBoundingClientRect();
+      const vrbr = visibleRowsContainer.children[(this.state.visibleRows.indexOf(this.rowJumpedTo))].getBoundingClientRect();
+      // if a rowJump has been triggered, we need to adjust the row to sit at the top of the infinite container
+      if (this.props.jumpToBottomOfRow) {
+        adjustInfiniteContainerByThisAmount = icbr.bottom - vrbr.bottom;
+      } else {
+        adjustInfiniteContainerByThisAmount = icbr.top - vrbr.top;
+      }
+      infiniteContainer.scrollTop = infiniteContainer.scrollTop - adjustInfiniteContainerByThisAmount;
+    }
     // check if the visible rows fill up the viewport
@@ -165,20 +176,15 @@ // tnrtodo: maybe put logic in here to reshrink the number of rows to display... maybe...
       } else {
-        // there aren't more rows that we can load at the bottom so we load more at the top
+        // there aren't more rows that we can load at the bottom
         if (this.rowStart - 1 > 0) {
+          // so we load more at the top
           this.prepareVisibleRows(this.rowStart - 1, this.state.visibleRows.length + 1); // don't want to just shift view
-        } else if (this.state.visibleRows.length < this.props.totalNumberOfRows) {
-          this.prepareVisibleRows(0, this.state.visibleRows.length + 1);
+        } else {
+          // all the rows are already visible
+          if (this.rowJumpTriggered) {
+            adjustScrollHeightToRowJump.call(this);
+          }
         }
       }
     } else if (this.rowJumpTriggered) {
-      this.rowJumpTriggered = false;
-      const icbr = infiniteContainer.getBoundingClientRect();
-      const rbr = visibleRowsContainer.children[(this.state.visibleRows.indexOf(this.rowJumpedTo))].getBoundingClientRect();
-      // if a rowJump has been triggered, we need to adjust the row to sit at the top of the infinite container
-      if (this.props.jumpToBottomOfRow) {
-        adjustInfiniteContainerByThisAmount = icbr.bottom - rbr.bottom;
-      } else {
-        adjustInfiniteContainerByThisAmount = icbr.top - rbr.top;
-      }
-      infiniteContainer.scrollTop = infiniteContainer.scrollTop - adjustInfiniteContainerByThisAmount;
+      adjustScrollHeightToRowJump.call(this);
     } else if (visibleRowsContainer.getBoundingClientRect().top > infiniteContainer.getBoundingClientRect().top) {
@@ -185,0 +191,0 @@ // scroll to align the tops of the boxes

package.json

 {
   "name": "react-variable-height-infinite-scroller",
-  "version": "3.3.1",
+  "version": "3.3.3",
   "description": "variable row height scroller that renders just the visible rows with no precomputation of row-height necessary",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

756642

0.45%

Number of package files

18

5.88%

Lines of code

18935

0.51%

No dependency changes