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 {ApIcon} from 'apeman-react-icon'
|
11 |
|
12 | const DEFAULT_ICON = 'ion ion-android-checkbox-outline-blank'
|
13 | const DEFAULT_CHECKED_ICON = 'ion ion-android-checkbox'
|
14 |
|
15 |
|
16 | class ApCheckbox extends Component {
|
17 | render () {
|
18 | const s = this
|
19 | let { props } = s
|
20 |
|
21 | let {
|
22 | id,
|
23 | name,
|
24 | value,
|
25 | checked,
|
26 | onChange
|
27 | } = props
|
28 |
|
29 | let iconClass = {
|
30 | 'ap-checkbox-icon-checked': checked,
|
31 | [ props.checkedIcon ]: checked,
|
32 | [ props.icon ]: !checked
|
33 | }
|
34 |
|
35 | let className = classnames('ap-checkbox', props.className, {
|
36 | 'ap-checkbox-checked': checked
|
37 | })
|
38 | return (
|
39 | <label className={ className }
|
40 | htmlFor={ id }
|
41 | id={`${id}-wrap`}>
|
42 | <ApIcon className={ classnames('ap-checkbox-icon', iconClass) }/>
|
43 | <input type='checkbox'
|
44 | className={ classnames('ap-checkbox-input') }
|
45 | id={ id }
|
46 | name={ name }
|
47 | value={ value }
|
48 | checked={ checked }
|
49 | onChange={ onChange }/>
|
50 | <span className={ classnames('ap-checkbox-title') }>{ props.title }</span>
|
51 | </label>
|
52 | )
|
53 | }
|
54 | }
|
55 |
|
56 | Object.assign(ApCheckbox, {
|
57 |
|
58 |
|
59 |
|
60 |
|
61 | propTypes: {
|
62 |
|
63 | id: types.string.isRequired,
|
64 |
|
65 | name: types.string.isRequired,
|
66 |
|
67 | value: types.string.isRequired,
|
68 |
|
69 | title: types.string,
|
70 |
|
71 | checked: types.bool,
|
72 |
|
73 | onChange: types.func,
|
74 |
|
75 | icon: types.string,
|
76 |
|
77 | checkedIcon: types.string
|
78 | },
|
79 |
|
80 | defaultProps: {
|
81 | id: null,
|
82 | name: null,
|
83 | value: '',
|
84 | title: '',
|
85 | checked: false,
|
86 | onChange: null,
|
87 | icon: DEFAULT_ICON,
|
88 | checkedIcon: DEFAULT_CHECKED_ICON
|
89 | },
|
90 |
|
91 | DEFAULT_ICON,
|
92 | DEFAULT_CHECKED_ICON
|
93 |
|
94 | })
|
95 |
|
96 | export default ApCheckbox
|