js_react_native__egghead/row.js

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 = (
      <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}
        />
        {this.props.editing ? editingComponent : textComponent}
        {this.props.editing ? doneButton : removeButton}
      </View>
    );
  }
}

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;