import React, {PropTypes, Component} from 'react'

const DeleteButton = ({onConfirm}) => (
  <button
    className="btn btn-xs btn-danger admin-table--delete"
    onClick={onConfirm}
  >
    Delete
  </button>
)

const ConfirmButtons = ({onDelete, item, onCancel}) => (
  <div>
    <button
      className="btn btn-xs btn-primary"
      onClick={() => onDelete(item)}
    >
      <span className="icon checkmark"></span>
    </button>
    <button
      className="btn btn-xs btn-default"
      onClick={onCancel}
    >
      <span className="icon remove"></span>
    </button>
  </div>
)

class DeleteRow extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isConfirmed: false,
    }
    this.handleConfirm = ::this.handleConfirm
    this.handleCancel = ::this.handleCancel
  }

  handleConfirm() {
    this.setState({isConfirmed: true})
  }

  handleCancel() {
    this.setState({isConfirmed: false})
  }

  render() {
    const {onDelete, item} = this.props
    const {isConfirmed} = this.state

    if (isConfirmed) {
      return (
        <ConfirmButtons
          onDelete={onDelete}
          item={item}
          onCancel={this.handleCancel}
        />
      )
    }

    return (
      <DeleteButton onConfirm={this.handleConfirm} />
    )
  }
}

const {
  func,
  shape,
} = PropTypes

DeleteButton.propTypes = {
  onConfirm: func.isRequired,
}

ConfirmButtons.propTypes = {
  onDelete: func.isRequired,
  item: shape({}).isRequired,
  onCancel: func.isRequired,
}

DeleteRow.propTypes = {
  item: shape({}),
  onDelete: func.isRequired,
}

export default DeleteRow

import React, {PropTypes, Component} from 'react'
import OnClickOutside from 'shared/components/OnClickOutside'

const DeleteButton = ({onConfirm}) => (
  <button
    className="btn btn-xs btn-danger admin-table--delete"
    onClick={onConfirm}
  >
    Delete
  </button>
)

const ConfirmButtons = ({onDelete, item, onCancel}) => (
  <div>
    <button
      className="btn btn-xs btn-primary"
      onClick={() => onDelete(item)}
    >
      <span className="icon checkmark"></span>
    </button>
    <button
      className="btn btn-xs btn-default"
      onClick={onCancel}
    >
      <span className="icon remove"></span>
    </button>
  </div>
)

class DeleteRow extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isConfirmed: false,
    }
    this.handleConfirm = ::this.handleConfirm
    this.handleCancel = ::this.handleCancel
  }

  handleConfirm() {
    this.setState({isConfirmed: true})
  }

  handleCancel() {
    this.setState({isConfirmed: false})
  }

  handleClickOutside() {
    this.setState({isConfirmed: false})
  }

  render() {
    const {onDelete, item} = this.props
    const {isConfirmed} = this.state

    if (isConfirmed) {
      return (
        <ConfirmButtons
          onDelete={onDelete}
          item={item}
          onCancel={this.handleCancel}
        />
      )
    }

    return (
      <DeleteButton onConfirm={this.handleConfirm} />
    )
  }
}

const {
  func,
  shape,
} = PropTypes

DeleteButton.propTypes = {
  onConfirm: func.isRequired,
}

ConfirmButtons.propTypes = {
  onDelete: func.isRequired,
  item: shape({}).isRequired,
  onCancel: func.isRequired,
}

DeleteRow.propTypes = {
  item: shape({}),
  onDelete: func.isRequired,
}

export default OnClickOutside(DeleteRow)

Reset state of delete row button when user has clicked outside.