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 }