apeman-react-checkbox

'use strict'
 
import React from 'react'
import ApCheckbox from '../../lib/ap_checkbox'
import ApCheckboxStyle from '../../lib/ap_checkbox_style'
import ApCheckboxGroup from '../../lib/ap_checkbox_group'
 
export default React.createClass({
  getInitialState () {
    return {
      foo: {
        foo01: true,
        foo02: false
      },
      bar: {
        bar01: true,
        bar02: false
      }
    }
  },
  render () {
    const s = this
    let { state } = s
    return (
      <div>
        <ApCheckboxStyle highlightColor="#b35600"/>
        <div>
          <ApCheckbox onChange={ s._handleChange }
                      name="foo"
                      id="foo-02"
                      checked={ state.foo.foo01 }
                      title="This is foo 01"
                      value={ "foo01" }/>
          <ApCheckbox onChange={ s._handleChange }
                      name="foo"
                      id="foo-01"
                      checked={ state.foo.foo02 }
                      title="This is foo 02"
                      value={ "foo02" }/>
        </div>
        <div>
          <ApCheckboxGroup id="bar"
                           name="bar"
                           onChange={ s._handleChange }
                           options={
                            {
                              bar01: 'This is bar 01',
                              bar02: 'This is bar 02'
                            }
                           }
                           checked={ state.bar }
          />
        </div>
      </div>
    )
  },
 
  _handleChange (e) {
    const s = this
    let { state } = s
    let { name, value } = e.target
    s.setState({
      [name]: Object.assign(state[ name ], {
        [value]: !state[ name ][ value ]
      })
    })
  }
 
})