-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
108 lines (97 loc) · 2.71 KB
/
index.js
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
/**
* Scroll to Top
*
* <ScrollToTop
rootView={this.listview}
icon={<Icon raised name="arrow-upward" />}
/>
*
*/
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { TouchableOpacity, Dimensions, StyleSheet, Text } from 'react-native';
/* Styles ==================================================================== */
const styles = StyleSheet.create({
Top: {
flex: 1,
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
},
});
/* Component ==================================================================== */
class ScrollToTop extends Component {
static propTypes = {
isRadius: PropTypes.bool,
width: PropTypes.number,
height: PropTypes.number,
left: PropTypes.number,
top: PropTypes.number,
borderRadius: PropTypes.number,
backgroundColor: PropTypes.string,
color: PropTypes.string,
fontSize: PropTypes.number,
icon: PropTypes.element,
text: PropTypes.string,
rootView: PropTypes.objectOf(PropTypes.shape).isRequired,
ListView: PropTypes.bool
};
static defaultProps = {
isRadius: true,
width: 60,
height: 60,
left: Dimensions.get('window').width - 80,
top: Dimensions.get('window').height - 170,
borderRadius: 30,
backgroundColor: null,
color: '#ffffff',
fontSize: 12,
icon: null,
text: 'Scroll to Top',
ListView: false,
};
onPress() {
if(this.props.ListView) this.props.rootView.scrollTo({ x: 0, y: 0, animated: true });
else this.props.rootView.scrollToOffset({offset: 0, animated: true});
}
getBackgroundColor = () => {
if (this.props.backgroundColor) {
return this.props.backgroundColor;
}
if (this.props.text && !this.props.icon) {
return '#546e7a';
}
return null;
};
render = () => (
<TouchableOpacity
onPress={() => this.onPress()}
style={[
styles.Top,
{
borderRadius: this.props.isRadius ? this.props.borderRadius : 0,
backgroundColor: this.getBackgroundColor(),
width: this.props.width,
height: this.props.height,
left: this.props.left,
top: Dimensions.get('window').height - this.props.top,
},
]}
>
{this.props.icon
? { ...this.props.icon }
: <Text
style={{
color: this.props.color,
fontSize: this.props.fontSize,
textAlign: 'center',
}}
>
{this.props.text}
</Text>}
</TouchableOpacity>
);
}
ScrollToTop.componentName = 'ScrollToTop';
/* Export Component ==================================================================== */
export default ScrollToTop;