|
@@ -1,11 +1,15 @@
|
|
import React, { Component } from "react";
|
|
import React, { Component } from "react";
|
|
import {
|
|
import {
|
|
StyleSheet,
|
|
StyleSheet,
|
|
|
|
+ Switch,
|
|
Text,
|
|
Text,
|
|
View
|
|
View
|
|
} from "react-native";
|
|
} from "react-native";
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
const styles = StyleSheet.create({
|
|
|
|
+ complete: {
|
|
|
|
+ textDecorationLine: "line-through"
|
|
|
|
+ },
|
|
container: {
|
|
container: {
|
|
alignItems: "flex-start",
|
|
alignItems: "flex-start",
|
|
flexDirection: "row",
|
|
flexDirection: "row",
|
|
@@ -15,18 +19,35 @@ const styles = StyleSheet.create({
|
|
text: {
|
|
text: {
|
|
color: "#4d4d4d",
|
|
color: "#4d4d4d",
|
|
fontSize: 24
|
|
fontSize: 24
|
|
|
|
+ },
|
|
|
|
+ textWrap: {
|
|
|
|
+ flex: 1,
|
|
|
|
+ marginHorizontal: 10
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
class Row extends Component {
|
|
class Row extends Component {
|
|
render() {
|
|
render() {
|
|
// console.log("Row.render", this.props);
|
|
// console.log("Row.render", this.props);
|
|
|
|
+ const { complete } = this.props;
|
|
return (
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.container}>
|
|
- <Text style={styles.text}>{this.props.text}</Text>
|
|
|
|
|
|
+ <Switch
|
|
|
|
+ value={complete}
|
|
|
|
+ onValueChange={this.props.onComplete}
|
|
|
|
+ />
|
|
|
|
+ <View style={styles.textWrap}>
|
|
|
|
+ <Text style={[styles.text, complete && styles.complete]}>{this.props.text}</Text>
|
|
|
|
+ </View>
|
|
</View>
|
|
</View>
|
|
);
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+Row.propTypes = {
|
|
|
|
+ complete: React.PropTypes.bool,
|
|
|
|
+ onComplete: React.PropTypes.func,
|
|
|
|
+ text: React.PropTypes.string
|
|
|
|
+};
|
|
|
|
+
|
|
export default Row;
|
|
export default Row;
|