|
@@ -3,6 +3,7 @@ import {
|
|
|
StyleSheet,
|
|
|
Switch,
|
|
|
Text,
|
|
|
+ TextInput,
|
|
|
TouchableOpacity,
|
|
|
View
|
|
|
} from "react-native";
|
|
@@ -21,6 +22,24 @@ const styles = StyleSheet.create({
|
|
|
color: "#cc9a9a",
|
|
|
fontSize: 20
|
|
|
},
|
|
|
+ done: {
|
|
|
+ borderColor: "#7be290",
|
|
|
+ borderRadius: 5,
|
|
|
+ borderWidth: 1,
|
|
|
+ padding: 7
|
|
|
+ },
|
|
|
+ doneText: {
|
|
|
+ color: "#4d4d4d",
|
|
|
+ fontSize: 20
|
|
|
+ },
|
|
|
+ input: {
|
|
|
+ color: "#4d4d4d",
|
|
|
+ flex: 1,
|
|
|
+ fontSize: 24,
|
|
|
+ height: 100,
|
|
|
+ marginLeft: 16,
|
|
|
+ padding: 0
|
|
|
+ },
|
|
|
text: {
|
|
|
color: "#4d4d4d",
|
|
|
fontSize: 24
|
|
@@ -35,18 +54,44 @@ class Row extends Component {
|
|
|
render() {
|
|
|
// console.log("Row.render", this.props);
|
|
|
const { complete } = this.props;
|
|
|
+ const textComponent = (
|
|
|
+ <TouchableOpacity style={styles.textWrap} onLongPress={() => this.props.onToggleEdit(true)}>
|
|
|
+ <Text style={[styles.text, complete && styles.complete]}>{this.props.text}</Text>
|
|
|
+ </TouchableOpacity>
|
|
|
+ );
|
|
|
+ const removeButton = (
|
|
|
+ <TouchableOpacity onPress={this.props.onRemove}>
|
|
|
+ <Text style={styles.destroy}>X</Text>
|
|
|
+ </TouchableOpacity>
|
|
|
+ );
|
|
|
+ const editingComponent = (
|
|
|
+ <View style={styles.textWrap}>
|
|
|
+ <TextInput
|
|
|
+ autoFocus
|
|
|
+ multiline
|
|
|
+ onChangeText={this.props.onUpdate}
|
|
|
+ style={styles.input}
|
|
|
+ value={this.props.text}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ );
|
|
|
+ const doneButton = (
|
|
|
+ <TouchableOpacity
|
|
|
+ onPress={() => this.props.onToggleEdit(false)}
|
|
|
+ style={styles.done}
|
|
|
+ >
|
|
|
+ <Text style={styles.doneText}>Save</Text>
|
|
|
+ </TouchableOpacity>
|
|
|
+ );
|
|
|
+
|
|
|
return (
|
|
|
<View style={styles.container}>
|
|
|
<Switch
|
|
|
value={complete}
|
|
|
onValueChange={this.props.onComplete}
|
|
|
/>
|
|
|
- <View style={styles.textWrap}>
|
|
|
- <Text style={[styles.text, complete && styles.complete]}>{this.props.text}</Text>
|
|
|
- </View>
|
|
|
- <TouchableOpacity onPress={this.props.onRemove}>
|
|
|
- <Text style={styles.destroy}>X</Text>
|
|
|
- </TouchableOpacity>
|
|
|
+ {this.props.editing ? editingComponent : textComponent}
|
|
|
+ {this.props.editing ? doneButton : removeButton}
|
|
|
</View>
|
|
|
);
|
|
|
}
|
|
@@ -54,8 +99,11 @@ class Row extends Component {
|
|
|
|
|
|
Row.propTypes = {
|
|
|
complete: React.PropTypes.bool,
|
|
|
+ editing: React.PropTypes.bool,
|
|
|
onComplete: React.PropTypes.func,
|
|
|
onRemove: React.PropTypes.func,
|
|
|
+ onToggleEdit: React.PropTypes.func,
|
|
|
+ onUpdate: React.PropTypes.func,
|
|
|
text: React.PropTypes.string
|
|
|
};
|
|
|
|