1
+
2
+ import React , { Component , PureComponent , PropTypes } from 'react'
3
+ import { render } from 'react-dom'
4
+ import ReactPullLoad , { STATS } from 'index.js'
5
+ import './App.css'
6
+
7
+
8
+ const defaultStyle = {
9
+ width : "100%" ,
10
+ textAlign : "center" ,
11
+ fontSize : "20px" ,
12
+ lineHeight : "1.5"
13
+ }
14
+
15
+ const loadMoreLimitNum = 2 ;
16
+
17
+ const cData = [
18
+ "http://img1.gtimg.com/15/1580/158031/15803178_1200x1000_0.jpg" ,
19
+ "http://img1.gtimg.com/15/1580/158031/15803179_1200x1000_0.jpg" ,
20
+ "http://img1.gtimg.com/15/1580/158031/15803181_1200x1000_0.jpg" ,
21
+ "http://img1.gtimg.com/15/1580/158031/15803182_1200x1000_0.jpg" ,
22
+ "http://img1.gtimg.com/15/1580/158031/15803183_1200x1000_0.jpg" ,
23
+ // "http://img1.gtimg.com/15/1580/158031/15803184_1200x1000_0.jpg",
24
+ // "http://img1.gtimg.com/15/1580/158031/15803186_1200x1000_0.jpg"
25
+ ]
26
+
27
+ export class App extends Component {
28
+ constructor ( ) {
29
+ super ( ) ;
30
+ this . state = {
31
+ hasMore : true ,
32
+ data : cData ,
33
+ action : STATS . init ,
34
+ index : loadMoreLimitNum //loading more test time limit
35
+ }
36
+ }
37
+
38
+ handleAction = ( action ) => {
39
+ console . info ( action , this . state . action , action === this . state . action ) ;
40
+ if ( action !== STATS . loading ) {
41
+ return false ;
42
+ }
43
+
44
+ this . setState ( {
45
+ hasMore : true
46
+ } ) ;
47
+ setTimeout ( ( ) => {
48
+ if ( this . state . index === 0 ) {
49
+ this . setState ( {
50
+ action : STATS . reset ,
51
+ hasMore : false
52
+ } ) ;
53
+ } else {
54
+ this . setState ( {
55
+ data : [ ...this . state . data , cData [ 0 ] , cData [ 0 ] ] ,
56
+ action : STATS . reset ,
57
+ index : this . state . index - 1
58
+ } ) ;
59
+ }
60
+ } , 3000 )
61
+
62
+ //DO NOT modify below code
63
+ this . setState ( {
64
+ action : action
65
+ } )
66
+ }
67
+
68
+ getScrollTop = ( ) => {
69
+ if ( this . refs . reactpullload ) {
70
+ console . info ( this . refs . reactpullload . getScrollTop ( ) ) ;
71
+ }
72
+ }
73
+ setScrollTop = ( ) => {
74
+ if ( this . refs . reactpullload ) {
75
+ console . info ( this . refs . reactpullload . setScrollTop ( 100 ) ) ;
76
+ }
77
+ }
78
+
79
+ render ( ) {
80
+ const {
81
+ data,
82
+ hasMore
83
+ } = this . state
84
+
85
+ const fixHeaderStyle = {
86
+ position : "fixed" ,
87
+ width : "100%" ,
88
+ height : "50px" ,
89
+ color : "#fff" ,
90
+ lineHeight : "50px" ,
91
+ backgroundColor : "#e24f37" ,
92
+ left : 0 ,
93
+ top : 0 ,
94
+ textAlign : "center" ,
95
+ zIndex : 1
96
+ }
97
+
98
+ const fixButtonStyle = {
99
+ position : "fixed" ,
100
+ top : 200 ,
101
+ width : "100%" ,
102
+ }
103
+
104
+ return (
105
+ < div >
106
+ < div style = { fixHeaderStyle } >
107
+ fixed header
108
+ </ div >
109
+ < ReactPullLoad
110
+ downEnough = { 150 }
111
+ ref = "reactpullload"
112
+ className = "block"
113
+ isBlockContainer = { true }
114
+ action = { this . state . action }
115
+ handleAction = { this . handleAction }
116
+ hasMore = { hasMore }
117
+ style = { { paddingTop : 50 } }
118
+ distanceBottom = { 1000 } >
119
+ < ul className = "test-ul" >
120
+ < button onClick = { this . handleAction . bind ( this , STATS . refreshing ) } > refreshing</ button >
121
+ < button onClick = { this . handleAction . bind ( this , STATS . loading ) } > loading more</ button >
122
+ < div style = { fixButtonStyle } >
123
+ < button onClick = { this . getScrollTop } > getScrollTop</ button >
124
+ < button onClick = { this . setScrollTop } > setScrollTop</ button >
125
+ </ div >
126
+ {
127
+ data . map ( ( str , index ) => {
128
+ return < li key = { index } > < img src = { str } alt = "" /> </ li >
129
+ } )
130
+ }
131
+ </ ul >
132
+ </ ReactPullLoad >
133
+ </ div >
134
+ )
135
+ }
136
+ }
137
+
138
+ render (
139
+ < App /> ,
140
+ document . getElementById ( 'root' )
141
+ )
0 commit comments