import * as classNames from 'classnames'
import * as React from 'react'
import { Component } from 'react'
import { observer } from 'mobx-react'

import { Todo } from './Todo'

interface Props {
  todo: Todo
}

@observer
export class TodoItem extends Component<Props, void> {
  public render() {
    return (
      <li
        className={
          classNames({
            'completed': this.props.todo.completed
          })
        }
      >
        <div className="view">
          <input
            checked={this.props.todo.completed}
            className="toggle"
            id={this.props.todo.id}
            onChange={() => this.props.todo.toggleCompleted()}
            type="checkbox"
          />
          <label htmlFor={this.props.todo.id}>{this.props.todo.text}</label>
          <button className="destroy" />
        </div>
        <input className="edit" defaultValue={this.props.todo.text} />
      </li>
    )
  }
}
import * as classNames from 'classnames'
import * as React from 'react'
import { Component } from 'react'
import { observer } from 'mobx-react'

import { Todo } from './Todo'

interface Props {
  todo: Todo
}

interface State {
  mode: 'edit' | 'view'
}

@observer
export class TodoItem extends Component<Props, State> {
  constructor(props: Props, context?: any) {
    super(props, context)

    this.state = {
      mode: 'view'
    }
  }

  public render() {
    return (
      <li
        className={
          classNames({
            'completed': this.props.todo.completed,
            'editing': this.state.mode === 'edit'
          })
        }
      >
        <div className="view">
          <input
            checked={this.props.todo.completed}
            className="toggle"
            id={this.props.todo.id}
            onChange={() => this.props.todo.toggleCompleted()}
            type="checkbox"
          />
          <label
            htmlFor={this.props.todo.id}
            onDoubleClick={() => this.switchToEditMode()}
          >
            {this.props.todo.text}
          </label>
          <button className="destroy" />
        </div>
        <input
          className="edit"
          defaultValue={this.props.todo.text}
          onBlur={() => this.switchToViewMode()}
        />
      </li>
    )
  }

  private switchToEditMode() {
    this.setState({
      mode: 'edit'
    })
  }

  private switchToViewMode() {
    this.setState({
      mode: 'view'
    })
  }
}
Switch beetween edit and view mode
Switch beetween edit and view mode
