redux-devtools/packages/redux-devtools-slider-monitor/examples/todomvc/components/TodoTextInput.tsx

80 lines
1.7 KiB
TypeScript
Raw Normal View History

import React, {
ChangeEventHandler,
Component,
FocusEventHandler,
KeyboardEventHandler,
} from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
interface State {
text: string;
}
interface Props {
onSave: (text: string) => void;
text?: string;
placeholder?: string;
editing?: boolean;
newTodo?: boolean;
}
export default class TodoTextInput extends Component<Props, State> {
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,
};
state = {
text: this.props.text || '',
};
handleSubmit: KeyboardEventHandler<HTMLInputElement> = (e) => {
const text = e.currentTarget.value.trim();
if (e.which === 13) {
this.props.onSave(text);
if (this.props.newTodo) {
this.setState({ text: '' });
}
}
2019-01-10 21:51:14 +03:00
};
handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
this.setState({ text: e.target.value });
2019-01-10 21:51:14 +03:00
};
handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
if (!this.props.newTodo) {
this.props.onSave(e.target.value);
}
2019-01-10 21:51:14 +03:00
};
render() {
return (
<input
2019-01-10 21:51:14 +03:00
className={classnames({
edit: this.props.editing,
'new-todo': this.props.newTodo,
2019-01-10 21:51:14 +03:00
})}
2019-01-10 20:23:33 +03:00
type="text"
placeholder={this.props.placeholder}
autoFocus={true}
value={this.state.text}
onBlur={this.handleBlur}
onChange={this.handleChange}
onKeyDown={this.handleSubmit}
/>
);
}
}