Merge pull request #100 from seatgeek/infinite-load

Allow initial elements to be obtained from onInfiniteLoad. Close #57.

.eslintrc

@@ -18,7 +18,20 @@
   "globals": {
     "require": false,
     "module": false,
-    "global": false
+    "global": false,
+
+    "SyntheticEvent": false,
+    "ReactElement": false,
+
+    "PreloadType": false,
+    "ElementHeight": false,
+    "CSSStyle": false,
+    "ReactInfiniteUtilityFunctions": false,
+    "ReactInfiniteProvidedDefaultProps": false,
+    "ReactInfiniteProps": false,
+    "ReactInfiniteComputedProps": false,
+    "ReactInfiniteState": false,
+    "InfiniteComputer": false
   },
 
   "env": {

.flowconfig

@@ -6,5 +6,6 @@
 [include]
 
 [libs]
+./typelib
 
 [options]

.npmrc

@@ -0,0 +1 @@
+save-prefix=

Gulpfile.js

@@ -1,6 +1,7 @@
 var gulp = require('gulp');
 var babel = require('gulp-babel');
 var server = require('gulp-webserver');
+var del = require('del');
 
 var browserifyCreator = require('./pipeline/browserify');
 
@@ -15,20 +16,27 @@ var envObject = {
 };
 var INFINITE_SOURCE = './src/react-infinite.jsx';
 
-gulp.task('build-bundle', browserifyCreator(false, envObject, INFINITE_SOURCE));
+var buildFunction = browserifyCreator(false, envObject, INFINITE_SOURCE);
+
+gulp.task('build-bundle', buildFunction);
+gulp.task('cleanly-build-bundle', ['clean'], buildFunction);
 gulp.task('watch-develop-bundle', browserifyCreator(true, {development: true}, INFINITE_SOURCE));
 
 // This task builds everything for release: the dist
 // folder is populated with react-infinite.js and
 // react-infinite.min.js, while the build folder is
 // provided with a copy of the source transpiled to ES5.
-gulp.task('release', ['build-bundle'], function() {
+gulp.task('release', ['cleanly-build-bundle'], function() {
   // Transpile CommonJS files to ES5 with React's tools.
   gulp.src(['./src/**/*.js', './src/**/*.jsx'])
       .pipe(babel())
       .pipe(gulp.dest('build'));
 });
 
+gulp.task('clean', function() {
+  return del(['build', 'dist']);
+});
+
 // This task is used to build the examples. It is used
 // in the development watch function as well.
 gulp.task('examples', function() {

__tests__/infinite_test.js

@@ -577,6 +577,32 @@ describe("Maintaining React Infinite's internal scroll state", function() {
 })
 
 describe('Handling infinite scrolling', function() {
+  it('triggers an infinite scroll the first time the component mounts if the elements do not fill the container', function() {
+    var infiniteSpy = jasmine.createSpy('infiniteSpy');
+    var elementHeight = 200;
+    var rootNode;
+
+    runs(function() {
+      rootNode = TestUtils.renderIntoDocument(
+        <Infinite elementHeight={elementHeight}
+                  containerHeight={800}
+                  infiniteLoadBeginBottomOffset={1000}
+                  onInfiniteLoad={infiniteSpy}
+                  timeScrollStateLastsForAfterUserScrolls={10000}
+                  className={"correct-class-name"}>
+        </Infinite>
+      );
+    });
+
+    waitsFor(function() {
+      return infiniteSpy.callCount > 0;
+    });
+
+    runs(function() {
+      expect(infiniteSpy).toHaveBeenCalled();
+    });
+  });
+
   it('considers a scroll to have occurred when the container itself is scrolled', function() {
     var infiniteSpy = jasmine.createSpy('infiniteSpy');
     var elementHeight = 200;
@@ -787,7 +813,7 @@ describe('React Infinite when the window is used as the Container', function() {
   });
 });
 
-describe("Specifiying React Infinite's preload amounts", function() {
+describe("Specifying React Infinite's preload amounts", function() {
   it('has correct preload batch size defaults', function() {
     var infinite = TestUtils.renderIntoDocument(
       <Infinite elementHeight={200}

package.json

@@ -15,7 +15,7 @@
     "infinite"
   ],
   "author": "Gareth Tan",
-  "license": "BSD2",
+  "license": "BSD-3-Clause",
   "bugs": {
     "url": "https://github.com/seatgeek/react-infinite/issues"
   },
@@ -51,15 +51,17 @@
     "babelify": "^6.3.0",
     "browserify": "^9.0.3",
     "coveralls": "^2.11.2",
-    "eslint": "~1.6.0",
+    "del": "2.0.2",
+    "eslint": "1.9.0",
     "eslint-config-semistandard": "^5.0.0",
     "eslint-config-standard": "^4.1.0",
     "eslint-plugin-react": "^3.2.3",
     "eslint-plugin-standard": "^1.2.0",
-    "flow-bin": "^0.17.0",
+    "flow-bin": "0.18.1",
     "gulp": "^3.8.8",
     "gulp-babel": "^5.2.1",
     "gulp-concat": "^2.4.3",
+    "gulp-size": "^2.0.0",
     "gulp-sourcemaps": "^1.2.4",
     "gulp-uglify": "^1.0.1",
     "gulp-webserver": "^0.9.1",
@@ -74,9 +76,9 @@
     "yargs": "^1.3.2"
   },
   "dependencies": {
-    "lodash.isarray": "^3.0.0",
-    "lodash.isfinite": "^3.0.0",
-    "object-assign": "^4.0.1",
+    "lodash.isarray": "3.0.4",
+    "lodash.isfinite": "3.2.0",
+    "object-assign": "4.0.1",
     "react": ">= 0.13.0"
   },
   "peerDependencies": {

pipeline/browserify.js

@@ -7,6 +7,7 @@ var sourcestream = require('vinyl-source-stream');
 var sourcemaps = require('gulp-sourcemaps');
 var uglify = require('gulp-uglify');
 var gulp = require('gulp');
+var size = require('gulp-size');
 
 function transformBundle(root, envObject) {
   root = root.bundle();
@@ -16,17 +17,26 @@ function transformBundle(root, envObject) {
         .pipe(buffer())
         .pipe(sourcemaps.init())
         .pipe(sourcemaps.write('.'))
+        .pipe(size({
+          title: 'Development bundle'
+        }))
         .pipe(gulp.dest('dist'));
   }
   if (envObject.production || envObject.release) {
     root.pipe(sourcestream('react-infinite.min.js'))
         .pipe(buffer())
         .pipe(uglify())
+        .pipe(size({
+          title: 'Release minified bundle'
+        }))
         .pipe(gulp.dest('dist'));
   }
   if (envObject.release) {
     root.pipe(sourcestream('react-infinite.js'))
       .pipe(buffer())
+      .pipe(size({
+        title: 'Release unminified bundle'
+      }))
       .pipe(gulp.dest('dist'));
   }
 }

src/computers/arrayInfiniteComputer.js

@@ -4,8 +4,9 @@ var InfiniteComputer = require('./infiniteComputer.js'),
     bs = require('../utils/binaryIndexSearch.js');
 
 class ArrayInfiniteComputer extends InfiniteComputer {
+  prefixHeightData: Array<number>;
 
-  constructor(heightData/* : Array<number> */, numberOfChildren/* : number */)/* : void */ {
+  constructor(heightData: Array<number>, numberOfChildren: number): void {
     super(heightData, numberOfChildren);
     this.prefixHeightData = this.heightData.reduce((acc, next) => {
       if (acc.length === 0) {
@@ -17,35 +18,35 @@ class ArrayInfiniteComputer extends InfiniteComputer {
     }, []);
   }
 
-  maybeIndexToIndex(index/* : ?number */)/* : number */ {
+  maybeIndexToIndex(index: ?number): number {
     if (typeof index === 'undefined' || index === null) {
       return this.prefixHeightData.length - 1;
     } else {
       return index;
     }
   }
 
-  getTotalScrollableHeight()/* : number */ {
+  getTotalScrollableHeight(): number {
     var length = this.prefixHeightData.length;
     return length === 0 ? 0 : this.prefixHeightData[length - 1];
   }
 
-  getDisplayIndexStart(windowTop/* : number */)/* : number */ {
+  getDisplayIndexStart(windowTop: number): number {
     var foundIndex = bs.binaryIndexSearch(this.prefixHeightData, windowTop, bs.opts.CLOSEST_HIGHER);
     return this.maybeIndexToIndex(foundIndex);
   }
 
-  getDisplayIndexEnd(windowBottom/* : number */)/* : number */ {
+  getDisplayIndexEnd(windowBottom: number): number {
     var foundIndex = bs.binaryIndexSearch(this.prefixHeightData, windowBottom, bs.opts.CLOSEST_HIGHER);
     return this.maybeIndexToIndex(foundIndex);
   }
 
-  getTopSpacerHeight(displayIndexStart/* : number */)/* : number */ {
+  getTopSpacerHeight(displayIndexStart: number): number {
     var previous = displayIndexStart - 1;
     return previous < 0 ? 0 : this.prefixHeightData[previous];
   }
 
-  getBottomSpacerHeight(displayIndexEnd/* : number */)/* : number */ {
+  getBottomSpacerHeight(displayIndexEnd: number): number {
     if (displayIndexEnd === -1) {
       return 0;
     }

src/computers/constantInfiniteComputer.js

@@ -3,27 +3,27 @@
 var InfiniteComputer = require('./infiniteComputer.js');
 
 class ConstantInfiniteComputer extends InfiniteComputer {
-  getTotalScrollableHeight()/* : number */ {
+  getTotalScrollableHeight(): number {
     return this.heightData * this.numberOfChildren;
   }
 
-  getDisplayIndexStart(windowTop/* : number */)/* : number */ {
+  getDisplayIndexStart(windowTop: number): number {
     return Math.floor(windowTop / this.heightData);
   }
 
-  getDisplayIndexEnd(windowBottom/* : number */)/* : number */ {
+  getDisplayIndexEnd(windowBottom: number): number {
     var nonZeroIndex = Math.ceil(windowBottom / this.heightData);
     if (nonZeroIndex > 0) {
       return nonZeroIndex - 1;
     }
     return nonZeroIndex;
   }
 
-  getTopSpacerHeight(displayIndexStart/* : number */)/* : number */ {
+  getTopSpacerHeight(displayIndexStart: number): number {
     return displayIndexStart * this.heightData;
   }
 
-  getBottomSpacerHeight(displayIndexEnd/* : number */)/* : number */ {
+  getBottomSpacerHeight(displayIndexEnd: number): number {
     var nonZeroIndex = displayIndexEnd + 1;
     return Math.max(0, (this.numberOfChildren - nonZeroIndex) * this.heightData);
   }