ldx-widgets/src/components/form_alert_item.coffee

widgets

React = require 'react'
createClass = require 'create-react-class'
PropTypes = require 'prop-types'
animationMixin = require '../mixins/animation_mixin'

{li, div, button} = React.DOM

FormAlertItem = createClass
  
  displayName: 'FormAlertItem'

  mixins: [animationMixin]

  enterDuration: 300
  enterStateStart:
    scale: 0
  enterStateEnd:
    scale: 1
  enterEasing: 'easeOutCirc'
  
  leaveDuration: 300
  leaveStateStart:
    scale: 1
  leaveStateEnd:
    scale: 0
  leaveEasing: 'easeInCirc'

  propTypes:
    isAlert: PropTypes.bool
    message: PropTypes.oneOfType [
      PropTypes.string
      PropTypes.number
    ]
  
  render: ->
    {alert} = @props
    {isAlert, message} = alert
    {scale} = @state

    li {
      className: if isAlert then 'alert' else 'success'
      style:
        transform: "scaleY(#{scale}) translateZ(0)"
        WebkitTransform: "scaleY(#{scale}) translateZ(0)"
        msTransform: "scaleY(#{scale})"
    }, [
      div {
        key: 'title'
        className: 'message'
      }, [
        div {
          key: 'message'
          className: 'alert-text'
          title: message
        }, message
        button {
          key: 'remove-item'
          onClick: @removeAlert
          className: 'alert-close'
        }
      ]
    ]

  componentDidMount: ->
    {removeTimer} = @props.alert

    if removeTimer?
      setTimeout =>
        @removeAlert(@props.alert)
      , removeTimer

  removeAlert: -> @props.removeAlert @props.alert

module.exports = FormAlertItem