apeman-react-dialog/lib/ap_dialog.jsx

apeman react package for dialog component.

/**
 * Dialog component.
 * @class ApDialog
 */

'use strict'

import React, {PropTypes as types} from 'react'
import classnames from 'classnames'

import {ApTouchable} from 'apeman-react-touchable'
import {ApIcon} from 'apeman-react-icon'
import {ApSpinner} from 'apeman-react-spinner'
import ApDialogHeader from './ap_dialog_header'
import ApDialogBody from './ap_dialog_body'

const DEFAULT_CLOSE_ICON = 'fa fa-close'

/** @lends ApDialog */
const ApDialog = React.createClass({

  // --------------------
  // Specs
  // --------------------

  propTypes: {
    present: types.bool.isRequired,
    onClose: types.func,
    spinning: types.bool,
    spinner: types.string,
    title: types.string,
    closeIcon: types.string
  },

  statics: {
    DEFAULT_CLOSE_ICON
  },

  getInitialState () {
    return {}
  },

  getDefaultProps () {
    return {
      present: false,
      onClose: null,
      spinning: false,
      spinner: ApSpinner.DEFAULT_THEME,
      title: null,
      closeIcon: DEFAULT_CLOSE_ICON
    }
  },

  render () {
    const s = this
    let { props } = s
    if (!props.present) {
      return null
    }
    return (
      <div className={ classnames('ap-dialog', props.className, {
        'ap-dialog-present': props.present
      }) }
           style={ Object.assign({}, props.style) }>
        <ApSpinner theme={ props.spinner }
                   className="ap-dialog-spinner"
                   enabled={ props.spinning }/>
        <div className="ap-dialog-inner">
          { s.renderBack() }
          <div className="ap-dialog-content">
            <ApDialogHeader>
              { s.renderTitle() }
              { s.renderCloseButton() }
            </ApDialogHeader>
            <ApDialogBody>
              { props.children }
            </ApDialogBody>
          </div>
        </div>
      </div>
    )
  },

  // --------------------
  // Lifecycle
  // --------------------

  componentWillMount () {
    const s = this
  },

  componentDidMount () {
    const s = this
    let { props } = s
    s.toggleDocumentScroll(props.present)
  },

  componentWillReceiveProps (nextProps) {
    const s = this

    s.toggleDocumentScroll(nextProps.present)
  },

  shouldComponentUpdate (nextProps, nextState) {
    const s = this
    return true
  },

  componentWillUpdate (nextProps, nextState) {
    const s = this
  },

  componentDidUpdate (prevProps, prevState) {
    const s = this
  },

  componentWillUnmount () {
    const s = this
    s.toggleDocumentScroll(false)
  },

  // ------------------
  // Helper
  // ------------------

  handleClose (e) {
    const s = this
    let { props } = s
    if (props.onClose) {
      props.onClose(e)
    }
  },

  toggleDocumentScroll (enabled) {
    const s = this

    let { body } = document
    if (enabled) {
      body.classList.add('ap-dialog-fix')
    } else {
      body.classList.remove('ap-dialog-fix')
    }
  },

  // ------------------
  // Private
  // ------------------

  renderBack () {
    const s = this
    let { props } = s
    return (
      <div className="ap-dialog-back">
        <ApTouchable onTap={ s.handleClose }>
          <div className="ap-dialog-back-inner"></div>
        </ApTouchable>
      </div>
    )
  },

  renderCloseButton () {
    const s = this
    let { props } = s
    return (
      <a className="ap-dialog-close-button">
        <ApTouchable onTap={ s.handleClose }>
                <span>
                    <ApIcon className={ classnames('ap-dialog-close-button-icon', props.closeIcon) }/>
                </span>
        </ApTouchable>
      </a>
    )
  },

  renderTitle () {
    const s = this
    let { props } = s
    return (
      <h3 className="ap-dialog-title">{ props.title }</h3>
    )
  }
})

export default ApDialog