redux-devtools/packages/redux-slider-monitor/examples/todomvc/components/TodoTextInput.js
Jhen-Jie Hong 476e37a875 Add redux-slider-monitor (#434)
* Add redux-slider-monitor

* Fix example configuration of redux-slider-monitor

* Fix lint errors

* CI: Run build:all before lint
2018-12-22 16:20:04 +02:00

63 lines
1.3 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}
/>
);
}
}