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

Comparing version 3.0.1 to 3.1.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+v3.1.0 - Tue, 27 Oct 2015 17:39:32 GMT
+--------------------------------------
+
+- [04764f8](../../commit/04764f8) [added] ability to jump to the bottom of a row instead of the top
+
+
+
 v3.0.1 - Tue, 27 Oct 2015 04:40:28 GMT
@@ -2,0 +9,0 @@ --------------------------------------

example.js

 import React from 'react';
 import InfiniteScroller from './InfiniteScroller.js';
 import Example2 from './example2.js';
+import Example3 from './example3.js';
 
@@ -83,3 +84,5 @@ function getFakeRowsWithHeights(numberOfRows) {
     <Example2 />
+    <div style={{width: 100}}/>
+    <Example3 />
   </div>
   ), document.getElementById('container'));

example2.js

@@ -28,3 +28,3 @@ import React from 'react';
         <h3>
-          Example 2: 10 rows of random height with bottom row the "jumpToRow"
+          Example 2: Ten rows of random height with last row the "rowToJumpTo"
         </h3>
@@ -31,0 +31,0 @@ <button onClick={() => {

index.js

@@ -23,3 +23,2 @@ 'use strict';
     containerHeight: _react.PropTypes.number.isRequired,
-    preloadRowStart: _react.PropTypes.number.isRequired,
     totalNumberOfRows: _react.PropTypes.number.isRequired,
@@ -30,2 +29,3 @@ renderRow: _react.PropTypes.func.isRequired,
     }),
+    jumpToBottomOfRow: _react.PropTypes.bool,
     containerClassName: _react.PropTypes.string,
@@ -186,4 +186,10 @@ onScroll: _react.PropTypes.func
       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
-      adjustInfiniteContainerByThisAmount = infiniteContainer.getBoundingClientRect().top - visibleRowsContainer.children[this.state.visibleRows.indexOf(this.rowJumpedTo)].getBoundingClientRect().top;
+      if (this.props.jumpToBottomOfRow) {
+        adjustInfiniteContainerByThisAmount = icbr.bottom - rbr.bottom;
+      } else {
+        adjustInfiniteContainerByThisAmount = icbr.top - rbr.top;
+      }
       infiniteContainer.scrollTop = infiniteContainer.scrollTop - adjustInfiniteContainerByThisAmount;
@@ -190,0 +196,0 @@ } else if (visibleRowsContainer.getBoundingClientRect().top > infiniteContainer.getBoundingClientRect().top) {

InfiniteScroller.js

@@ -10,3 +10,2 @@ import React, { PropTypes } from 'react';
     containerHeight: PropTypes.number.isRequired,
-    preloadRowStart: PropTypes.number.isRequired,
     totalNumberOfRows: PropTypes.number.isRequired,
@@ -17,2 +16,3 @@ renderRow: PropTypes.func.isRequired,
     }),
+    jumpToBottomOfRow: PropTypes.bool,
     containerClassName: PropTypes.string,
@@ -173,4 +173,10 @@ onScroll: PropTypes.func,
       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
-      adjustInfiniteContainerByThisAmount = infiniteContainer.getBoundingClientRect().top - visibleRowsContainer.children[(this.state.visibleRows.indexOf(this.rowJumpedTo))].getBoundingClientRect().top;
+      if (this.props.jumpToBottomOfRow) {
+        adjustInfiniteContainerByThisAmount = icbr.bottom - rbr.bottom;
+      } else {
+        adjustInfiniteContainerByThisAmount = icbr.top - rbr.top;
+      }
       infiniteContainer.scrollTop = infiniteContainer.scrollTop - adjustInfiniteContainerByThisAmount;
@@ -177,0 +183,0 @@ } else if (visibleRowsContainer.getBoundingClientRect().top > infiniteContainer.getBoundingClientRect().top) {

package.json

 {
   "name": "react-variable-height-infinite-scroller",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "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",

README.md

@@ -30,5 +30,4 @@ # react-variable-height-infinite-scroller
 | onScroll `function` | *(optional)* no-op |  Hook to call on scroll
+| jumpToBottomOfRow `function` | *(optional)* false |  By default jumping to a row jumps to the top. Set to true if you want to jump to the bottom of the row
 
-
-
 Taken from the demo code: 
@@ -39,3 +38,2 @@
 import InfiniteScroller from './InfiniteScroller.js';
-import Example2 from './example2.js';
 
@@ -115,3 +113,3 @@ function getFakeRowsWithHeights(numberOfRows) {
 
-React.render(<Example />, document.getElementById('container'));
+React.render(<Example1 />, document.getElementById('container'));
 ```
@@ -118,0 +116,0 @@

No alert changes

Improved metrics

Total package byte prevSize

710400

1.08%

Number of package files

16

6.67%

Lines of code

19466

1.05%

Worsened metrics

Number of lines in readme file

127

-1.55%

No dependency changes