1 files changed, 85 insertions, 0 deletions
diff --git a/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/preact/src/app/item.js b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/preact/src/app/item.js
new file mode 100644
index 0000000000..eed31ba8e1
--- /dev/null
+++ b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/preact/src/app/item.js
@@ -0,0 +1,85 @@
+import cx from 'classnames';
+import { h, Component } from 'preact';
+
+const ESCAPE_KEY = 27;
+const ENTER_KEY = 13;
+
+export default class TodoItem extends Component {
+    handleSubmit = () => {
+        let { onSave, onDestroy, todo } = this.props,
+            val = this.state.editText.trim();
+        if (val) {
+            onSave(todo, val);
+            this.setState({ editText: val });
+        }
+        else {
+            onDestroy(todo);
+        }
+    };
+
+    handleEdit = () => {
+        let { onEdit, todo } = this.props;
+        onEdit(todo);
+        this.setState({ editText: todo.title });
+    };
+
+    toggle = e => {
+        let { onToggle, todo } = this.props;
+        onToggle(todo);
+        e.preventDefault();
+    };
+
+    handleKeyDown = e => {
+        if (e.which===ESCAPE_KEY) {
+            let { todo } = this.props;
+            this.setState({ editText: todo.title });
+            this.props.onCancel(todo);
+        }
+        else if (e.which===ENTER_KEY) {
+            this.handleSubmit();
+        }
+    };
+
+    handleDestroy = () => {
+        this.props.onDestroy(this.props.todo);
+    };
+
+    // shouldComponentUpdate({ todo, editing, editText }) {
+    //  return (
+    //      todo !== this.props.todo ||
+    //      editing !== this.props.editing ||
+    //      editText !== this.state.editText
+    //  );
+    // }
+
+    componentDidUpdate() {
+        let node = this.base && this.base.querySelector('.edit');
+        if (node) node.focus();
+    }
+
+    render({ todo:{ title, completed }, onToggle, onDestroy, editing }, { editText }) {
+        return (
+            <li class={cx({ completed, editing })}>
+                <div class="view">
+                    <input
+                        class="toggle"
+                        type="checkbox"
+                        checked={completed}
+                        onChange={this.toggle}
+                    />
+                    <label onDblClick={this.handleEdit}>{title}</label>
+                    <button class="destroy" onClick={this.handleDestroy} />
+                </div>
+                { editing && (
+                    <input
+                        class="edit"
+                        value={editText}
+                        onBlur={this.handleSubmit}
+                        onInput={this.linkState('editText')}
+                        onKeyDown={this.handleKeyDown}
+                    />
+                ) }
+            </li>
+        );
+    }
+}