Speedometer: Add a React + Redux TodoMVC implementation
[WebKit-https.git] / PerformanceTests / Speedometer / resources / todomvc / architecture-examples / react-redux / src / components / TodoItem.js
1 import React, { Component, PropTypes } from 'react'
2 import classnames from 'classnames'
3 import TodoTextInput from './TodoTextInput'
4
5 export default class TodoItem extends Component {
6   static propTypes = {
7     todo: PropTypes.object.isRequired,
8     editTodo: PropTypes.func.isRequired,
9     deleteTodo: PropTypes.func.isRequired,
10     completeTodo: PropTypes.func.isRequired
11   }
12
13   state = {
14     editing: false
15   }
16
17   handleDoubleClick = () => {
18     this.setState({ editing: true })
19   }
20
21   handleSave = (id, text) => {
22     if (text.length === 0) {
23       this.props.deleteTodo(id)
24     } else {
25       this.props.editTodo(id, text)
26     }
27     this.setState({ editing: false })
28   }
29
30   render() {
31     const { todo, completeTodo, deleteTodo } = this.props
32
33     let element
34     if (this.state.editing) {
35       element = (
36         <TodoTextInput text={todo.text}
37                        editing={this.state.editing}
38                        onSave={(text) => this.handleSave(todo.id, text)} />
39       )
40     } else {
41       element = (
42         <div className="view">
43           <input className="toggle"
44                  type="checkbox"
45                  checked={todo.completed}
46                  onChange={() => completeTodo(todo.id)} />
47           <label onDoubleClick={this.handleDoubleClick}>
48             {todo.text}
49           </label>
50           <button className="destroy"
51                   onClick={() => deleteTodo(todo.id)} />
52         </div>
53       )
54     }
55
56     return (
57       <li className={classnames({
58         completed: todo.completed,
59         editing: this.state.editing
60       })}>
61         {element}
62       </li>
63     )
64   }
65 }