1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 |
- import React, { Component } from "react";
- import {
- StyleSheet,
- Switch,
- Text,
- 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
- },
- 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;
- 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>
- </View>
- );
- }
- }
- Row.propTypes = {
- complete: React.PropTypes.bool,
- onComplete: React.PropTypes.func,
- onRemove: React.PropTypes.func,
- text: React.PropTypes.string
- };
- export default Row;
|