From 621f2b2e8029ce78349f7d63d568d77e73073e88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=9C=E5=9D=A4?= <Broltes@Broltes-MacBook-Pro.local>
Date: Sat, 26 Nov 2016 14:37:45 +0800
Subject: [PATCH] auto load more when scroll to bottom

---
 src/react-touch-loader.jsx | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/react-touch-loader.jsx b/src/react-touch-loader.jsx
index 69a4090..f05f0a0 100644
--- a/src/react-touch-loader.jsx
+++ b/src/react-touch-loader.jsx
@@ -24,7 +24,8 @@ export default React.createClass({
     },
     getDefaultProps () {
         return {
-            distanceToRefresh: 60
+            distanceToRefresh: 60,
+            autoLoadMore: 1
         };
     },
     setInitialTouch(touch) {
@@ -92,25 +93,37 @@ export default React.createClass({
             });
 
             // trigger refresh action
-            this.props.onRefresh(function(){
+            this.props.onRefresh(() => {
                 // resove
                 this.setState({
                     loaderState: STATS.refreshed,
                     pullHeight: 0
                 });
-            }.bind(this), function(){
+            }, () => {
                 // reject
                 this.setState(endState);// reset
-            }.bind(this));
+            });
         }else this.setState(endState);// reset
     },
 
     loadMore(){
         this.setState({ loaderState:  STATS.loading });
-        this.props.onLoadMore(function(){
+        this.props.onLoadMore(() => {
             // resolve
             this.setState({loaderState: STATS.init});
-        }.bind(this));
+        });
+    },
+    onScroll(e) {
+        if(
+            this.props.autoLoadMore &&
+            this.props.hasMore &&
+            this.state.loaderState != STATS.loading
+        ) {
+            let panel = e.currentTarget;
+            let scrollBottom = panel.scrollHeight - panel.clientHeight - panel.scrollTop;
+
+            if(scrollBottom < 5) this.loadMore();
+        }
     },
 
     componentWillReceiveProps(nextProps) {
@@ -158,6 +171,7 @@ export default React.createClass({
         return (
             <div ref="panel"
                 className={`tloader state-${loaderState} ${className}${progressClassName}`}
+                onScroll={this.onScroll}
                 onTouchStart={this.touchStart}
                 onTouchMove={this.touchMove}
                 onTouchEnd={this.touchEnd}