ldx-widgets/src/components/alert_modal.coffee

widgets

React = require 'react'
{Flux} = require 'delorean'
animationMixin = require '../mixins/animation_mixin'
NoAccess = React.createFactory require('./no_access')

{div, button} = React.DOM

AlertModal = React.createClass
  
  displayName: 'AlertModal'

  mixins: [animationMixin, Flux.mixins.storeListener]

  watchStores: ['popoverModal']

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

  propTypes:
    okText: React.PropTypes.string
    cb: React.PropTypes.func
    message: React.PropTypes.string.isRequired

  getDefaultProps: ->
    okText: 'OK'

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

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

  render: ->
    {scale} = @state
    {message, okText} = @props

    div {
      className: 'modal alert'
      onClick: @handleClick
      style:
        transform: "scale(#{scale})"
        WebkitTransform: "scale(#{scale})"
        msTransform: "scale(#{scale})"
    }, [
      div {
        key: 'message'
        className: 'message'
      }, 
        NoAccess {
          displayText: message
          styleOverrides:
            fontSize: '14px'
            background: 'none'
            paddingTop: 10
        }
      div {
        key: 'ok'
        className: 'buttons'
      }, [
        button {
          className: 'prmy ok'
          key: 'ok'
          onClick: @close
        }, okText
      ]
    ]

module.exports = AlertModal