1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | 'use strict'
|
7 |
|
8 | import React, {Component, PropTypes as types} from 'react'
|
9 | import classnames from 'classnames'
|
10 | import uuid from 'uuid'
|
11 | import ApCheckbox from './ap_checkbox'
|
12 |
|
13 |
|
14 | class 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 |
|
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 |
|
67 | Object.assign(ApCheckboxGroup, {
|
68 |
|
69 |
|
70 |
|
71 |
|
72 | propTypes: {
|
73 |
|
74 | prefix: types.string,
|
75 |
|
76 | name: types.string.isRequired,
|
77 |
|
78 | options: types.object.isRequired,
|
79 |
|
80 | checked: types.object.isRequired,
|
81 |
|
82 | onChange: types.func,
|
83 |
|
84 | icon: types.string,
|
85 |
|
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 |
|
102 | export default ApCheckboxGroup
|
103 |
|