ldx-widgets/src/components/alert_modal.coffee

widgets

React = require 'react'
createClass = require 'create-react-class'
PropTypes = require 'prop-types'
NoAccess = React.createFactory require('./no_access')
Modal = React.createFactory require('./modal')
Icons = require './alert_icons'
{StyleSheet, css} = require 'aphrodite'

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

###&
  @props.close - REQUIRED - [Function]
  Function that closes the modal

  @props.cancelText - OPTIONAL - [String]
  Default to 'Cancel'. The title of the 'Cancel' or 'Dismiss' button. 
  Note: If the props.cb method is NOT passed this button is not rendered.

  @props.okText - OPTIONAL - [String]
  Default to 'OK'. The title of the 'okay' or 'confirm' button. 
  Note: This functions as the cancel or close button if th props.cb method is not passed

  @props.okColor - OPTIONAL - [String]
  Default to the primary blue. The color of the 'okay' or 'confirm' button. 

  @props.cb - REQUIRED - [Function]
  Function that gets called when the 'OK' button is clicked. Presumably this executes some sort of action like navigating the user or deleting an item. 

  @props.alertTitle - OPTIONAL - [String]
  The main point of the alert modal, eg 'Delete Item' or 'Unsaved Changes'
  If alertTitle is not provided, only the message will be rendered

  @props.alertIcon - OPTIONAL - [Enum] - 'WARNING', 'DELETE'
  Defaults to 'WARNING'. The icon to show next to the alert title.
  Note: will not show if no alertTitle is passed. 

  @props.message - OPTIONAL - [String]
  Can be a string that is the detail text of the alert modal, rendering on the the title.
  Can be a react element that is the entire body of the modal. This will cause the title, icon, and message above to not be rendered.
  If message is not provied the generic NoAccess widget will be rendered.
&###

modalStyles = StyleSheet.create
  modal:
    position: 'absolute'
    top: '30%'
    left: '50%'
    width: '460px'
    height: 'auto'
    marginLeft: '-230px'
    marginTop: '-90px'
    boxShadow: '0px 2px 10px rgba(0, 0, 0, 0.5)'

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'


AlertModal = createClass
  
  displayName: 'AlertModal'

  propTypes:
    close: PropTypes.func.isRequired 
    okText: PropTypes.string
    okColor: PropTypes.string
    cancelText: PropTypes.string
    cb: PropTypes.func
    alertTitle: PropTypes.string
    alertIcon: PropTypes.string
    message: PropTypes.oneOfType([
      PropTypes.string
      PropTypes.element
    ]).isRequired
    
    

  getDefaultProps: ->
    okText: 'OK'
    cancelText: 'Cancel'
    alertTitle: null
    alertIcon: 'WARNING'
    message: null


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

  close: -> @props.close()

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

  render: ->
    {message, okText, okColor, cancelText, cb, alertIcon, alertTitle} = @props
    
    okStyles = {}
    if okColor?
      okStyles.color = okColor
    else if alertIcon is 'DELETE'
      okStyles.color = 'rgb(236,26,35)'

    content = []

    if alertTitle?
      content.push(div {
        key: 'titleWrap'
        className: css(styles.titleWrap)
      }, [
        div {
          key: 'icon'
          className: css(styles.icon)
        }, Icons[alertIcon]?() if alertTitle?
        div {
          key: 'title'
          className: css(styles.title)
        }, alertTitle
      ]) if alertTitle?
  
      content.push div {
        key: 'message'
        className: css(styles.message, if alertTitle? then styles.indent)
      }, message
    else if message?
      content.push message
    else
      content.push NoAccess {
        styleOverrides:
          fontSize: '14px'
          background: 'none'
          paddingTop: 10
      }
    
    content.push div {
      key: 'ok'
      className: 'okay-buttons'
    }, [
      button {
        className: 'okay-cancel cancel'
        key: 'cancel'
        onClick: @close
      }, cancelText if cb?
      button {
        className: if cb? then 'okay-cancel okay' else 'okay-cancel just-ok'
        key: 'ok'
        onClick: @confirm
        style: okStyles
      }, okText
    ]

    Modal {
      title: null
      close: @close
      showClose: no
      styleOverride: modalStyles
      draggable: no
    }, content

module.exports = AlertModal