apeman-react-sign/lib/ap_signmod_form.jsx

apeman react package for sign components

/**
 * Form for signmod
 * @class ApSignmodForm
 */

'use strict'

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

import { ApForm, withForm } from 'apeman-react-form'
import { ApFieldSet, ApField, ApFieldLabel, ApFieldValue } from 'apeman-react-field'
import { ApButton, ApCellButton, ApCellButtonRow, ApIconButton, ApIconButtonRow } from 'apeman-react-button'
import { ApText } from 'apeman-react-text'
import { ApPassword } from 'apeman-react-password'

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

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

  propTypes: {
    email: types.bool,
    password: types.bool
  },

  mixins: [],

  statics: {},

  getInitialState () {
    return {}
  },

  getDefaultProps () {
    return {
      labels: {
        email: 'Email',
        password: 'Password',
        submit: 'Update'
      },
      email: true,
      password: true
    }
  },

  render () {
    const s = this
    let { props } = s
    let {
      id,
      idOf,
      labels,
      values,
      onUpdate,
      onSubmit,
      spinning,
      errorList,
      errorStyle,
      centered
    } = props
    return (
      <ApForm id={ id }
              spinning={ spinning }
              centered={ centered }
              className={ classnames('ap-signin-form', props.className)}
              style={ Object.assign({}, props.style) }
      >
        <ApFieldSet plain>
          { errorList }
          { errorStyle }
          { props.email ? s.renderEmailField() : null }
          { props.password ? s.renderPasswordField() : null }
        </ApFieldSet>
        <ApFieldSet plain>
          {
            <ApField center className='ap-signmod-form-button-field'>
              <ApButton id={ idOf('submit') }
                        onTap={ () => onSubmit(s.props.values) }
                        wide
                        primary
              >
                { labels[ 'submit' ] }
              </ApButton>
            </ApField>
          }
        </ApFieldSet>
      </ApForm >
    )
  },

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

  // ------------------
  // Custom
  // ------------------

  renderEmailField () {
    const name = 'email'
    const s = this
    let { props } = s
    let {
      idOf,
      labels,
      values,
      onUpdate
    } = props

    return (
      <ApField className='ap-signmod-form-email-field'>
        <ApFieldLabel htmlFor={ idOf(name) }>
          { labels[ name ] }
        </ApFieldLabel>
        <ApFieldValue>
          <ApText id={ idOf(name) }
                  name={ name }
                  value={ values[ name ] }
                  onChange={ (e) => onUpdate({ [name]: e.target.value }) }
          />
        </ApFieldValue>
      </ApField>
    )
  },

  renderPasswordField () {
    const name = 'password'
    const s = this
    let { props } = s
    let {
      idOf,
      labels,
      values,
      onUpdate
    } = props

    return (
      <ApField>
        <ApFieldLabel htmlFor={ idOf(name) }>
          { labels[ name ] }
        </ApFieldLabel>
        <ApFieldValue>
          <ApPassword id={ idOf(name) }
                      value={ values[ name ] }
                      name={ name }
                      onChange={ (e) => onUpdate({ [name]: e.target.value }) }
          />
        </ApFieldValue>
      </ApField>
    )
  }

})

export { ApSignmodForm }
export default withForm(ApSignmodForm)