redux-devtools/packages/redux-devtools-slider-monitor/examples/todomvc/components/TodoItem.js
Nathan Bierema 10bf7bc084
chore(*): upgrade prettier (#570)
* chore(*): upgrade prettier

* chore(*): upgrade prettier
2020-08-08 16:26:39 -04:00

75 lines
1.7 KiB
JavaScript

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import TodoTextInput from './TodoTextInput';
export default class TodoItem extends Component {
static propTypes = {
todo: PropTypes.object.isRequired,
editTodo: PropTypes.func.isRequired,
deleteTodo: PropTypes.func.isRequired,
markTodo: PropTypes.func.isRequired,
};
constructor(props, context) {
super(props, context);
this.state = {
editing: false,
};
}
handleDoubleClick = () => {
this.setState({ editing: true });
};
handleSave = (id, text) => {
if (text.length === 0) {
this.props.deleteTodo(id);
} else {
this.props.editTodo(id, text);
}
this.setState({ editing: false });
};
render() {
const { todo, markTodo, deleteTodo } = this.props;
let element;
if (this.state.editing) {
element = (
<TodoTextInput
text={todo.text}
editing={this.state.editing}
onSave={(text) => this.handleSave(todo.id, text)}
/>
);
} else {
element = (
<div className="view">
<input
className="toggle"
type="checkbox"
checked={todo.marked}
onChange={() => markTodo(todo.id)}
/>
<label htmlFor="text" onDoubleClick={this.handleDoubleClick}>
{todo.text}
</label>
<button className="destroy" onClick={() => deleteTodo(todo.id)} />
</div>
);
}
return (
<li
className={classnames({
completed: todo.marked,
editing: this.state.editing,
})}
>
{element}
</li>
);
}
}