@@ -5,11 +5,11 @@ const h = React.createElement;
5
5
const defaultSentinel = h ( 'div' , { style : { width : 1 , height : 1 } } ) ;
6
6
7
7
export interface InfiniteScrollProps {
8
+ interval ?: number ;
8
9
cursor ?: number | string ;
9
10
sentinel ?: React . ReactElement < any > ;
10
11
hasMore ?: boolean ;
11
12
margin ?: number ;
12
- poll ?: number ;
13
13
loadMore : ( ) => void ;
14
14
}
15
15
@@ -18,29 +18,62 @@ export interface InfiniteScrollState {
18
18
19
19
export class InfiniteScroll extends React . Component < InfiniteScrollProps , InfiniteScrollProps > {
20
20
static defaultProps = {
21
+ interval : 1e3 ,
21
22
sentinel : defaultSentinel ,
22
23
hasMore : true ,
23
24
margin : 100 ,
24
25
} ;
25
26
27
+ sentinelVisible = false ;
26
28
lastLoadMoreCursor : number | string | null = null ;
29
+ timer : any ;
30
+ mounted : boolean = true ;
31
+
32
+ componentWillUnmount ( ) {
33
+ this . mounted = false ;
34
+ this . stopTimer ( ) ;
35
+ }
36
+
37
+ startTimer ( ) {
38
+ if ( this . props . interval ) {
39
+ this . timer = setTimeout ( ( ) => {
40
+ if ( ! this . mounted ) return ;
41
+ if ( ! this . props . hasMore ) return ;
42
+ if ( ! this . sentinelVisible ) return ;
43
+ this . loadMore ( ) ;
44
+ this . startTimer ( ) ;
45
+ } , this . props . interval ) ;
46
+ }
47
+ }
48
+
49
+ stopTimer ( ) {
50
+ clearTimeout ( this . timer ) ;
51
+ }
27
52
28
53
onViewportChange = ( { visible} ) => {
54
+ this . sentinelVisible = ! ! visible ;
29
55
if ( visible ) {
30
- if ( this . lastLoadMoreCursor !== this . props . cursor ) {
31
- this . lastLoadMoreCursor = this . props . cursor ;
32
- this . props . loadMore ( ) ;
33
- }
56
+ this . loadMore ( ) ;
57
+ this . startTimer ( ) ;
58
+ } else {
59
+ this . stopTimer ( ) ;
34
60
}
35
61
} ;
36
62
63
+ loadMore ( ) {
64
+ if ( this . lastLoadMoreCursor !== this . props . cursor ) {
65
+ this . lastLoadMoreCursor = this . props . cursor ;
66
+ this . props . loadMore ( ) ;
67
+ }
68
+ }
69
+
37
70
render ( ) {
38
71
const { props} = this ;
39
- const { children, hasMore, sentinel, margin, poll } = props ;
72
+ const { children, hasMore, sentinel, margin, interval } = props ;
40
73
return h ( React . Fragment , null ,
41
74
children ,
42
75
hasMore &&
43
- h ( ViewportScrollSensor , { margin : [ 0 , 0 , margin , 0 ] , poll, onChange : this . onViewportChange } , sentinel ) ,
76
+ h ( ViewportScrollSensor , { margin : [ 0 , 0 , margin , 0 ] , poll : interval , onChange : this . onViewportChange } , sentinel ) ,
44
77
) ;
45
78
}
46
79
}
0 commit comments