Skip to content

Commit 24e3fd9

Browse files
risuiarrisuiar
committed
add ability to add own styles to left and right texts.
1 parent bac31c6 commit 24e3fd9

File tree

1 file changed

+96
-96
lines changed

1 file changed

+96
-96
lines changed

‎index.js

Lines changed: 96 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,114 @@
1-
/**
2-
* react-native-check-box
3-
* Checkbox component for react native, it works on iOS and Android
4-
* https://github.com/crazycodeboy/react-native-check-box
5-
* Email:crazycodeboy@gmail.com
6-
* Blog:http://jiapenghui.com
7-
* @flow
8-
*/
1+
/**
2+
* react-native-check-box
3+
* Checkbox component for react native, it works on iOS and Android
4+
* https://github.com/crazycodeboy/react-native-check-box
5+
* Email:crazycodeboy@gmail.com
6+
* Blog:http://jiapenghui.com
7+
* @flow
8+
*/
99

1010
import React, {Component} from 'react';
1111
import {
12-
StyleSheet,
13-
View,
14-
Image,
15-
Text,
16-
TouchableHighlight
12+
StyleSheet,
13+
View,
14+
Image,
15+
Text,
16+
TouchableHighlight
1717
} from 'react-native'
1818

1919

2020
export default class CheckBox extends Component {
21-
constructor(props) {
22-
super(props);
23-
this.state = {
24-
isChecked: this.props.isChecked,
25-
}
26-
}
21+
constructor(props) {
22+
super(props);
23+
this.state = {
24+
isChecked: this.props.isChecked,
25+
}
26+
}
2727

28-
static propTypes = {
29-
...View.propTypes,
30-
leftText: React.PropTypes.string,
31-
leftTextView: React.PropTypes.element,
32-
rightText: React.PropTypes.string,
33-
leftTextStyle: React.PropTypes.object,
34-
rightTextView: React.PropTypes.string,
35-
rightTextStyle: React.PropTypes.object,
36-
checkedImage: React.PropTypes.element,
37-
unCheckedImage: React.PropTypes.element,
38-
onClick: React.PropTypes.func.isRequired,
39-
isChecked: React.PropTypes.bool
28+
static propTypes = {
29+
...View.propTypes,
30+
leftText: React.PropTypes.string,
31+
leftTextView: React.PropTypes.element,
32+
rightText: React.PropTypes.string,
33+
leftTextStyle: React.PropTypes.object,
34+
rightTextView: React.PropTypes.string,
35+
rightTextStyle: React.PropTypes.object,
36+
checkedImage: React.PropTypes.element,
37+
unCheckedImage: React.PropTypes.element,
38+
onClick: React.PropTypes.func.isRequired,
39+
isChecked: React.PropTypes.bool
4040

41-
}
42-
static defaultProps = {
43-
isChecked: false,
44-
leftTextStyle: {},
45-
rightTextStyle: {}
46-
}
41+
}
42+
static defaultProps = {
43+
isChecked: false,
44+
leftTextStyle: {},
45+
rightTextStyle: {}
46+
}
4747

48-
_renderLeft() {
49-
if (this.props.leftTextView)return this.props.leftTextView;
50-
if (!this.props.leftText)return null;
51-
return (
52-
<Text style={[styles.leftText, this.props.leftTextStyle]}>{this.props.leftText}</Text>
53-
)
54-
}
55-
_renderRight() {
56-
if (this.props.rightTextView)return this.props.rightTextView;
57-
if (!this.props.rightText)return null;
58-
return (
59-
<Text style={[styles.rightText, this.props.rightTextStyle]}>{this.props.rightText}</Text>
60-
)
61-
}
48+
_renderLeft() {
49+
if (this.props.leftTextView)return this.props.leftTextView;
50+
if (!this.props.leftText)return null;
51+
return (
52+
<Text style={[styles.leftText, this.props.leftTextStyle]}>{this.props.leftText}</Text>
53+
)
54+
}
55+
_renderRight() {
56+
if (this.props.rightTextView)return this.props.rightTextView;
57+
if (!this.props.rightText)return null;
58+
return (
59+
<Text style={[styles.rightText, this.props.rightTextStyle]}>{this.props.rightText}</Text>
60+
)
61+
}
6262

63-
_renderImage() {
64-
if (this.state.isChecked) {
65-
return this.props.checkedImage ? this.props.checkedImage : this.genCheckedImage();
66-
} else {
67-
return this.props.unCheckedImage ? this.props.unCheckedImage : this.genCheckedImage();
68-
}
69-
}
63+
_renderImage() {
64+
if (this.state.isChecked) {
65+
return this.props.checkedImage ? this.props.checkedImage : this.genCheckedImage();
66+
} else {
67+
return this.props.unCheckedImage ? this.props.unCheckedImage : this.genCheckedImage();
68+
}
69+
}
7070

71-
genCheckedImage() {
72-
var source = this.state.isChecked ? require('./img/ic_check_box.png') : require('./img/ic_check_box_outline_blank.png');
71+
genCheckedImage() {
72+
var source = this.state.isChecked ? require('./img/ic_check_box.png') : require('./img/ic_check_box_outline_blank.png');
7373

74-
return (
75-
<Image source={source}/>
76-
)
77-
}
74+
return (
75+
<Image source={source}/>
76+
)
77+
}
7878

79-
onClick() {
80-
this.setState({
81-
isChecked: !this.state.isChecked
82-
})
83-
this.props.onClick();
84-
}
79+
onClick() {
80+
this.setState({
81+
isChecked: !this.state.isChecked
82+
})
83+
this.props.onClick();
84+
}
8585

86-
render() {
87-
return (
88-
<TouchableHighlight
89-
style={this.props.style}
90-
onPress={()=>this.onClick()}
91-
underlayColor='transparent'
92-
>
93-
<View style={styles.container}>
94-
{this._renderLeft()}
95-
{this._renderImage()}
96-
{this._renderRight()}
97-
</View>
98-
</TouchableHighlight>
99-
)
100-
}
86+
render() {
87+
return (
88+
<TouchableHighlight
89+
style={this.props.style}
90+
onPress={()=>this.onClick()}
91+
underlayColor='transparent'
92+
>
93+
<View style={styles.container}>
94+
{this._renderLeft()}
95+
{this._renderImage()}
96+
{this._renderRight()}
97+
</View>
98+
</TouchableHighlight>
99+
)
100+
}
101101
}
102102
const styles = StyleSheet.create({
103-
container: {
104-
flexDirection: 'row',
105-
alignItems: 'center'
106-
},
107-
leftText: {
108-
flex: 1,
109-
},
110-
rightText: {
111-
flex: 1,
112-
marginLeft: 10
113-
}
103+
container: {
104+
flexDirection: 'row',
105+
alignItems: 'center'
106+
},
107+
leftText: {
108+
flex: 1,
109+
},
110+
rightText: {
111+
flex: 1,
112+
marginLeft: 10
113+
}
114114
})

0 commit comments

Comments
 (0)