Merge the latest version of Speedometer 2.0 to browserbench.org against at r221119.
[WebKit-https.git] / Websites / browserbench.org / Speedometer2.0 / resources / todomvc / architecture-examples / inferno / src / index.js
1 import Inferno from 'inferno';
2 import Component from 'inferno-component';
3 import { ENTER, filters, read } from './share';
4 import { Head, Foot } from './base';
5 import Model from './model';
6 import Item from './item';
7
8 const { render } = Inferno;
9 const model = new Model();
10
11 class App extends Component {
12     state = {
13         route: read(),
14         todos: model.get()
15     };
16
17     update = arr => this.setState({todos: arr});
18
19     componentWillMount = () => {
20         window.onhashchange = () => this.setState({route: read()});
21     };
22
23     add = e => {
24         if (e.which !== ENTER) return;
25
26         const val = e.target.value.trim();
27         if (!val) return;
28
29         e.target.value = '';
30         this.update(
31             model.add(val)
32         );
33     };
34
35     edit = (todo, val) => {
36         val = val.trim();
37         if (val.length) {
38             this.update(
39                 model.put(todo, {title: val, editing: 0})
40             );
41         } else {
42             this.remove(todo);
43         }
44     };
45
46     focus = todo => this.update(
47         model.put(todo, {editing: 1})
48     );
49
50     blur = todo => this.update(
51         model.put(todo, {editing: 0})
52     );
53
54     remove = todo => this.update(
55         model.del(todo)
56     );
57
58     toggleOne = todo => this.update(
59         model.toggle(todo)
60     );
61
62     toggleAll = ev => this.update(
63         model.toggleAll(ev.target.checked)
64     );
65
66     clearCompleted = () => this.update(
67         model.clearCompleted()
68     );
69
70     render(_, {todos, route}) {
71         const num = todos.length;
72         const shown = todos.filter(filters[route]);
73         const numDone = todos.filter(filters.completed).length;
74         const numAct = num - numDone;
75
76         return (
77             <div>
78                 <Head onEnter={ this.add } />
79
80                 { num ? (
81                     <section className="main">
82                         <input className="toggle-all" type="checkbox"
83                             onClick={ this.toggleAll } checked={ numAct === 0 }
84                         />
85
86                         <ul className="todo-list">
87                             {
88                                 shown.map(t =>
89                                     <Item data={t}
90                                         onBlur={ () => this.blur(t) }
91                                         onFocus={ () => this.focus(t) }
92                                         doDelete={ () => this.remove(t) }
93                                         doSave={ val => this.edit(t, val) }
94                                         doToggle={ () => this.toggleOne(t) }
95                                     />
96                                 )
97                             }
98                         </ul>
99                     </section>
100                 ) : null }
101
102                 { (numAct || numDone) ? (
103                     <Foot onClear={ this.clearCompleted }
104                         left={numAct} done={numDone} route={route}
105                     />
106                 ) : null }
107             </div>
108         )
109     }
110 }
111
112 render(<App />, document.getElementById('app'));