diff options
Diffstat (limited to '')
-rw-r--r-- | third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/inferno/src/index.js | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/inferno/src/index.js b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/inferno/src/index.js new file mode 100644 index 0000000000..87414c0b38 --- /dev/null +++ b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/inferno/src/index.js @@ -0,0 +1,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')); |