diff options
Diffstat (limited to '')
-rw-r--r-- | third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/react-redux/src/components/TodoItem.js | 65 |
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> + ) + } +} |