apeman-react-dialog/lib/ap_confirm_dialog.jsx

apeman react package for dialog component.

/**
 * Dialog to confirm.
 * @class ApConfirmDialog
 */

'use strict'

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

import {ApCheckbox} from 'apeman-react-checkbox'
import {ApButton} from 'apeman-react-button'
import ApDialog from './ap_dialog'
import uuid from 'uuid'

/** lends ApConfirmDialog */
const ApConfirmDialog = React.createClass({

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

  propTypes: {
    present: types.bool.isRequired,
    /** Handler for submit event */
    onSubmit: types.func,
    /** Handler for cancel event */
    onCancel: types.func,
    /** Dialog title */
    title: types.string,
    /** Dialog message */
    message: types.string,
    /** Id of checkbox */
    checkboxId: types.string,
    /** Name of checkbox */
    checkboxName: types.string,
    /** Label text of checkbox */
    checkboxText: types.string,
    /** Errot text when not checked */
    errorText: types.string,
    /** Submit button text */
    submitText: types.string
  },

  mixins: [
  ],

  statics: {},

  getInitialState () {
    return {
      checked: false,
      errored: false
    }
  },

  getDefaultProps () {
    let id = uuid.v4().replace(/\-/g, '')
    return {
      onSubmit: null,
      onCancel: null,
      checkboxId: `ap-confirm-dialog-checkbox-${id}`,
      checkboxName: `ap-confirm-check-${id}`,
      checkboxText: null,
      submitText: 'submit',
      errorText: 'Needs check before submit.',
      message: 'Once destroyed, there is no going back. Please be certain.'
    }
  },

  render () {
    const s = this
    let { state, props } = s
    if (!props.present) {
      return null
    }
    return (
      <ApDialog className={ classnames('ap-confirm-dialog', props.className) }
                style={ Object.assign({}, props.style) }
                onClose={ s.handleCancel }
                { ...props }
      >
        <p className="ap-confirm-dialog-message">
          { props.message }
        </p>
        <div>{ props.children }</div>
        <div className="ap-confirm-dialog-control">
          { s.renderError(state.errored) }
          { s.renderCheckbox(state.checked) }
          { s.renderSubmitButton(state.checked) }
        </div>
      </ApDialog>
    )
  },

  toggleCheckbox () {
    const s = this
    let state = s.state
    s.setState({
      checked: !state.checked,
      errored: false
    })
  },

  handleSubmit (e) {
    const s = this
    let { state, props } = s
    if (!state.checked) {
      s.setState({
        errored: true
      })
      return
    }
    s.setState({
      errored: false
    })
    if (props.onSubmit) {
      props.onSubmit(e)
    }
  },

  handleCancel (e) {
    const s = this
    let { props } = s
    s.setState({ errored: false })
    if (props.onCancel) {
      props.onCancel(e)
    }
  },

  // ------------------
  // Private
  // ------------------
  renderError(errored) {
    const s = this
    let { props } = s
    if (!errored) {
      return null
    }
    return (
      <div className="ap-confirm-dialog-err">
        <span>{ props.errorText }</span>
      </div>
    )
  },
  renderCheckbox (checked) {
    const s = this
    let { props } = s
    return (
      <div>
        <ApCheckbox className="ap-confirm-dialog-checkbox"
                    checked={ checked }
                    name={ props.checkboxName }
                    id={ props.checkboxId }
                    title={ props.checkboxText }
                    onChange={ s.toggleCheckbox }
                    value="YES"

        />
      </div>
    )
  },
  renderSubmitButton (checked) {
    const s = this
    let { props } = s
    return (
      <ApButton onTap={ s.handleSubmit }
                disabled={ false }
                primary={ true }
                className={ classnames('ap-confirm-dialog-button', {
                  'ap-confirm-dialog-button-disabled': !checked
                }) }>
        <span className="ap-confirm-dialog-button-text">{ props.submitText }</span>
      </ApButton>
    )
  }

})

export default ApConfirmDialog