redux-devtools/packages/redux-devtools-slider-monitor/examples/todomvc/components/TodoItem.js

75 lines
1.7 KiB
JavaScript
Raw Normal View History

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 });
2019-01-10 21:51:14 +03:00
};
handleSave = (id, text) => {
if (text.length === 0) {
this.props.deleteTodo(id);
} else {
this.props.editTodo(id, text);
}
this.setState({ editing: false });
2019-01-10 21:51:14 +03:00
};
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 = (
2019-01-10 20:23:33 +03:00
<div className="view">
<input
2019-01-10 20:23:33 +03:00
className="toggle"
type="checkbox"
checked={todo.marked}
onChange={() => markTodo(todo.id)}
/>
2019-01-10 20:23:33 +03:00
<label htmlFor="text" onDoubleClick={this.handleDoubleClick}>
{todo.text}
</label>
2019-01-10 21:51:14 +03:00
<button className="destroy" onClick={() => deleteTodo(todo.id)} />
</div>
);
}
return (
<li
className={classnames({
completed: todo.marked,
editing: this.state.editing,
})}
>
{element}
</li>
);
}
}