Wrap Bootstrap Modal dialog into React component

modal.coffee

define ["jquery", "react"], ($, React) ->

  {div, button, a, p, span} = React.DOM

  ModalHeader = React.createClass
    render: ->
      (div {className: "modal-header"}, [
        (button { type: "button", className: "close", "data-dismiss": "modal"}, [
          (span { "aria-hidden": "true"}, "×")
          (span { className: "sr-only"}, "关闭")
        ])
      ])

  ModalBody = React.createClass
    render: ->
      (div { className: "modal-body"}, [@props.children])

  ModalFooter = React.createClass
    render: ->
      (div { className: "modal-footer"}, [@props.children])

  ModalDialogSkeleton = React.createClass
    componentDidMount: ->
      $(@refs.thisIsTheModalDialog.getDOMNode()).on "hidden.bs.modal", (event) =>
        if @props.onDismissed then @props.onDismissed()

    componentDidUnmount: ->
      $(@refs.thisIsTheModalDialog.getDOMNode).off "hidden.bs.modal"
    
    render: ->
      (div { 
          ref: "thisIsTheModalDialog"
          className: "modal fade"
          tabIndex: "-1"
          role: "dialog"
          id: @props.modalId
          "aria-hidden": "true"}, [
        (div { className: "modal-dialog" }, [
          (div { className: "modal-content"}, [@props.children])
        ])
      ])

  ConfirmModalDialog = React.createClass
    getDefaultProps: ->
      props = 
        modalId : "please-change-this-modal-id"

    render: ->
      @transferPropsTo(
        (ModalDialogSkeleton {}, [
          (ModalHeader {})
          (ModalBody {}, [@props.children])
          (ModalFooter {}, [
            (button { type: "button", className: "btn btn-primary", "data-dismiss": "modal"}, "确定")
          ])
        ])
      )

  ShareModalDialog = React.createClass
    getDefaultProps: ->
      props =
        modalId: "please-change-this-modal-id"
        shareLink: "/"

    render: ->
      @transferPropsTo(
        (ModalDialogSkeleton {}, [
          (ModalHeader {})
          (ModalBody {}, [@props.children])
          (ModalFooter {}, [
            (a { href: @props.shareLink, className: "btn btn-primary"}, "分享")
          ])
        ])
      )

  modules = 
    ShareModalDialog: ShareModalDialog
    ConfirmModalDialog: ConfirmModalDialog