DoYouEvenBench: Add Facebook's React TodoMVC test case
[WebKit-https.git] / PerformanceTests / DoYouEvenBench / todomvc / labs / architecture-examples / react / js / footer.jsx
1 /**
2  * @jsx React.DOM
3  */
4 /*jshint quotmark:false */
5 /*jshint white:false */
6 /*jshint trailing:false */
7 /*jshint newcap:false */
8 /*global React, ALL_TODOS, ACTIVE_TODOS, Utils, COMPLETED_TODOS */
9 (function (window) {
10     'use strict';
11
12     window.TodoFooter = React.createClass({
13         render: function () {
14             var activeTodoWord = Utils.pluralize(this.props.count, 'item');
15             var clearButton = null;
16
17             if (this.props.completedCount > 0) {
18                 clearButton = (
19                     <button
20                         id="clear-completed"
21                         onClick={this.props.onClearCompleted}>
22                         {''}Clear completed ({this.props.completedCount}){''}
23                     </button>
24                 );
25             }
26
27             var show = {
28                 ALL_TODOS: '',
29                 ACTIVE_TODOS: '',
30                 COMPLETED_TODOS: ''
31             };
32             show[this.props.nowShowing] = 'selected';
33
34             return (
35                 <footer id="footer">
36                     <span id="todo-count">
37                         <strong>{this.props.count}</strong>
38                         {' '}{activeTodoWord}{' '}left{''}
39                     </span>
40                     <ul id="filters">
41                         <li>
42                             <a href="#/" class={show[ALL_TODOS]}>All</a>
43                         </li>
44                         {' '}
45                         <li>
46                             <a href="#/active" class={show[ACTIVE_TODOS]}>Active</a>
47                         </li>
48                         {' '}
49                         <li>
50                             <a href="#/completed" class={show[COMPLETED_TODOS]}>Completed</a>
51                         </li>
52                     </ul>
53                     {clearButton}
54                 </footer>
55             );
56         }
57     });
58 })(window);