Speedometer: Add a React + Redux TodoMVC implementation
[WebKit-https.git] / PerformanceTests / Speedometer / resources / todomvc / architecture-examples / react-redux / src / components / TodoTextInput.js
1 import React, { Component, PropTypes } from 'react'
2 import classnames from 'classnames'
3
4 export default class TodoTextInput extends Component {
5   static propTypes = {
6     onSave: PropTypes.func.isRequired,
7     text: PropTypes.string,
8     placeholder: PropTypes.string,
9     editing: PropTypes.bool,
10     newTodo: PropTypes.bool
11   }
12
13   state = {
14     text: this.props.text || ''
15   }
16
17   handleSubmit = e => {
18     const text = e.target.value.trim()
19     if (e.which === 13) {
20       this.props.onSave(text)
21       if (this.props.newTodo) {
22         this.setState({ text: '' })
23       }
24     }
25   }
26
27   handleChange = e => {
28     this.setState({ text: e.target.value })
29   }
30
31   handleBlur = e => {
32     if (!this.props.newTodo) {
33       this.props.onSave(e.target.value)
34     }
35   }
36
37   render() {
38     return (
39       <input className={
40         classnames({
41           edit: this.props.editing,
42           'new-todo': this.props.newTodo
43         })}
44         type="text"
45         placeholder={this.props.placeholder}
46         autoFocus="true"
47         value={this.state.text}
48         onBlur={this.handleBlur}
49         onChange={this.handleChange}
50         onKeyDown={this.handleSubmit} />
51     )
52   }
53 }