apeman-react-dialog/lib/ap_yesno_dialog.jsx

/**
 * Yes/No dialog.
 * @constructor ApYesnoDialog
 */

'use strict'

import React, {PropTypes as types} from 'react'
import classnames from 'classnames'
import {ApTouchable} from 'apeman-react-touchable'
import ApDialog from './ap_dialog'

/** @lends ApYesnoDialog */
let ApYesnoDialog = React.createClass({

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

  propTypes: {
    present: types.bool.isRequired,
    /** Handler for tapping YES */
    onYes: types.func,
    /** Handler for tapping NO */
    onNo: types.func,
    /** Dialog title */
    title: types.string,
    /** Text of YES button */
    yesText: types.string,
    /** Text of NO button */
    noText: types.string
  },

  mixins: [],

  statics: {},

  getInitialState () {
    return {}
  },

  getDefaultProps () {
    return {
      present: false,
      onYes: null,
      onNo: null,
      title: null,
      yesText: 'Yes',
      noText: 'No'
    }
  },

  render () {
    const s = this
    let { props } = s
    if (!props.present) {
      return null;
    }
    return (
      <ApDialog className={ classnames('ap-yesno-dialog', props.className) }
                style={ Object.assign({}, props.style) }
        { ...props }
      >
        <div>{ props.children }</div>
        <div className="ap-yesno-dialog-control">
          { s._renderYesnoButton(props.noText, s.handleNo) }
          { s._renderYesnoButton(props.yesText, s.handleYes) }
        </div>
      </ApDialog>
    )
  },

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

  handleYes(e) {
    const s = this,
      {props} = s;
    if (props.onYes) {
      props.onYes(e)
    }
  },

  handleNo(e) {
    const s = this,
      {props} = s;
    if (props.onNo) {
      props.onNo(e)
    }
  },

  // ------------------
  // Private
  // ------------------
  _renderYesnoButton(text, callback) {
    const s = this
    return (
      <a className="ap-yesno-dialog-button">
        <ApTouchable onTap={ callback }>
          <span className="ap-yesno-dialog-button-text">{ text }</span>
        </ApTouchable>
      </a>
    )
  }

})

module.exports = ApYesnoDialog;