diff options
Diffstat (limited to '')
-rw-r--r-- | third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/react-redux/src/components/MainSection.js | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/react-redux/src/components/MainSection.js b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/react-redux/src/components/MainSection.js new file mode 100644 index 0000000000..ec23b516b8 --- /dev/null +++ b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/react-redux/src/components/MainSection.js @@ -0,0 +1,78 @@ +import React, { Component, PropTypes } from 'react' +import TodoItem from './TodoItem' +import Footer from './Footer' +import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters' + +const TODO_FILTERS = { + [SHOW_ALL]: () => true, + [SHOW_ACTIVE]: todo => !todo.completed, + [SHOW_COMPLETED]: todo => todo.completed +} + +export default class MainSection extends Component { + static propTypes = { + todos: PropTypes.array.isRequired, + actions: PropTypes.object.isRequired + } + + state = { filter: SHOW_ALL } + + handleClearCompleted = () => { + this.props.actions.clearCompleted() + } + + handleShow = filter => { + this.setState({ filter }) + } + + renderToggleAll(completedCount) { + const { todos, actions } = this.props + if (todos.length > 0) { + return ( + <input className="toggle-all" + type="checkbox" + checked={completedCount === todos.length} + onChange={actions.completeAll} /> + ) + } + } + + renderFooter(completedCount) { + const { todos } = this.props + const { filter } = this.state + const activeCount = todos.length - completedCount + + if (todos.length) { + return ( + <Footer completedCount={completedCount} + activeCount={activeCount} + filter={filter} + onClearCompleted={this.handleClearCompleted.bind(this)} + onShow={this.handleShow.bind(this)} /> + ) + } + } + + render() { + const { todos, actions } = this.props + const { filter } = this.state + + const filteredTodos = todos.filter(TODO_FILTERS[filter]) + const completedCount = todos.reduce((count, todo) => + todo.completed ? count + 1 : count, + 0 + ) + + return ( + <section className="main"> + {this.renderToggleAll(completedCount)} + <ul className="todo-list"> + {filteredTodos.map(todo => + <TodoItem key={todo.id} todo={todo} {...actions} /> + )} + </ul> + {this.renderFooter(completedCount)} + </section> + ) + } +} |