Merge pull request #69 from vladik7244/feature/threshold-units

Support threshold with units. e.g 100px, 80%...

Author: ankeetmaini

README.md

@@ -68,7 +68,7 @@ name | type | description
 **children** | node (list) | the data items which you need to scroll.
 **dataLength** | number | set the length of the data.This will unlock the subsequent calls to next.
 **loader** | node | you can send a loader component to show while the component waits for the next load of data. e.g. `<h3>Loading...</h3>` or any fancy loader element
-**scrollThreshold** | number | a threshold value after that the `InfiniteScroll` will call `next`. By default it's `0.8`. It means the `next` will be called when the user comes below 80% of the total height.
+**scrollThreshold** | number &#124; string | A threshold value defining when `InfiniteScroll` will call `next`. Default value is `0.8`. It means the `next` will be called when user comes below 80% of the total height. If you pass threshold in pixels (`scrollThreshold="200px"`), `next` will be called once you scroll at least (100% - scrollThreshold) pixels down.  
 **onScroll** | function | a function that will listen to the scroll event on the scrolling container. Note that the scroll event is throttled, so you may not receive as many events as you would expect. 
 **endMessage** | node |  this message is shown to the user when he has seen all the records which means he's at the bottom and `hasMore` is `false`
 **style** | object | any style which you want to override

app/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import throttle from './utils/throttle';
+import throttle from "./utils/throttle";
+import { ThresholdUnits, parseThreshold } from "./utils/threshold";
 
 export default class InfiniteScroll extends Component {
   constructor(props) {
@@ -161,8 +162,16 @@ export default class InfiniteScroll extends Component {
         ? window.screen.availHeight
         : target.clientHeight;
 
+    const threshold = parseThreshold(scrollThreshold);
+
+    if (threshold.unit === ThresholdUnits.Pixel) {
+      return (
+        target.scrollTop + clientHeight >= target.scrollHeight - threshold.value
+      );
+    }
+
     return (
-      target.scrollTop + clientHeight >= scrollThreshold * target.scrollHeight
+      target.scrollTop + clientHeight >= threshold.value / 100 * target.scrollHeight
     );
   }
 
@@ -263,7 +272,7 @@ InfiniteScroll.propTypes = {
   hasMore: PropTypes.bool,
   children: PropTypes.node,
   loader: PropTypes.node.isRequired,
-  scrollThreshold: PropTypes.number,
+  scrollThreshold: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   endMessage: PropTypes.node,
   style: PropTypes.object,
   height: PropTypes.number,

app/utils/threshold.js

@@ -0,0 +1,42 @@
+export const ThresholdUnits = {
+  Pixel: 'Pixel',
+  Percent: 'Percent',
+};
+
+const defaultThreshold = {
+  unit: ThresholdUnits.Percent,
+  value: 0.8,
+};
+
+export function parseThreshold(scrollThreshold) {
+  if (typeof scrollThreshold === "number") {
+    return {
+      unit: ThresholdUnits.Percent,
+      value: scrollThreshold * 100,
+    };
+  }
+
+  if (typeof scrollThreshold === "string") {
+    if (scrollThreshold.match(/^(\d*(.\d+)?)px$/)) {
+      return {
+        unit: ThresholdUnits.Pixel,
+        value: parseFloat(scrollThreshold),
+      };
+    }
+
+    if (scrollThreshold.match(/^(\d*(.\d+)?)%$/)) {
+      return {
+        unit: ThresholdUnits.Percent,
+        value: parseFloat(scrollThreshold),
+      };
+    }
+
+    console.warn('scrollThreshold format is invalid. Valid formats: "120px", "50%"...');
+
+    return defaultThreshold;
+  }
+
+  console.warn('scrollThreshold should be string or number');
+
+  return defaultThreshold;
+}