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