diff options
Diffstat (limited to '')
-rw-r--r-- | third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/labs/architecture-examples/react/js/app.jsx | 207 |
1 files changed, 207 insertions, 0 deletions
diff --git a/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/labs/architecture-examples/react/js/app.jsx b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/labs/architecture-examples/react/js/app.jsx new file mode 100644 index 0000000000..1e1e2a3e12 --- /dev/null +++ b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/labs/architecture-examples/react/js/app.jsx @@ -0,0 +1,207 @@ +/** + * @jsx React.DOM + */ +/*jshint quotmark:false */ +/*jshint white:false */ +/*jshint trailing:false */ +/*jshint newcap:false */ +/*global Utils, ALL_TODOS, ACTIVE_TODOS, COMPLETED_TODOS, + TodoItem, TodoFooter, React, Router*/ + +(function (window, React) { + 'use strict'; + + window.ALL_TODOS = 'all'; + window.ACTIVE_TODOS = 'active'; + window.COMPLETED_TODOS = 'completed'; + + var ENTER_KEY = 13; + + var TodoApp = React.createClass({ + getInitialState: function () { + var todos = Utils.store('react-todos'); + return { + todos: todos, + nowShowing: ALL_TODOS, + editing: null + }; + }, + + componentDidMount: function () { + var router = Router({ + '/': this.setState.bind(this, {nowShowing: ALL_TODOS}), + '/active': this.setState.bind(this, {nowShowing: ACTIVE_TODOS}), + '/completed': this.setState.bind(this, {nowShowing: COMPLETED_TODOS}) + }); + router.init(); + this.refs.newField.getDOMNode().focus(); + }, + + handleNewTodoKeyDown: function (event) { + if (event.which !== ENTER_KEY) { + return; + } + + var val = this.refs.newField.getDOMNode().value.trim(); + var todos; + var newTodo; + + if (val) { + todos = this.state.todos; + newTodo = { + id: Utils.uuid(), + title: val, + completed: false + }; + this.setState({todos: todos.concat([newTodo])}); + this.refs.newField.getDOMNode().value = ''; + } + + return false; + }, + + toggleAll: function (event) { + var checked = event.target.checked; + + this.state.todos.forEach(function (todo) { + todo.completed = checked; + }); + + this.setState({todos: this.state.todos}); + }, + + toggle: function (todo) { + todo.completed = !todo.completed; + this.setState({todos: this.state.todos}); + }, + + destroy: function (todo) { + var newTodos = this.state.todos.filter(function (candidate) { + return candidate.id !== todo.id; + }); + + this.setState({todos: newTodos}); + }, + + edit: function (todo, callback) { + // refer to todoItem.js `handleEdit` for the reasoning behind the + // callback + this.setState({editing: todo.id}, function () { + callback(); + }); + }, + + save: function (todo, text) { + todo.title = text; + this.setState({todos: this.state.todos, editing: null}); + }, + + cancel: function () { + this.setState({editing: null}); + }, + + clearCompleted: function () { + var newTodos = this.state.todos.filter(function (todo) { + return !todo.completed; + }); + + this.setState({todos: newTodos}); + }, + + componentDidUpdate: function () { + Utils.store('react-todos', this.state.todos); + }, + + render: function () { + var footer = null; + var main = null; + var todoItems = {}; + var activeTodoCount; + var completedCount; + + var shownTodos = this.state.todos.filter(function (todo) { + switch (this.state.nowShowing) { + case ACTIVE_TODOS: + return !todo.completed; + case COMPLETED_TODOS: + return todo.completed; + default: + return true; + } + }.bind(this)); + + shownTodos.forEach(function (todo) { + todoItems[todo.id] = ( + <TodoItem + todo={todo} + onToggle={this.toggle.bind(this, todo)} + onDestroy={this.destroy.bind(this, todo)} + onEdit={this.edit.bind(this, todo)} + editing={this.state.editing === todo.id} + onSave={this.save.bind(this, todo)} + onCancel={this.cancel} + /> + ); + }.bind(this)); + + activeTodoCount = this.state.todos.filter(function (todo) { + return !todo.completed; + }).length; + + completedCount = this.state.todos.length - activeTodoCount; + + if (activeTodoCount || completedCount) { + footer = + <TodoFooter + count={activeTodoCount} + completedCount={completedCount} + nowShowing={this.state.nowShowing} + onClearCompleted={this.clearCompleted} + />; + } + + if (this.state.todos.length) { + main = ( + <section id="main"> + <input + id="toggle-all" + type="checkbox" + onChange={this.toggleAll} + checked={activeTodoCount === 0} + /> + <ul id="todo-list"> + {todoItems} + </ul> + </section> + ); + } + + return ( + <div> + <header id="header"> + <h1>todos</h1> + <input + ref="newField" + id="new-todo" + placeholder="What needs to be done?" + onKeyDown={this.handleNewTodoKeyDown} + /> + </header> + {main} + {footer} + </div> + ); + } + }); + + React.renderComponent(<TodoApp />, document.getElementById('todoapp')); + React.renderComponent( + <div> + <p>Double-click to edit a todo</p> + <p>Created by{' '} + <a href="http://github.com/petehunt/">petehunt</a> + </p> + <p>Part of{' '}<a href="http://todomvc.com">TodoMVC</a></p> + </div>, + document.getElementById('info')); +})(window, React); |