mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-12-05 07:53:51 +03:00
66 lines
1.4 KiB
JavaScript
Executable File
66 lines
1.4 KiB
JavaScript
Executable File
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
|
|
export default class TodoTextInput extends Component {
|
|
static propTypes = {
|
|
onSave: PropTypes.func.isRequired,
|
|
text: PropTypes.string,
|
|
placeholder: PropTypes.string,
|
|
editing: PropTypes.bool,
|
|
newTodo: PropTypes.bool
|
|
};
|
|
|
|
static defaultProps = {
|
|
text: '',
|
|
placeholder: '',
|
|
editing: false,
|
|
newTodo: false
|
|
};
|
|
|
|
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}
|
|
onChange={this.handleChange}
|
|
onKeyDown={this.handleSubmit}
|
|
/>
|
|
);
|
|
}
|
|
}
|