ldx-widgets/src/components/dialogue_box.coffee

widgets

React = require 'react'
createClass = require 'create-react-class'
Icons = require './alert_icons'
{StyleSheet, css} = require 'aphrodite'

{div, button} = require 'react-dom-factories'


styles = StyleSheet.create
  titleWrap:
    position: 'static'
    margin: '0'
    fontSize: '18px'
    height: '30px'
    lineHeight: '30px'
    padding: '20px'
  icon:
    display: 'inline-block'
    position: 'relative'
    height: '30px'
    width: '30px'
    top: '4px'
  title:
    display: 'inline-block'
    height: '30px'
    marginLeft: '20px'
  message:
    fontSize: '13px'
    margin: '20px 20px 25px 20px'
    color: 'rgb(115,115,115)' 
  indent:
    margin: '0 60px 25px 72px'

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

DialogueBox = createClass
  
  displayName: 'DialogueBox'

  getDefaultProps: ->
    width: 200
    alertIcon: 'WARNING'
  
  render: ->
    {top, width, height, showDialogue, message, cancel, confirmText, cancelText, dialogueTitle, alertIcon} = @props

    div {
      className: 'dialogue-box'
      style:
        width: width
        marginLeft: -(width/2)
        height: height
        transform: "translateY(#{top}px) translateZ(0px)"
        msTransform: "translateY(#{top}px)"
        WebkitTransform: "translateY(#{top}px) translateZ(0px)"
    }, [
      div {
        key: 'titleWrap'
        className: css(styles.titleWrap)
      }, [
        div {
          key: 'icon'
          className: css(styles.icon)
        }, Icons[alertIcon]?() if dialogueTitle?
        div {
          key: 'title'
          className: css(styles.title)
        }, dialogueTitle
      ] if dialogueTitle?
      div {
        key: 'message'
        className: css(styles.message, if dialogueTitle? then styles.indent)
      }, 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) ->
    @props.transitionOut(e.target.value)

    


module.exports = DialogueBox