Skip to content

Commit 00c94bd

Browse files
李钿李钿
李钿
authored and
李钿
committed
修改demo
1 parent a252885 commit 00c94bd

3 files changed

Lines changed: 102 additions & 296 deletions

File tree

‎demo/App.jsx‎

Lines changed: 31 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -12,73 +12,6 @@ const defaultStyle ={
1212
lineHeight: "1.5"
1313
}
1414

15-
class HeadNode extends PureComponent{
16-
17-
static propTypes = {
18-
loaderState: PropTypes.string.isRequired,
19-
};
20-
21-
static defaultProps = {
22-
loaderState: STATS.init,
23-
};
24-
25-
render(){
26-
const {
27-
loaderState
28-
} = this.props
29-
30-
let content = ""
31-
if(loaderState == STATS.pulling){
32-
content = "下拉刷新"
33-
} else if(loaderState == STATS.enough){
34-
content = "松开刷新"
35-
} else if(loaderState == STATS.refreshing){
36-
content = "正在刷新..."
37-
} else if(loaderState == STATS.refreshed){
38-
content = "刷新成功"
39-
}
40-
41-
return(
42-
<div style={defaultStyle}>
43-
{content}
44-
</div>
45-
)
46-
}
47-
}
48-
49-
class FooterNode extends PureComponent{
50-
51-
static propTypes = {
52-
loaderState: PropTypes.string.isRequired,
53-
hasMore: PropTypes.bool.isRequired
54-
};
55-
56-
static defaultProps = {
57-
loaderState: STATS.init,
58-
hasMore: true
59-
};
60-
61-
render(){
62-
const {
63-
loaderState,
64-
hasMore
65-
} = this.props
66-
67-
let content = ""
68-
if(hasMore === false){
69-
content = "没有更多"
70-
} else if(loaderState == STATS.loading && hasMore === true){
71-
content = "加载中"
72-
}
73-
74-
return(
75-
<div style={defaultStyle}>
76-
{content}
77-
</div>
78-
)
79-
}
80-
}
81-
8215
const loadMoreLimitNum = 2;
8316

8417
const cData = [
@@ -105,64 +38,43 @@ export class App extends Component{
10538
handleAction = (action) => {
10639
console.info(action, this.state.action,action === this.state.action);
10740
//new action must do not equel to old action
108-
if(action === this.state.action){
41+
if(action === this.state.action ||
42+
action === STATS.refreshing && this.state.action === STATS.loading ||
43+
action === STATS.loading && this.state.action === STATS.refreshing){
44+
console.info("It's same action or on loading or on refreshing ",action, this.state.action,action === this.state.action);
10945
return false
11046
}
11147

11248
if(action === STATS.refreshing){//刷新
113-
this.handRefreshing();
114-
} else if(action === STATS.loading){//加载更多
115-
this.handLoadMore();
116-
} else{
117-
//DO NOT modify below code
118-
this.setState({
119-
action: action
120-
})
121-
}
122-
}
123-
124-
handRefreshing = () =>{
125-
if(STATS.refreshing === this.state.action){
126-
return false
127-
}
128-
129-
setTimeout(()=>{
130-
//refreshing complete
131-
this.setState({
132-
data: cData,
133-
hasMore: true,
134-
action: STATS.refreshed,
135-
index: loadMoreLimitNum
136-
});
137-
}, 3000)
138-
139-
this.setState({
140-
action: STATS.refreshing
141-
})
142-
}
143-
144-
handLoadMore = () => {
145-
if(STATS.loading === this.state.action){
146-
return false
147-
}
148-
149-
setTimeout(()=>{
150-
if(this.state.index === 0){
151-
this.setState({
152-
action: STATS.reset,
153-
hasMore: false
154-
});
155-
} else{
49+
setTimeout(()=>{
50+
//refreshing complete
15651
this.setState({
157-
data: [...this.state.data, cData[0], cData[0]],
158-
action: STATS.reset,
159-
index: this.state.index - 1
52+
data: cData,
53+
hasMore: true,
54+
action: STATS.refreshed,
55+
index: loadMoreLimitNum
16056
});
161-
}
162-
}, 3000)
57+
}, 3000)
58+
} else if(action === STATS.loading){//加载更多
59+
setTimeout(()=>{
60+
if(this.state.index === 0){
61+
this.setState({
62+
action: STATS.reset,
63+
hasMore: false
64+
});
65+
} else{
66+
this.setState({
67+
data: [...this.state.data, cData[0], cData[0]],
68+
action: STATS.reset,
69+
index: this.state.index - 1
70+
});
71+
}
72+
}, 3000)
73+
}
16374

75+
//DO NOT modify below code
16476
this.setState({
165-
action: STATS.loading
77+
action: action
16678
})
16779
}
16880

@@ -198,8 +110,8 @@ export class App extends Component{
198110
style={{paddingTop: 50}}
199111
distanceBottom={1000}>
200112
<ul className="test-ul">
201-
<button onClick={this.handRefreshing}>refreshing</button>
202-
<button onClick={this.handLoadMore}>loading more</button>
113+
<button onClick={this.handleAction.bind(this, STATS.refreshing)}>refreshing</button>
114+
<button onClick={this.handleAction.bind(this, STATS.loading)}>loading more</button>
203115
{
204116
data.map( (str, index )=>{
205117
return <li key={index}><img src={str} alt=""/></li>

‎demo/App1.jsx‎

Lines changed: 31 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -4,81 +4,13 @@ import { render } from 'react-dom'
44
import ReactPullLoad,{STATS} from 'index.js'
55
import './App.css'
66

7-
87
const defaultStyle ={
98
width: "100%",
109
textAlign: "center",
1110
fontSize: "20px",
1211
lineHeight: "1.5"
1312
}
1413

15-
class HeadNode extends PureComponent{
16-
17-
static propTypes = {
18-
loaderState: PropTypes.string.isRequired,
19-
};
20-
21-
static defaultProps = {
22-
loaderState: STATS.init,
23-
};
24-
25-
render(){
26-
const {
27-
loaderState
28-
} = this.props
29-
30-
let content = ""
31-
if(loaderState == STATS.pulling){
32-
content = "下拉刷新"
33-
} else if(loaderState == STATS.enough){
34-
content = "松开刷新"
35-
} else if(loaderState == STATS.refreshing){
36-
content = "正在刷新..."
37-
} else if(loaderState == STATS.refreshed){
38-
content = "刷新成功"
39-
}
40-
41-
return(
42-
<div style={defaultStyle}>
43-
{content}
44-
</div>
45-
)
46-
}
47-
}
48-
49-
class FooterNode extends PureComponent{
50-
51-
static propTypes = {
52-
loaderState: PropTypes.string.isRequired,
53-
hasMore: PropTypes.bool.isRequired
54-
};
55-
56-
static defaultProps = {
57-
loaderState: STATS.init,
58-
hasMore: true
59-
};
60-
61-
render(){
62-
const {
63-
loaderState,
64-
hasMore
65-
} = this.props
66-
67-
let content = ""
68-
if(hasMore === false){
69-
content = "没有更多"
70-
} else if(loaderState == STATS.loading && hasMore === true){
71-
content = "加载中"
72-
}
73-
74-
return(
75-
<div style={defaultStyle}>
76-
{content}
77-
</div>
78-
)
79-
}
80-
}
81-
8214
const loadMoreLimitNum = 2;
8315

8416
const cData = [
@@ -105,64 +37,43 @@ export class App extends Component{
10537
handleAction = (action) => {
10638
console.info(action, this.state.action,action === this.state.action);
10739
//new action must do not equel to old action
108-
if(action === this.state.action){
40+
if(action === this.state.action ||
41+
action === STATS.refreshing && this.state.action === STATS.loading ||
42+
action === STATS.loading && this.state.action === STATS.refreshing){
43+
console.info("It's same action or on loading or on refreshing ",action, this.state.action,action === this.state.action);
10944
return false
11045
}
11146

11247
if(action === STATS.refreshing){//刷新
113-
this.handRefreshing();
114-
} else if(action === STATS.loading){//加载更多
115-
this.handLoadMore();
116-
} else{
117-
//DO NOT modify below code
118-
this.setState({
119-
action: action
120-
})
121-
}
122-
}
123-
124-
handRefreshing = () =>{
125-
if(STATS.refreshing === this.state.action){
126-
return false
127-
}
128-
129-
setTimeout(()=>{
130-
//refreshing complete
131-
this.setState({
132-
data: cData,
133-
hasMore: true,
134-
action: STATS.refreshed,
135-
index: loadMoreLimitNum
136-
});
137-
}, 3000)
138-
139-
this.setState({
140-
action: STATS.refreshing
141-
})
142-
}
143-
144-
handLoadMore = () => {
145-
if(STATS.loading === this.state.action){
146-
return false
147-
}
148-
149-
setTimeout(()=>{
150-
if(this.state.index === 0){
151-
this.setState({
152-
action: STATS.reset,
153-
hasMore: false
154-
});
155-
} else{
48+
setTimeout(()=>{
49+
//refreshing complete
15650
this.setState({
157-
data: [...this.state.data, cData[0], cData[0]],
158-
action: STATS.reset,
159-
index: this.state.index - 1
51+
data: cData,
52+
hasMore: true,
53+
action: STATS.refreshed,
54+
index: loadMoreLimitNum
16055
});
161-
}
162-
}, 3000)
56+
}, 3000)
57+
} else if(action === STATS.loading){//加载更多
58+
setTimeout(()=>{
59+
if(this.state.index === 0){
60+
this.setState({
61+
action: STATS.reset,
62+
hasMore: false
63+
});
64+
} else{
65+
this.setState({
66+
data: [...this.state.data, cData[0], cData[0]],
67+
action: STATS.reset,
68+
index: this.state.index - 1
69+
});
70+
}
71+
}, 3000)
72+
}
16373

74+
//DO NOT modify below code
16475
this.setState({
165-
action: STATS.loading
76+
action: action
16677
})
16778
}
16879

@@ -183,8 +94,8 @@ export class App extends Component{
18394
hasMore={hasMore}
18495
distanceBottom={1000}>
18596
<ul className="test-ul">
186-
<button onClick={this.handRefreshing}>refreshing</button>
187-
<button onClick={this.handLoadMore}>loading more</button>
97+
<button onClick={this.handleAction.bind(this, STATS.refreshing)}>refreshing</button>
98+
<button onClick={this.handleAction.bind(this, STATS.loading)}>loading more</button>
18899
{
189100
data.map( (str, index )=>{
190101
return <li key={index}><img src={str} alt=""/></li>

0 commit comments

Comments
 (0)