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