DoYouEvenBench: Add Facebook's React TodoMVC test case
[WebKit-https.git] / PerformanceTests / DoYouEvenBench / todomvc / labs / architecture-examples / react / js / todoItem.jsx
1 /**
2  * @jsx React.DOM
3  */
4 /*jshint quotmark: false */
5 /*jshint white: false */
6 /*jshint trailing: false */
7 /*jshint newcap: false */
8 /*global React, Utils */
9 (function (window) {
10     'use strict';
11
12     var ESCAPE_KEY = 27;
13     var ENTER_KEY = 13;
14
15     window.TodoItem = React.createClass({
16         handleSubmit: function () {
17             var val = this.state.editText.trim();
18             if (val) {
19                 this.props.onSave(val);
20                 this.setState({editText: val});
21             } else {
22                 this.props.onDestroy();
23             }
24             return false;
25         },
26         handleEdit: function () {
27             // react optimizes renders by batching them. This means you can't call
28             // parent's `onEdit` (which in this case triggeres a re-render), and
29             // immediately manipulate the DOM as if the rendering's over. Put it as a
30             // callback. Refer to app.js' `edit` method
31             this.props.onEdit(function () {
32                 var node = this.refs.editField.getDOMNode();
33                 node.focus();
34                 node.setSelectionRange(node.value.length, node.value.length);
35             }.bind(this));
36         },
37
38         handleKeyDown: function (event) {
39             if (event.keyCode === ESCAPE_KEY) {
40                 this.setState({editText: this.props.todo.title});
41                 this.props.onCancel();
42             } else if (event.keyCode === ENTER_KEY) {
43                 this.handleSubmit();
44             } else {
45                 this.setState({editText: event.target.value});
46             }
47         },
48
49         handleChange: function (event) {
50             this.setState({editText: event.target.value});
51         },
52
53         getInitialState: function () {
54             return {editText: this.props.todo.title};
55         },
56
57         componentWillReceiveProps: function (nextProps) {
58             if (nextProps.todo.title !== this.props.todo.title) {
59                 this.setState(this.getInitialState());
60             }
61         },
62
63         render: function () {
64             return (
65                 <li class={Utils.stringifyObjKeys({
66                     completed: this.props.todo.completed,
67                     editing: this.props.editing
68                 })}>
69                     <div class="view">
70                         <input
71                             class="toggle"
72                             type="checkbox"
73                             checked={this.props.todo.completed ? 'checked' : null}
74                             onChange={this.props.onToggle}
75                         />
76                         <label onDoubleClick={this.handleEdit}>
77                             {this.props.todo.title}
78                         </label>
79                         <button class='destroy' onClick={this.props.onDestroy} />
80                     </div>
81                     <input
82                         ref="editField"
83                         class="edit"
84                         value={this.state.editText}
85                         onBlur={this.handleSubmit}
86                         onChange={this.handleChange}
87                         onKeyDown={this.handleKeyDown}
88                     />
89                 </li>
90             );
91         }
92     });
93 })(window);