1 files changed, 65 insertions, 0 deletions
diff --git a/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/react-redux/src/components/TodoItem.js b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/react-redux/src/components/TodoItem.js
new file mode 100644
index 0000000000..490921d543
--- /dev/null
+++ b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/react-redux/src/components/TodoItem.js
@@ -0,0 +1,65 @@
+import React, { Component, PropTypes } from 'react'
+import classnames from 'classnames'
+import TodoTextInput from './TodoTextInput'
+
+export default class TodoItem extends Component {
+  static propTypes = {
+    todo: PropTypes.object.isRequired,
+    editTodo: PropTypes.func.isRequired,
+    deleteTodo: PropTypes.func.isRequired,
+    completeTodo: PropTypes.func.isRequired
+  }
+
+  state = {
+    editing: false
+  }
+
+  handleDoubleClick = () => {
+    this.setState({ editing: true })
+  }
+
+  handleSave = (id, text) => {
+    if (text.length === 0) {
+      this.props.deleteTodo(id)
+    } else {
+      this.props.editTodo(id, text)
+    }
+    this.setState({ editing: false })
+  }
+
+  render() {
+    const { todo, completeTodo, deleteTodo } = this.props
+
+    let element
+    if (this.state.editing) {
+      element = (
+        <TodoTextInput text={todo.text}
+                       editing={this.state.editing}
+                       onSave={(text) => this.handleSave(todo.id, text)} />
+      )
+    } else {
+      element = (
+        <div className="view">
+          <input className="toggle"
+                 type="checkbox"
+                 checked={todo.completed}
+                 onChange={() => completeTodo(todo.id)} />
+          <label onDoubleClick={this.handleDoubleClick}>
+            {todo.text}
+          </label>
+          <button className="destroy"
+                  onClick={() => deleteTodo(todo.id)} />
+        </div>
+      )
+    }
+
+    return (
+      <li className={classnames({
+        completed: todo.completed,
+        editing: this.state.editing
+      })}>
+        {element}
+      </li>
+    )
+  }
+}