react-infinite-scroll-component 4.5.2 → 4.5.3

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;
@@ -194,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() {
@@ -243,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/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;
@@ -272,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",
@@ -328,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,

package/package.json

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