|
| 1 | +// @flow |
| 2 | +import * as React from 'react'; |
| 3 | +import { |
| 4 | + TouchableOpacity, |
| 5 | + Text, |
| 6 | + Image, |
| 7 | + StyleSheet, |
| 8 | +} from 'react-native'; |
| 9 | + |
| 10 | +type Props = { |
| 11 | + radius: boolean, |
| 12 | + icon: React.Element, |
| 13 | + text: string, |
| 14 | + root: React.Ref, |
| 15 | + borderRadius: number, |
| 16 | + backgroundColor: string, |
| 17 | + color: string, |
| 18 | + fontSize: number, |
| 19 | + width: number, |
| 20 | + height: number, |
| 21 | + right: number, |
| 22 | + bottom: number, |
| 23 | + refTo: string, |
| 24 | + type: string, |
| 25 | + customTextStyle: Object, |
| 26 | + customImageStyle: Object, |
| 27 | +}; |
| 28 | + |
| 29 | +const scrollUpImage = 'data:image/png;base64,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'; |
| 30 | + |
| 31 | +const styles = StyleSheet.create({ |
| 32 | + wrapper: { |
| 33 | + position: 'absolute', |
| 34 | + flex: 1, |
| 35 | + justifyContent: 'center', |
| 36 | + alignItems: 'center', |
| 37 | + }, |
| 38 | +}); |
| 39 | + |
| 40 | +export default class ScrollUp extends React.Component<Props> { |
| 41 | + static defaultProps = { |
| 42 | + radius: true, |
| 43 | + backgroundColor: 'transparent', |
| 44 | + width: 40, |
| 45 | + height: 40, |
| 46 | + color: '#fff', |
| 47 | + fontSize: 12, |
| 48 | + icon: null, |
| 49 | + right: 60, |
| 50 | + bottom: 150, |
| 51 | + borderRadius: 50, |
| 52 | + text: 'Scroll Up', |
| 53 | + imageUri: scrollUpImage, |
| 54 | + customTextStyle: {}, |
| 55 | + customImageStyle: {}, |
| 56 | + }; |
| 57 | + |
| 58 | + handleOnPress = () => { |
| 59 | + if (this.props.refTo === 'ListView' || this.props.refTo === 'ScrollView') { |
| 60 | + this.props.root.scrollTo({ x: 0, y: 0, animated: true }); |
| 61 | + } |
| 62 | + if (this.props.refTo === 'FlatList') { |
| 63 | + this.props.root.scrollToOffset({ offset: 0, animated: true }); |
| 64 | + } |
| 65 | + if (this.props.refTo === 'SectionList') { |
| 66 | + this.props.root.scrollToLocation({ itemIndex: 0, sectionIndex: 0 }); |
| 67 | + } |
| 68 | + } |
| 69 | + |
| 70 | + render = () => ( |
| 71 | + <TouchableOpacity |
| 72 | + onPress={() => this.handleOnPress()} |
| 73 | + style={[ |
| 74 | + styles.wrapper, |
| 75 | + { |
| 76 | + width: this.props.width, |
| 77 | + height: this.props.height, |
| 78 | + right: this.props.right, |
| 79 | + bottom: this.props.bottom, |
| 80 | + backgroundColor: this.props.backgroundColor, |
| 81 | + borderRadius: this.props.radius ? this.props.borderRadius : 0, |
| 82 | + }, |
| 83 | + ]} |
| 84 | + > |
| 85 | + {this.props.type === 'icon' && { ...this.props.icon }} |
| 86 | + {this.props.type === 'text' && |
| 87 | + <Text |
| 88 | + style={[ |
| 89 | + { |
| 90 | + textAlign: 'center', |
| 91 | + color: this.props.color, |
| 92 | + fontSize: this.props.fontSize, |
| 93 | + }, |
| 94 | + this.props.customTextStyle, |
| 95 | + ]} |
| 96 | + > |
| 97 | + {this.props.text} |
| 98 | + </Text>} |
| 99 | + {this.props.type === 'image' && |
| 100 | + <Image |
| 101 | + style={[ |
| 102 | + { |
| 103 | + width: this.props.width, |
| 104 | + height: this.props.height, |
| 105 | + }, |
| 106 | + this.props.customImageStyle, |
| 107 | + ]} |
| 108 | + source={{ uri: this.props.imageUri }} |
| 109 | + />} |
| 110 | + </TouchableOpacity> |
| 111 | + ); |
| 112 | +} |
0 commit comments