ldx-widgets/src/components/alert_modal.coffee

widgets

React = require 'react'
createClass = require 'create-react-class'
PropTypes = require 'prop-types'
animationMixin = require '../mixins/animation_mixin'
NoAccess = React.createFactory require('./no_access')

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

AlertModal = createClass
  
  displayName: 'AlertModal'

  mixins: [animationMixin]

  enterStateStart:
    scale: .9
  enterStateEnd:
    scale: 1
  enterEasing: 'easeOutElastic'
  enterDuration: 600

  propTypes:
    className: PropTypes.string
    close: PropTypes.func.isRequired 
    okText: PropTypes.string
    cancelText: PropTypes.string
    cb: PropTypes.func
    height: PropTypes.number
    message: PropTypes.oneOfType([
      PropTypes.string
      PropTypes.element
    ]).isRequired
    

  getDefaultProps: ->
    okText: 'OK'
    cancelText: 'Cancel'
    className: 'modal alert'

  handleClick: (e) ->
    e.stopPropagation()

  close: -> @props.close()

  confirm: ->
    # Fire a callback if present
    @props.cb?()
    @props.close()

  render: ->
    {scale} = @state
    {message, okText, cancelText, cb, className, height} = @props
    messageAsChild = typeof message is 'object'
    
    style = 
      transform: "scale(#{scale})"
      WebkitTransform: "scale(#{scale})"
      msTransform: "scale(#{scale})"
    
    if height?
      style.height = height

    div {
      className: className
      onClick: @handleClick
      style: style
    }, [
      div {
        key: 'message'
        className: 'message'
      }, if messageAsChild then message else NoAccess {
          displayText: message
          styleOverrides:
            fontSize: '14px'
            background: 'none'
            paddingTop: 10
        }
      div {
        key: 'ok'
        className: 'buttons'
      }, [
        button {
          className: 'okay-cancel cancel'
          key: 'cancel'
          onClick: @close
        }, cancelText if cb?
        button {
          className: if cb? then 'okay-cancel okay' else 'prmy ok'
          key: 'ok'
          onClick: @confirm
        }, okText
      ]
    ]

module.exports = AlertModal