Video 13: Inline Edit Todo Items in a React Native ListView.

app.js

@@ -73,6 +73,8 @@ class App extends Component {
     this.handleRemoveItem = this.handleRemoveItem.bind(this);
     this.handleToggleAllComplete = this.handleToggleAllComplete.bind(this);
     this.handleToggleComplete = this.handleToggleComplete.bind(this);
+    this.handleToggleEditing = this.handleToggleEditing.bind(this);
+    this.handleUpdateText = this.handleUpdateText.bind(this);
     this.setSource = this.setSource.bind(this);
   }
 
@@ -140,6 +142,32 @@ class App extends Component {
     this.setSource(newItems, filterItems(this.state.filter, newItems));
   }
 
+  handleToggleEditing(key, editing) {
+    const newItems = this.state.items.map((item) => {
+      if (item.key !== key) {
+        return item;
+      }
+      return {
+        ...item,
+        editing
+      };
+    });
+    this.setSource(newItems, filterItems(this.state.filter, newItems));
+  }
+
+  handleUpdateText(key, text) {
+    const newItems = this.state.items.map((item) => {
+      if (item.key !== key) {
+        return item;
+      }
+      return {
+        ...item,
+        text
+      };
+    });
+    this.setSource(newItems, filterItems(this.state.filter, newItems));
+  }
+
   render() {
     // console.log("App state", this.state);
     return (
@@ -162,6 +190,8 @@ class App extends Component {
                   key={key}
                   onComplete={(complete) => this.handleToggleComplete(key, complete)}
                   onRemove={() => this.handleRemoveItem(key)}
+                  onToggleEdit={(editing) => this.handleToggleEditing(key, editing)}
+                  onUpdate={(text) => this.handleUpdateText(key, text)}
                   { ...value }
                 />
               );

header.js

@@ -18,6 +18,7 @@ const styles = StyleSheet.create({
   },
   input: {
     flex: 1,
+    fontSize: 24,
     height: 50,
     marginLeft: 16
   },

row.js

@@ -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
 };