Speedometer: Add a React + Redux TodoMVC implementation
[WebKit-https.git] / PerformanceTests / Speedometer / resources / todomvc / architecture-examples / react-redux / src / components / Footer.js
1 import React, { PropTypes, Component } from 'react'
2 import classnames from 'classnames'
3 import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters'
4
5 const FILTER_TITLES = {
6   [SHOW_ALL]: 'All',
7   [SHOW_ACTIVE]: 'Active',
8   [SHOW_COMPLETED]: 'Completed'
9 }
10
11 export default class Footer extends Component {
12   static propTypes = {
13     completedCount: PropTypes.number.isRequired,
14     activeCount: PropTypes.number.isRequired,
15     filter: PropTypes.string.isRequired,
16     onClearCompleted: PropTypes.func.isRequired,
17     onShow: PropTypes.func.isRequired
18   }
19
20   renderTodoCount() {
21     const { activeCount } = this.props
22     const itemWord = activeCount === 1 ? 'item' : 'items'
23
24     return (
25       <span className="todo-count">
26         <strong>{activeCount || 'No'}</strong> {itemWord} left
27       </span>
28     )
29   }
30
31   renderFilterLink(filter) {
32     const title = FILTER_TITLES[filter]
33     const { filter: selectedFilter, onShow } = this.props
34
35     return (
36       <a className={classnames({ selected: filter === selectedFilter })}
37          style={{ cursor: 'pointer' }}
38          onClick={() => onShow(filter)}>
39         {title}
40       </a>
41     )
42   }
43
44   renderClearButton() {
45     const { completedCount, onClearCompleted } = this.props
46     if (completedCount > 0) {
47       return (
48         <button className="clear-completed"
49                 onClick={onClearCompleted} >
50           Clear completed
51         </button>
52       )
53     }
54   }
55
56   render() {
57     return (
58       <footer className="footer">
59         {this.renderTodoCount()}
60         <ul className="filters">
61           {[ SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED ].map(filter =>
62             <li key={filter}>
63               {this.renderFilterLink(filter)}
64             </li>
65           )}
66         </ul>
67         {this.renderClearButton()}
68       </footer>
69     )
70   }
71 }