blob: 57f8b1d0e8b090b96c685a9711089d9dc00383d8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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>
);
}
}
|
