react-infinite-scroll-component 4.4.0 → 4.5.3

package/README.md

@@ -71,6 +71,7 @@ name | type | description
 **scrollThreshold** | number | 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`
+**className** | string | add any custom class you want
 **style** | object | any style which you want to override
 **height** | number | optional, give only if you want to have a fixed height scrolling content
 **scrollableTarget** | node or string | optional, reference to a (parent) DOM element that is already providing overflow scrollbars to the `InfiniteScroll` component. *You should provide the `id` of the DOM node preferably.*

package/app/index.js

@@ -5,17 +5,21 @@ import { ThresholdUnits, parseThreshold } from "./utils/threshold";
 
 export default class InfiniteScroll extends Component {
   constructor(props) {
-    super();
+    super(props);
+
+    this.lastScrollTop = 0;
+    this.actionTriggered = false;
+
     this.state = {
       showLoader: false,
-      lastScrollTop: 0,
-      actionTriggered: false,
       pullToRefreshThresholdBreached: false
     };
+
     // variables to keep track of pull down behaviour
     this.startY = 0;
     this.currentY = 0;
     this.dragging = false;
+
     // will be populated in componentDidMount
     // based on the height of the pull down element
     this.maxPullDownDistance = 0;
@@ -85,10 +89,10 @@ export default class InfiniteScroll extends Component {
     // do nothing when dataLength and key are unchanged
     if (this.props.key === props.key && this.props.dataLength === props.dataLength) return;
 
+    this.actionTriggered = false;
     // update state when new data was sent in
     this.setState({
       showLoader: false,
-      actionTriggered: false,
       pullToRefreshThresholdBreached: false
     });
   }
@@ -108,7 +112,7 @@ export default class InfiniteScroll extends Component {
   }
 
   onStart(evt) {
-    if (this.state.lastScrollTop) return;
+    if (this.lastScrollTop) return;
 
     this.dragging = true;
     this.startY = evt.pageY || evt.touches[0].pageY;
@@ -150,9 +154,12 @@ export default class InfiniteScroll extends Component {
     }
 
     requestAnimationFrame(() => {
-      this._infScroll.style.overflow = "auto";
-      this._infScroll.style.transform = "none";
-      this._infScroll.style.willChange = "none";
+      // this._infScroll
+      if (this._infScroll) {
+          this._infScroll.style.overflow = "auto";
+          this._infScroll.style.transform = "none";
+          this._infScroll.style.willChange = "none";
+      }
     });
   }
 
@@ -191,16 +198,18 @@ export default class InfiniteScroll extends Component {
 
     // return immediately if the action has already been triggered,
     // prevents multiple triggers.
-    if (this.state.actionTriggered) return;
+    if (this.actionTriggered) return;
 
     let atBottom = this.isElementAtBottom(target, this.props.scrollThreshold);
 
     // call the `next` function in the props to trigger the next data fetch
     if (atBottom && this.props.hasMore) {
-      this.setState({ actionTriggered: true, showLoader: true });
+      this.actionTriggered = true;
+      this.setState({ showLoader: true });
       this.props.next();
     }
-    this.setState({ lastScrollTop: target.scrollTop });
+
+    this.lastScrollTop = target.scrollTop;
   }
 
   render() {
@@ -223,7 +232,7 @@ export default class InfiniteScroll extends Component {
     return (
       <div style={outerDivStyle}>
         <div
-          className="infinite-scroll-component"
+          className={`infinite-scroll-component ${this.props.className || ''}`}
           ref={infScroll => (this._infScroll = infScroll)}
           style={style}
         >
@@ -240,10 +249,9 @@ export default class InfiniteScroll extends Component {
                   top: -1 * this.maxPullDownDistance
                 }}
               >
-                {!this.state.pullToRefreshThresholdBreached &&
-                  this.props.pullDownToRefreshContent}
-                {this.state.pullToRefreshThresholdBreached &&
-                  this.props.releaseToRefreshContent}
+                {this.state.pullToRefreshThresholdBreached
+                  ? this.props.releaseToRefreshContent
+                  : this.props.pullDownToRefreshContent}
               </div>
             </div>
           )}

package/app/utils/threshold.js

@@ -17,14 +17,14 @@ export function parseThreshold(scrollThreshold) {
   }
 
   if (typeof scrollThreshold === "string") {
-    if (scrollThreshold.match(/^(\d*(.\d+)?)px$/)) {
+    if (scrollThreshold.match(/^(\d*(\.\d+)?)px$/)) {
       return {
         unit: ThresholdUnits.Pixel,
         value: parseFloat(scrollThreshold),
       };
     }
 
-    if (scrollThreshold.match(/^(\d*(.\d+)?)%$/)) {
+    if (scrollThreshold.match(/^(\d*(\.\d+)?)%$/)) {
       return {
         unit: ThresholdUnits.Percent,
         value: parseFloat(scrollThreshold),

package/lib/index.js

@@ -92,17 +92,21 @@ return /******/ (function(modules) { // webpackBootstrap
 	  function InfiniteScroll(props) {
 	    _classCallCheck(this, InfiniteScroll);
 
-	    _get(Object.getPrototypeOf(InfiniteScroll.prototype), "constructor", this).call(this);
+	    _get(Object.getPrototypeOf(InfiniteScroll.prototype), "constructor", this).call(this, props);
+
+	    this.lastScrollTop = 0;
+	    this.actionTriggered = false;
+
 	    this.state = {
 	      showLoader: false,
-	      lastScrollTop: 0,
-	      actionTriggered: false,
 	      pullToRefreshThresholdBreached: false
 	    };
+
 	    // variables to keep track of pull down behaviour
 	    this.startY = 0;
 	    this.currentY = 0;
 	    this.dragging = false;
+
 	    // will be populated in componentDidMount
 	    // based on the height of the pull down element
 	    this.maxPullDownDistance = 0;
@@ -165,10 +169,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	      // do nothing when dataLength and key are unchanged
 	      if (this.props.key === props.key && this.props.dataLength === props.dataLength) return;
 
+	      this.actionTriggered = false;
 	      // update state when new data was sent in
 	      this.setState({
 	        showLoader: false,
-	        actionTriggered: false,
 	        pullToRefreshThresholdBreached: false
 	      });
 	    }
@@ -187,7 +191,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }, {
 	    key: "onStart",
 	    value: function onStart(evt) {
-	      if (this.state.lastScrollTop) return;
+	      if (this.lastScrollTop) return;
 
 	      this.dragging = true;
 	      this.startY = evt.pageY || evt.touches[0].pageY;
@@ -232,9 +236,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	      }
 
 	      requestAnimationFrame(function () {
-	        _this._infScroll.style.overflow = "auto";
-	        _this._infScroll.style.transform = "none";
-	        _this._infScroll.style.willChange = "none";
+	        // this._infScroll
+	        if (_this._infScroll) {
+	          _this._infScroll.style.overflow = "auto";
+	          _this._infScroll.style.transform = "none";
+	          _this._infScroll.style.willChange = "none";
+	        }
 	      });
 	    }
 	  }, {
@@ -269,16 +276,18 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	      // return immediately if the action has already been triggered,
 	      // prevents multiple triggers.
-	      if (this.state.actionTriggered) return;
+	      if (this.actionTriggered) return;
 
 	      var atBottom = this.isElementAtBottom(target, this.props.scrollThreshold);
 
 	      // call the `next` function in the props to trigger the next data fetch
 	      if (atBottom && this.props.hasMore) {
-	        this.setState({ actionTriggered: true, showLoader: true });
+	        this.actionTriggered = true;
+	        this.setState({ showLoader: true });
 	        this.props.next();
 	      }
-	      this.setState({ lastScrollTop: target.scrollTop });
+
+	      this.lastScrollTop = target.scrollTop;
 	    }
 	  }, {
 	    key: "render",
@@ -301,7 +310,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        _react2["default"].createElement(
 	          "div",
 	          {
-	            className: "infinite-scroll-component",
+	            className: "infinite-scroll-component " + (this.props.className || ''),
 	            ref: function (infScroll) {
 	              return _this3._infScroll = infScroll;
 	            },
@@ -325,8 +334,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                  top: -1 * this.maxPullDownDistance
 	                }
 	              },
-	              !this.state.pullToRefreshThresholdBreached && this.props.pullDownToRefreshContent,
-	              this.state.pullToRefreshThresholdBreached && this.props.releaseToRefreshContent
+	              this.state.pullToRefreshThresholdBreached ? this.props.releaseToRefreshContent : this.props.pullDownToRefreshContent
 	            )
 	          ),
 	          this.props.children,
@@ -410,14 +418,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }
 
 	  if (typeof scrollThreshold === "string") {
-	    if (scrollThreshold.match(/^(\d*(.\d+)?)px$/)) {
+	    if (scrollThreshold.match(/^(\d*(\.\d+)?)px$/)) {
 	      return {
 	        unit: ThresholdUnits.Pixel,
 	        value: parseFloat(scrollThreshold)
 	      };
 	    }
 
-	    if (scrollThreshold.match(/^(\d*(.\d+)?)%$/)) {
+	    if (scrollThreshold.match(/^(\d*(\.\d+)?)%$/)) {
 	      return {
 	        unit: ThresholdUnits.Percent,
 	        value: parseFloat(scrollThreshold)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-infinite-scroll-component",
-  "version": "4.4.0",
+  "version": "4.5.3",
   "description": "An Infinite Scroll component in react.",
   "main": "lib/index.js",
   "scripts": {