REGRESSION (r294291): Another nullptr crash with ::first-letter
[WebKit-https.git] / Websites / browserbench.org / Speedometer2.0 / resources / todomvc / architecture-examples / inferno / src / item.js
1 import Inferno from 'inferno';
2 import Component from 'inferno-component';
3 import { ESCAPE, ENTER, isEqual } from './share';
4
5 export default class Item extends Component {
6     constructor({data, ...props}) {
7         super(props);
8         this.todo = data;
9         this.state = {text: data.title};
10         this.editor = null;
11     }
12
13     componentWillReceiveProps = ({data}) => this.setText(data.title);
14     shouldComponentUpdate = ({data}, {text}) => !(isEqual(data, this.todo) && text === this.state.text);
15     componentWillUpdate = ({data}) => (this.todo = data);
16     componentDidUpdate = () => this.editor.focus();
17
18     setText = text => this.setState({text});
19
20     render({doToggle, doDelete, doSave, onBlur, onFocus}, {text}) {
21         const {title, completed, editing} = this.todo;
22
23         const cls = [];
24         editing && cls.push('editing');
25         completed && cls.push('completed');
26
27         const handleKeydown = e => {
28             if (e.which === ESCAPE) return onBlur();
29             if (e.which === ENTER) return doSave(text);
30         };
31
32         // tmp fix
33         const handleBlur = () => doSave(text);
34         const handleInput = e => this.setText(e.target.value);
35
36         return (
37             <li className={ cls.join(' ') }>
38                 <div className="view">
39                     <input className="toggle" type="checkbox"
40                         checked={ completed } onClick={ doToggle }
41                     />
42
43                     <label ondblclick={ onFocus }>{ title }</label>
44
45                     <button className="destroy" onClick={ doDelete }></button>
46                 </div>
47
48                 <input className="edit"
49                     ref={el => { this.editor = el }}
50                     value={ editing && text }
51                     onblur={ handleBlur }
52                     oninput={ handleInput }
53                     onkeydown={ handleKeydown }
54                 />
55             </li>
56         );
57     }
58 }