diff options
Diffstat (limited to '')
-rw-r--r-- | third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/react-redux/src/components/Footer.js | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/react-redux/src/components/Footer.js b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/react-redux/src/components/Footer.js new file mode 100644 index 0000000000..e272c08a54 --- /dev/null +++ b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/react-redux/src/components/Footer.js @@ -0,0 +1,71 @@ +import React, { PropTypes, Component } from 'react' +import classnames from 'classnames' +import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters' + +const FILTER_TITLES = { + [SHOW_ALL]: 'All', + [SHOW_ACTIVE]: 'Active', + [SHOW_COMPLETED]: 'Completed' +} + +export default class Footer extends Component { + static propTypes = { + completedCount: PropTypes.number.isRequired, + activeCount: PropTypes.number.isRequired, + filter: PropTypes.string.isRequired, + onClearCompleted: PropTypes.func.isRequired, + onShow: PropTypes.func.isRequired + } + + renderTodoCount() { + const { activeCount } = this.props + const itemWord = activeCount === 1 ? 'item' : 'items' + + return ( + <span className="todo-count"> + <strong>{activeCount || 'No'}</strong> {itemWord} left + </span> + ) + } + + renderFilterLink(filter) { + const title = FILTER_TITLES[filter] + const { filter: selectedFilter, onShow } = this.props + + return ( + <a className={classnames({ selected: filter === selectedFilter })} + style={{ cursor: 'pointer' }} + onClick={() => onShow(filter)}> + {title} + </a> + ) + } + + renderClearButton() { + const { completedCount, onClearCompleted } = this.props + if (completedCount > 0) { + return ( + <button className="clear-completed" + onClick={onClearCompleted} > + Clear completed + </button> + ) + } + } + + render() { + return ( + <footer className="footer"> + {this.renderTodoCount()} + <ul className="filters"> + {[ SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED ].map(filter => + <li key={filter}> + {this.renderFilterLink(filter)} + </li> + )} + </ul> + {this.renderClearButton()} + </footer> + ) + } +} |