forked from crazycodeboy/react-native-check-box
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
executable file
·100 lines (92 loc) · 2.81 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
/**
* react-native-check-box
* Checkbox component for react native, it works on iOS and Android
* https://github.com/crazycodeboy/react-native-check-box
* Email:crazycodeboy@gmail.com
* Blog:http://jiapenghui.com
* @flow
*/
import React, {Component} from 'react';
import {
StyleSheet,
View,
Image,
Text,
TouchableHighlight
} from 'react-native';
export default class CheckBox extends Component {
static propTypes = {
...View.propTypes,
leftText: React.PropTypes.string,
leftTextView: React.PropTypes.element,
rightText: React.PropTypes.string,
leftTextStyle: Text.propTypes.style,
rightTextView: React.PropTypes.element,
rightTextStyle: Text.propTypes.style,
checkedImage: React.PropTypes.element,
unCheckedImage: React.PropTypes.element,
onClick: React.PropTypes.func.isRequired,
isChecked: React.PropTypes.bool.isRequired,
checkBoxColor: React.PropTypes.string,
}
static defaultProps = {
isChecked: false,
leftTextStyle: {},
rightTextStyle: {}
}
_renderLeft() {
if (this.props.leftTextView)return this.props.leftTextView;
if (!this.props.leftText)return null;
return (
<Text style={[styles.leftText, this.props.leftTextStyle]}>{this.props.leftText}</Text>
);
}
_renderRight() {
if (this.props.rightTextView)return this.props.rightTextView;
if (!this.props.rightText)return null;
return (
<Text style={[styles.rightText, this.props.rightTextStyle]}>{this.props.rightText}</Text>
);
}
_renderImage() {
if (this.props.isChecked) {
return this.props.checkedImage ? this.props.checkedImage : this.genCheckedImage();
} else {
return this.props.unCheckedImage ? this.props.unCheckedImage : this.genCheckedImage();
}
}
genCheckedImage() {
var source = this.props.isChecked ? require('./img/ic_check_box.png') : require('./img/ic_check_box_outline_blank.png');
return (
<Image source={source} tintColor={this.props.checkBoxColor}/>
);
}
render() {
return (
<TouchableHighlight
style={this.props.style}
onPress={this.props.onClick}
underlayColor='transparent'
>
<View style={styles.container}>
{this._renderLeft()}
{this._renderImage()}
{this._renderRight()}
</View>
</TouchableHighlight>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center'
},
leftText: {
flex: 1,
},
rightText: {
flex: 1,
marginLeft: 10
}
});