LoadingFooter.js
1.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/**
* Author: Shi(bolan0000@icloud.com)
* Date: 2019/1/18
* Copyright (c) 2018, AoTang, Inc.
*
* Description:
*/
import React from 'react';
import {Animated, Text} from 'react-native';
export class LoadingFooter extends React.Component<FooterPropType, FooterStateType> {
static height = 80;
static style = 'stickyContent';
constructor(props: FooterPropType) {
super(props);
this.state = {status: props.allLoaded ? 'allLoaded' : 'waiting'};
}
static getDerivedStateFromProps(nextProps: FooterPropType) {
if (nextProps.allLoaded) return {status: 'allLoaded'};
return {};
}
changeToState(newStatus: FooterStatus) {
!this.props.allLoaded &&
this.state.status !== newStatus &&
this.onStateChange(this.state.status, newStatus);
}
onStateChange(oldStatus: FooterStatus, newStatus: FooterStatus) {
this.setState({status: newStatus});
}
render() {
return (
<Text
style={{
flex: 1,
alignSelf: 'center',
lineHeight: this.props.maxHeight,
textAlign: 'center',
}}>
{this.state.status}
</Text>
);
}
}
export type FooterStatus =
| 'waiting'
| 'dragging'
| 'draggingEnough'
| 'draggingCancel'
| 'loading'
| 'rebound'
| 'allLoaded';
interface FooterPropType {
offset?: Animated.Value;
maxHeight?: number;
allLoaded?: boolean;
bottomOffset?: number;
}
interface FooterStateType {
status?: FooterStatus;
}