ldx-widgets/src/components/confirm_user_action.coffee

widgets

###
Confirm User Action Props

NOTE: this widget is intended to be passed as the element prop to the pvr widget

@props.onOkay
  callback to be executed when the user clicks the 'OK' button

@props.confirmText - default 'Are you sure?'
  String to display to the user

@props.confirmBtnLabel - default 'OK'
  String to display on the button that executes the callback

@props.cancelBtnLabel - default 'Cancel'
  String to display on the button that dismisses the pvr w/ no action

###

React = require 'react'

{div, button} = React.DOM


ConfirmUserAction = React.createClass
  
  displayName: 'ConfirmUserAction'

  propTypes:
    close: React.PropTypes.func.isRequired 
    onOkay: React.PropTypes.func.isRequired 

  getDefaultProps: ->
    {
      confirmText: 'Are you sure?'
      confirmBtnLabel: 'OK'
      cancelBtnLabel: 'Cancel'
    }

  handleButtonClick: (e) ->
    if e.target.value is 'okay' then @props.onOkay()
    else @props.close()
    

  render: ->
    {confirmText, confirmBtnLabel, cancelBtnLabel} = @props

    div {
      key: 'inner'
      className: 'inner confirm'
    }, [
      div {
        key: 'message'
        className: 'message'
      }, confirmText 
      button {
        key: 'okay-btn'
        type: 'button'
        className: 'okay-btn'
        onClick: @handleButtonClick
        value: 'okay'
      }, confirmBtnLabel
      button {
        key: 'cancel-btn'
        type: 'button'
        className: 'cancel-btn'
        onClick: @handleButtonClick
        value: 'cancel'
      }, cancelBtnLabel
    ]
    

module.exports = ConfirmUserAction