UNPKG

2.23 kBJSXView Raw
1/**
2 * Checkbox component.
3 * @class ApCheckbox
4 */
5
6'use strict'
7
8import React, {Component, PropTypes as types} from 'react'
9import classnames from 'classnames'
10import uuid from 'uuid'
11import ApCheckbox from './ap_checkbox'
12
13/** @lends ApCheckboxGroup */
14class ApCheckboxGroup extends Component {
15 constructor (props) {
16 super(props)
17 const s = this
18 s.uuid = uuid.v4()
19 }
20
21 render () {
22 const s = this
23 let { props } = s
24
25 let {
26 prefix = s.uuid,
27 name,
28 options,
29 checked,
30 icon,
31 checkedIcon
32 } = props
33
34 return (
35 <div className={ classnames('ap-checkbox-group', props.className) }>
36 {
37 Object.keys(options || {}).map((value) => (
38 <ApCheckbox key={ value }
39 name={ name }
40 value={ value }
41 id={ `${prefix}-${value}`}
42 checked={ !!checked[ value ] }
43 title={ options[ value ] }
44 icon={ icon }
45 checkedIcon={ checkedIcon }
46 onChange={ s.handleChange }
47 />
48 ))
49 }
50 </div>
51 )
52 }
53
54 // --------------------
55 // Handle
56 // --------------------
57
58 handleChange (e) {
59 const s = this
60 let { props } = s
61 if (props.onChange) {
62 props.onChange(e)
63 }
64 }
65}
66
67Object.assign(ApCheckboxGroup, {
68 // --------------------
69 // Specs
70 // --------------------
71
72 propTypes: {
73 /** Document id prefix */
74 prefix: types.string,
75 /** Name of checkbox input */
76 name: types.string.isRequired,
77 /** Value and label titles */
78 options: types.object.isRequired,
79 /** Checked state for each values */
80 checked: types.object.isRequired,
81 /** Handle for change event */
82 onChange: types.func,
83 /** Icon class name for normal state */
84 icon: types.string,
85 /** Icon class name for checked state */
86 checkedIcon: types.string
87 },
88
89 defaultProps: {
90 prefix: null,
91 name: null,
92 title: '',
93 checked: {},
94 options: {},
95 onChange: null,
96 icon: ApCheckbox.DEFAULT_ICON,
97 checkedIcon: ApCheckbox.DEFAULT_CHECKED_ICON
98 }
99
100})
101
102export default ApCheckboxGroup
103