import React, { Component } from "react";
import {
StyleSheet,
Switch,
Text,
TextInput,
TouchableOpacity,
View
} from "react-native";
const styles = StyleSheet.create({
complete: {
textDecorationLine: "line-through"
},
container: {
alignItems: "flex-start",
flexDirection: "row",
justifyContent: "space-between",
padding: 10
},
destroy: {
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
},
textWrap: {
flex: 1,
marginHorizontal: 10
}
});
class Row extends Component {
render() {
// console.log("Row.render", this.props);
const { complete } = this.props;
const textComponent = (
this.props.onToggleEdit(true)}>
{this.props.text}
);
const removeButton = (
X
);
const editingComponent = (
);
const doneButton = (
this.props.onToggleEdit(false)}
style={styles.done}
>
Save
);
return (
{this.props.editing ? editingComponent : textComponent}
{this.props.editing ? doneButton : removeButton}
);
}
}
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
};
export default Row;