diff options
Diffstat (limited to '')
-rw-r--r-- | third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/preact/src/app/item.js | 85 |
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> + ); + } +} |