ldx-widgets/src/components/dialogue_box.coffee

widgets

React = require 'react'
animationMixin = require '../mixins/animation_mixin'

{div, button} = React.DOM

###
 This component should not be used directly, 
 see dialogue_wrapper for documentation on this widget
###

DialogueBox = React.createClass
  
  displayName: 'DialogueBox'

  mixins: [animationMixin]

  enterDuration: 200
  enterStateStart: ->
    top: -1 * @props.height
  enterStateEnd:
    top: 0
  enterEasing: 'easeOutCirc'
  
  leaveDuration: 200
  leaveStateStart:
    top: 0
  leaveStateEnd: ->
    top: -1 * @props.height - 50
  leaveEasing: 'easeInCirc'
  
  render: ->
    {top, showDialogue} = @state
    {width, height, showDialogue, message, cancel, confirmText, cancelText} = @props

    div {
      className: 'dialogue-box'
      style:
        top: top
        width: width
        marginLeft: -(width/2)
        height: height
    }, [
      div {
        key: 'message'
        className: 'message'
      }, message 
      button {
        key: 'okay-btn'
        className: 'okay-btn'
        onClick: @handleButtonClick
        value: 'okay'
      }, confirmText
      button {
        key: 'cancel-btn'
        className: 'cancel-btn'
        onClick: @handleButtonClick
        value: 'cancel'
      }, cancelText
    ]


  handleButtonClick: (e) ->
    if e.target.value is 'okay' then @callConfirm = yes
    else @callConfirm = no
    @props.transitionOut()

  componentWillUnmount: -> 
    @props.confirmCallback() if @callConfirm
    @props.cancelCallback()
    


module.exports = DialogueBox