apeman-react-dialog/lib/ap_yesno_dialog.jsx

apeman react package for dialog component.

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

'use strict'

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

/** @lends ApYesnoDialog */
class ApYesnoDialog extends Component {
  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">
          <ApYesnoDialog.Button text={ props.noText } onTap={ props.onNo }/>
          <ApYesnoDialog.Button text={ props.yesText } onTap={ props.onYes }/>
        </div>
      </ApDialog>
    )
  }
}

Object.assign(ApYesnoDialog, {
  // --------------------
  // 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
  },

  defaultProps: {
    present: false,
    onYes: null,
    onNo: null,
    title: null,
    yesText: 'Yes',
    noText: 'No'
  },

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

export default ApYesnoDialog