ldx-widgets/src/components/form_alert_item.coffee

widgets

React = require 'react'
createClass = require 'create-react-class'
PropTypes = require 'prop-types'

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

FormAlertItem = createClass
  
  displayName: 'FormAlertItem'

  propTypes:
    isAlert: PropTypes.bool
    message: PropTypes.oneOfType [
      PropTypes.string
      PropTypes.number
    ]
  
  getInitialState: ->
    leave: no
    enter: yes
  
  componentDidMount: ->
    {removeTimer} = @props.alert

    setTimeout(@handleRemove, removeTimer) if removeTimer?

    @rootEl.addEventListener 'animationend', @didEnter
  
  render: ->
    {alert} = @props
    {isAlert, message} = alert
    {enter, leave} = @state

    className = if isAlert then 'alert' else 'success'
    className += ' animate-in' if enter
    className += ' animate-out' if leave

    li {
      className
      ref: (@rootEl) =>
    }, [
      div {
        key: 'title'
        className: 'message'
      }, [
        div {
          key: 'message'
          className: 'alert-text'
          title: message
        }, message
        button {
          key: 'remove-item'
          onClick: @handleRemove
          className: 'alert-close'
        }
      ]
    ]

  didEnter: ->
    @rootEl.removeEventListener 'animationend', @didEnter
    @setState {enter: no}
    
  
  handleRemove: ->
    @rootEl.addEventListener 'animationend', @removeAlert
    @setState {leave: yes}


  removeAlert: -> 
    @rootEl.removeEventListener 'animationend', @removeAlert
    @props.removeAlert @props.alert
    

module.exports = FormAlertItem