1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-15 09:04:04 +02:00
joplin/ReactNativeClient/lib/components/checkbox.js

69 lines
1.7 KiB
JavaScript
Raw Normal View History

const React = require('react'); const Component = React.Component;
const { StyleSheet, TouchableHighlight } = require('react-native');
const Icon = require('react-native-vector-icons/Ionicons').default;
2017-05-24 22:51:50 +02:00
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.setState({ checked: this.props.checked });
2017-05-24 22:51:50 +02:00
}
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 };