apeman-react-dialog

'use strict'
 
import React from 'react'
 
import ApDialog from '../../lib/ap_dialog'
import ApDialogStyle from '../../lib/ap_dialog_style'
import ApYesnoDialog from '../../lib/ap_yesno_dialog'
import ApYesnoDialogStyle from '../../lib/ap_yesno_dialog_style'
import ApConfirmDialog from '../../lib/ap_confirm_dialog'
import ApConfirmDialogStyle from '../../lib/ap_confirm_dialog_style'
import {ApButton, ApButtonStyle} from 'apeman-react-button'
import {ApSpinnerStyle} from 'apeman-react-spinner'
import {ApCheckboxStyle} from 'apeman-react-checkbox'
 
const Demo = React.createClass({
  getInitialState () {
    return {
      dialog: false,
      yesnoDialog: false,
      confirmDialog: false,
      confirmDialogSpinning: false
    }
  },
  render () {
    const s = this
    let state = s.state
    return (
      <div>
        <ApSpinnerStyle />
        <ApButtonStyle highlightColor='#b35600'/>
        <ApCheckboxStyle highlightColor='#b35600'/>
        <ApDialogStyle highlightColor='#b35600'/>
        <ApYesnoDialogStyle highlightColor='#b35600'/>
        <ApConfirmDialogStyle highlightColor='#b35600'/>
 
        <div style={ {textAlign: 'center', padding: 8} }>
          <ApButton onTap={ () => { s.toggleDialog(true) } }>Show dialog</ApButton>
          <ApButton onTap={ () => { s.toggleYesnoDialog(true) } }>Show yes/no dialog</ApButton>
          <ApButton onTap={ () => { s.toggleConfirmDialog(true) } }>Show confirm dialog</ApButton>
        </div>
        <ApDialog present={ state.dialog }
                  onClose={ () => s.toggleDialog(false) }
                  title='Hey'>
          <div>
            Scroll me!
            <div style={ {height: 300} }></div>
            There you are.
          </div>
        </ApDialog>
        <ApYesnoDialog present={ state.yesnoDialog }
                       onClose={ () => s.toggleYesnoDialog(false) }
                       onYes={ () => { s.toggleYesnoDialog(false) } }
                       onNo={ () => { s.toggleYesnoDialog(false) } }
                       title="Hey, yes-no">
          <div>
            Scroll me!
            <div style={ {height:300} }></div>
            There you are.
          </div>
        </ApYesnoDialog>
        <ApConfirmDialog present={ state.confirmDialog }
                         spinning={ state.confirmDialogSpinning }
                         checkboxText="I'm sure to do that."
                         onClose={ () => s.toggleConfirmDialog(false) }
                         onSubmit={ () => s.toggleConfirmDialog(false) }
                         onCancel={ () => s.toggleConfirmDialog(false) }
                         title="Make sure">
        </ApConfirmDialog>
      </div>
    )
  },
  toggleDialog (enabled) {
    const s = this
    s.setState({
      dialog: enabled
    })
  },
  toggleYesnoDialog (enabled) {
    const s = this
    s.setState({
      yesnoDialog: enabled
    })
  },
  toggleConfirmDialog (enabled) {
    const s = this
    s.setState({ confirmDialogSpinning: !enabled })
    setTimeout(() => {
      s.setState({ confirmDialog: enabled })
    }, enabled ? 0 : 1000)
  }
})
 
export default Demo