RefreshingIndicator.js
3.2 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
var React = require('react')
var ReactNative = require('react-native')
var {
PropTypes,
isValidElement,
createElement,
} = React;
var {
View,
Text,
ActivityIndicator,
StyleSheet,
} = ReactNative
var RefreshingIndicator = React.createClass({
propTypes: {
activityIndicatorComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
stylesheet: PropTypes.object,
pullingIndicator: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.element]),
holdingIndicator: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.element]),
refreshingIndicator: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.element]),
pullingPrompt: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
holdingPrompt: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
refreshingPrompt: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
isTouching: PropTypes.bool,
isRefreshing: PropTypes.bool,
isWaitingForRelease: PropTypes.bool,
},
getDefaultProps() {
return {
activityIndicatorComponent: ActivityIndicator,
isTouching: false,
isRefreshing: false,
isWaitingForRelease: false,
}
},
renderPrompt() {
if (this.props.isTouching && this.props.isWaitingForRelease) {
return this.props.holdingPrompt
} else if (this.props.isTouching && !this.props.isWaitingForRelease) {
return this.props.pullingPrompt
} else {
if (this.props.isRefreshing) {
return this.props.refreshingPrompt
} else {
return null
}
}
},
renderDescription(styles) {
return (
<Text style={styles.description}>
{this.renderPrompt()}
</Text>
)
},
renderActivityIndicator(styles) {
var activityIndicator
if (this.props.isTouching && this.props.isWaitingForRelease) {
activityIndicator = this.props.holdingIndicator
} else if (this.props.isTouching && !this.props.isWaitingForRelease) {
activityIndicator = this.props.pullingIndicator
} else if (this.props.isRefreshing) {
activityIndicator = this.props.refreshingIndicator || this.props.activityIndicatorComponent
}
if (activityIndicator) {
if (isValidElement(activityIndicator)) return activityIndicator
// is a component class, not an element
return createElement(activityIndicator, {style: styles.activityIndicator})
}
return null
},
render() {
var styles = Object.assign({}, stylesheet, this.props.stylesheet)
return (
<View style={[styles.wrapper]}>
<View style={[styles.container, styles.loading, styles.content]}>
<View style={[styles.stack]}>
{this.renderDescription(styles)}
{this.renderActivityIndicator(styles)}
</View>
</View>
</View>
)
},
})
var stylesheet = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-start',
flexDirection: 'row',
},
stack: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
},
wrapper: {
height: 60,
},
content: {
marginTop: 10,
height: 40,
},
})
module.exports = RefreshingIndicator