2017-05-16 21:12:37 +02:00
|
|
|
import React, { Component } from 'react';
|
2017-05-24 22:51:50 +02:00
|
|
|
import { StyleSheet, TouchableHighlight } from 'react-native';
|
|
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
|
|
|
2017-07-21 23:40:02 +02:00
|
|
|
const styles = {
|
2017-05-24 22:51:50 +02:00
|
|
|
checkboxIcon: {
|
|
|
|
fontSize: 20,
|
|
|
|
height: 22,
|
2017-08-19 23:59:08 +02:00
|
|
|
//marginRight: 10,
|
2017-05-24 22:51:50 +02:00
|
|
|
},
|
2017-07-21 23:40:02 +02:00
|
|
|
};
|
2017-05-16 21:12:37 +02:00
|
|
|
|
|
|
|
class Checkbox extends Component {
|
2017-05-24 22:51:50 +02:00
|
|
|
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.state = {
|
|
|
|
checked: false,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillMount() {
|
|
|
|
this.state = { checked: this.props.checked };
|
|
|
|
}
|
|
|
|
|
2017-07-15 20:13:31 +02:00
|
|
|
componentWillReceiveProps(newProps) {
|
|
|
|
if ('checked' in newProps) {
|
|
|
|
this.setState({ checked: newProps.checked });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-06-06 22:01:43 +02:00
|
|
|
onPress() {
|
2017-05-24 22:51:50 +02:00
|
|
|
let newChecked = !this.state.checked;
|
|
|
|
this.setState({ checked: newChecked });
|
|
|
|
if (this.props.onChange) this.props.onChange(newChecked);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const iconName = this.state.checked ? 'md-checkbox-outline' : 'md-square-outline';
|
|
|
|
|
2017-07-15 20:37:17 +02:00
|
|
|
let style = this.props.style ? Object.assign({}, this.props.style) : {};
|
|
|
|
style.justifyContent = 'center';
|
|
|
|
style.alignItems = 'center';
|
|
|
|
|
2017-08-19 23:59:08 +02:00
|
|
|
let checkboxIconStyle = Object.assign({}, styles.checkboxIcon);
|
2017-07-21 23:40:02 +02:00
|
|
|
if (style.color) checkboxIconStyle.color = style.color;
|
|
|
|
|
2017-08-19 23:59:08 +02:00
|
|
|
if (style.paddingTop) checkboxIconStyle.marginTop = style.paddingTop;
|
|
|
|
if (style.paddingBottom) checkboxIconStyle.marginBottom = style.paddingBottom;
|
|
|
|
if (style.paddingLeft) checkboxIconStyle.marginLeft = style.paddingLeft;
|
|
|
|
if (style.paddingRight) checkboxIconStyle.marginRight = style.paddingRight;
|
|
|
|
|
2017-07-21 23:40:02 +02:00
|
|
|
const thStyle = {
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center',
|
|
|
|
};
|
|
|
|
|
|
|
|
if (style.display) thStyle.display = style.display;
|
|
|
|
|
2017-05-24 22:51:50 +02:00
|
|
|
return (
|
2017-07-21 23:40:02 +02:00
|
|
|
<TouchableHighlight onPress={() => this.onPress()} style={thStyle}>
|
|
|
|
<Icon name={iconName} style={checkboxIconStyle}/>
|
2017-05-24 22:51:50 +02:00
|
|
|
</TouchableHighlight>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-05-16 21:12:37 +02:00
|
|
|
}
|
|
|
|
|
2017-05-24 22:51:50 +02:00
|
|
|
export { Checkbox };
|