redux-devtools/packages/redux-slider-monitor/examples/todomvc/components/TodoItem.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

78 lines
1.7 KiB
JavaScript
Executable File

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>
);
}
}