Merge branch 'master' of github.com:seatgeek/react-infinite

seatgeek · Jan 21, 2016 · 93a10ae · 93a10ae
2 parents 2d4c9f6 + 58471d8
commit 93a10ae
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 18 deletions.
diff --git a/__tests__/helpers/renderHelpers.js b/__tests__/helpers/renderHelpers.js
@@ -1,10 +1,7 @@
 var React = require('react');
 
 module.exports = {
-  divGenerator: function(number, height) {
-    number = number || 10;
-    height = height || 100;
-
+  divGenerator: function(number = 10, height = 100) {
     var divArray = [];
     for (var i = 0; i < number; i++) {
       divArray.push(<div className={'test-div-' + i} key={i} style={{height: height}}/>);

diff --git a/__tests__/infinite_test.js b/__tests__/infinite_test.js
@@ -909,3 +909,68 @@ describe('Rerendering React Infinite', function() {
     expect(rootNode.state.infiniteComputer.heightData).toEqual([10, 20, 30]);
   });
 });
+
+describe('Requesting all visible rows', function () {
+  var InfiniteWrapper = React.createClass({
+    getInitialState() {
+      return { currentRows: 0, totalRequests: 0 }
+    },
+
+    onInfiniteLoad() {
+      this.setState({
+        totalRequests: this.state.totalRequests + 1
+      });
+
+      if (this.state.currentRows < this.props.totalRows) {
+        this.setState({
+          currentRows: this.state.currentRows + 1
+        });
+      }
+    },
+
+    render() {
+      return (
+        <Infinite elementHeight={this.props.elementHeight}
+                  containerHeight={this.props.containerHeight}
+                  onInfiniteLoad={this.onInfiniteLoad}
+                  infiniteLoadBeginEdgeOffset={100}
+                  className={"correct-class-name"}>
+          {renderHelpers.divGenerator(this.state.currentRows, this.props.elementHeight)}
+        </Infinite>
+      );
+    }
+  });
+
+  it('will request all possible rows until the scroll height is met', function () {
+    var rootNode = TestUtils.renderIntoDocument(
+      <InfiniteWrapper totalRows={50}
+                       elementHeight={40}
+                       containerHeight={400} />
+    );
+
+    expect(rootNode.state.totalRequests).toEqual(10);
+    expect(rootNode.state.currentRows).toEqual(10);
+  });
+
+  it('will stop requesting when no further rows are provided', function () {
+    var rootNode = TestUtils.renderIntoDocument(
+      <InfiniteWrapper totalRows={3}
+                       elementHeight={40}
+                       containerHeight={400} />
+    );
+
+    expect(rootNode.state.totalRequests).toEqual(4);
+    expect(rootNode.state.currentRows).toEqual(3);
+  });
+
+  it('will work when no possible rows can be loaded', function () {
+    var rootNode = TestUtils.renderIntoDocument(
+      <InfiniteWrapper totalRows={0}
+                       elementHeight={40}
+                       containerHeight={400} />
+    );
+
+    expect(rootNode.state.totalRequests).toEqual(1);
+    expect(rootNode.state.currentRows).toEqual(0);
+  });
+});
diff --git a/package.json b/package.json
@@ -83,9 +83,11 @@
   "dependencies": {
     "lodash.isarray": "3.0.4",
     "lodash.isfinite": "3.2.0",
-    "object-assign": "4.0.1",
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0"
+    "object-assign": "4.0.1"
+  },
+  "peerDependencies": {
+    "react": "0.14.x",
+    "react-dom": "0.14.x"
   },
   "browserify": {
     "transform": [

diff --git a/src/react-infinite.jsx b/src/react-infinite.jsx
@@ -287,23 +287,27 @@ var Infinite = React.createClass({
           this.preservedScrollState);
       }
     }
-    if (React.Children.count(this.props.children) !== React.Children.count(prevProps.children)) {
+
+    const hasLoadedMoreChildren = React.Children.count(this.props.children) !== React.Children.count(prevProps.children);
+    if (hasLoadedMoreChildren) {
       var newApertureState = infiniteHelpers.recomputeApertureStateFromOptionsAndScrollTop(
         this.state,
         this.utils.getScrollTop()
       );
       this.setState(newApertureState);
     }
+
+    const isMissingVisibleRows = hasLoadedMoreChildren && !this.hasAllVisibleItems() && !this.state.isInfiniteLoading;
+    if (isMissingVisibleRows) {
+      this.onInfiniteLoad();
+    }
   },
 
   componentDidMount() {
     this.utils.subscribeToScrollListener();
-    if (_isFinite(this.computedProps.infiniteLoadBeginEdgeOffset) &&
-        this.state.infiniteComputer.getTotalScrollableHeight() < this.computedProps.containerHeight) {
-      this.setState({
-        isInfiniteLoading: true
-      });
-      this.computedProps.onInfiniteLoad();
+
+    if (!this.hasAllVisibleItems()) {
+      this.onInfiniteLoad();
     }
 
     if (this.props.displayBottomUpwards) {
@@ -352,6 +356,11 @@ var Infinite = React.createClass({
     return this.state.infiniteComputer.getTotalScrollableHeight() - this.computedProps.containerHeight;
   },
 
+  hasAllVisibleItems(): boolean {
+    return !(_isFinite(this.computedProps.infiniteLoadBeginEdgeOffset) &&
+        this.state.infiniteComputer.getTotalScrollableHeight() < this.computedProps.containerHeight);
+  },
+
   passedEdgeForInfiniteScroll(scrollTop: number): boolean {
     if (this.computedProps.displayBottomUpwards) {
       return !this.shouldAttachToBottom && scrollTop < this.computedProps.infiniteLoadBeginEdgeOffset;
@@ -362,6 +371,11 @@ var Infinite = React.createClass({
     }
   },
 
+  onInfiniteLoad() {
+    this.setState({ isInfiniteLoading: true });
+    this.computedProps.onInfiniteLoad();
+  },
+
   handleScroll(scrollTop: number) {
     this.shouldAttachToBottom = this.computedProps.displayBottomUpwards &&
         scrollTop >= this.getLowestPossibleScrollTop();
@@ -374,10 +388,8 @@ var Infinite = React.createClass({
     );
 
     if (this.passedEdgeForInfiniteScroll(scrollTop) && !this.state.isInfiniteLoading) {
-      this.setState(Object.assign({}, newApertureState, {
-        isInfiniteLoading: true
-      }));
-      this.computedProps.onInfiniteLoad();
+      this.setState(Object.assign({}, newApertureState));
+      this.onInfiniteLoad();
     } else {
       this.setState(newApertureState);
     }