1 files changed, 58 insertions, 0 deletions
diff --git a/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/inferno/src/item.js b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/inferno/src/item.js
new file mode 100644
index 0000000000..57f8b1d0e8
--- /dev/null
+++ b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/inferno/src/item.js
@@ -0,0 +1,58 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+import { ESCAPE, ENTER, isEqual } from './share';
+
+export default class Item extends Component {
+    constructor({data, ...props}) {
+        super(props);
+        this.todo = data;
+        this.state = {text: data.title};
+        this.editor = null;
+    }
+
+    componentWillReceiveProps = ({data}) => this.setText(data.title);
+    shouldComponentUpdate = ({data}, {text}) => !(isEqual(data, this.todo) && text === this.state.text);
+    componentWillUpdate = ({data}) => (this.todo = data);
+    componentDidUpdate = () => this.editor.focus();
+
+    setText = text => this.setState({text});
+
+    render({doToggle, doDelete, doSave, onBlur, onFocus}, {text}) {
+        const {title, completed, editing} = this.todo;
+
+        const cls = [];
+        editing && cls.push('editing');
+        completed && cls.push('completed');
+
+        const handleKeydown = e => {
+            if (e.which === ESCAPE) return onBlur();
+            if (e.which === ENTER) return doSave(text);
+        };
+
+        // tmp fix
+        const handleBlur = () => doSave(text);
+        const handleInput = e => this.setText(e.target.value);
+
+        return (
+            <li className={ cls.join(' ') }>
+                <div className="view">
+                    <input className="toggle" type="checkbox"
+                        checked={ completed } onClick={ doToggle }
+                    />
+
+                    <label ondblclick={ onFocus }>{ title }</label>
+
+                    <button className="destroy" onClick={ doDelete }></button>
+                </div>
+
+                <input className="edit"
+                    ref={el => { this.editor = el }}
+                    value={ editing && text }
+                    onblur={ handleBlur }
+                    oninput={ handleInput }
+                    onkeydown={ handleKeydown }
+                />
+            </li>
+        );
+    }
+}