mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-12-06 00:13:54 +03:00
6782f4ae41
* Move extension * prettier
61 lines
1.3 KiB
JavaScript
61 lines
1.3 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
|
|
class TodoTextInput extends Component {
|
|
constructor(props, context) {
|
|
super(props, context);
|
|
this.state = {
|
|
text: this.props.text || '',
|
|
};
|
|
}
|
|
|
|
handleSubmit(e) {
|
|
const text = e.target.value.trim();
|
|
if (e.which === 13) {
|
|
this.props.onSave(text);
|
|
if (this.props.newTodo) {
|
|
this.setState({ text: '' });
|
|
}
|
|
}
|
|
}
|
|
|
|
handleChange(e) {
|
|
this.setState({ text: e.target.value });
|
|
}
|
|
|
|
handleBlur(e) {
|
|
if (!this.props.newTodo) {
|
|
this.props.onSave(e.target.value);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<input
|
|
className={classnames({
|
|
edit: this.props.editing,
|
|
'new-todo': this.props.newTodo,
|
|
})}
|
|
type="text"
|
|
placeholder={this.props.placeholder}
|
|
autoFocus={true}
|
|
value={this.state.text}
|
|
onBlur={this.handleBlur.bind(this)}
|
|
onChange={this.handleChange.bind(this)}
|
|
onKeyDown={this.handleSubmit.bind(this)}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
TodoTextInput.propTypes = {
|
|
onSave: PropTypes.func.isRequired,
|
|
text: PropTypes.string,
|
|
placeholder: PropTypes.string,
|
|
editing: PropTypes.bool,
|
|
newTodo: PropTypes.bool,
|
|
};
|
|
|
|
export default TodoTextInput;
|