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);