@@ -5,20 +5,23 @@ import classNames from 'classnames';
5
5
const propTypes = {
6
6
color : PropTypes . string ,
7
7
label : PropTypes . bool ,
8
- outline : PropTypes . bool ,
9
- outlineAlt : PropTypes . bool ,
10
- pill : PropTypes . bool ,
11
- size : PropTypes . string ,
8
+ outline : PropTypes . oneOfType ( [
9
+ PropTypes . bool ,
10
+ PropTypes . string ,
11
+ PropTypes . oneOf ( [ '' , 'alt' ] )
12
+ ] ) ,
13
+ size : PropTypes . oneOf ( [ '' , 'lg' , 'sm' ] ) ,
12
14
checked : PropTypes . bool ,
13
15
defaultChecked : PropTypes . bool ,
14
16
defaultValue : PropTypes . any ,
17
+ value : PropTypes . string ,
15
18
disabled : PropTypes . bool ,
16
19
form : PropTypes . any ,
17
- indeterminate : PropTypes . any ,
18
20
name : PropTypes . string ,
19
21
required : PropTypes . bool ,
20
- type : PropTypes . string ,
21
- value : PropTypes . string ,
22
+ onChange : PropTypes . func ,
23
+ type : PropTypes . oneOf ( [ 'checkbox' , 'radio' ] ) ,
24
+ variant : PropTypes . oneOf ( [ '' , '3d' , 'pill' ] ) ,
22
25
className : PropTypes . string ,
23
26
dataOn : PropTypes . string ,
24
27
dataOff : PropTypes . string ,
@@ -28,48 +31,52 @@ const defaultProps = {
28
31
color : 'secondary' ,
29
32
label : false ,
30
33
outline : false ,
31
- outlineAlt : false ,
32
- pill : false ,
33
34
size : '' ,
34
35
checked : false ,
35
36
defaultChecked : false ,
36
37
disabled : false ,
37
38
required : false ,
38
39
type : 'checkbox' ,
40
+ variant : '' ,
39
41
dataOn : 'On' ,
40
42
dataOff : 'Off' ,
41
43
} ;
42
44
43
45
class AppSwitch extends Component {
44
46
constructor ( props ) {
45
47
super ( props ) ;
46
- this . toggle = this . toggle . bind ( this ) ;
48
+ this . onChange = this . onChange . bind ( this ) ;
47
49
this . state = {
48
50
checked : this . props . defaultChecked || this . props . checked ,
51
+ selected : [ ]
49
52
} ;
50
53
}
51
54
52
- toggle ( event ) {
55
+ onChange ( event ) {
53
56
const target = event . target ;
54
57
this . setState ( {
55
58
checked : target . checked ,
56
- } ) ;
59
+ } )
60
+
61
+ if ( this . props . onChange ) {
62
+ this . props . onChange ( event ) ;
63
+ }
57
64
}
58
65
59
66
render ( ) {
60
- const { className, checked, disabled, color, defaultChecked, name, label, outline, outlineAlt, pill, size, required, type, value, dataOn, dataOff, ...attributes } = this . props ;
61
-
62
- const outlined = outline || outlineAlt ;
67
+ const { className, disabled, color, name, label, outline, size, required, type, value, dataOn, dataOff, variant, ...attributes } = this . props ;
63
68
64
- const variant = `switch${ outlined ? '-outline' : '' } -${ color } ${ outlineAlt ? '-alt' : '' } ` ;
69
+ delete attributes . checked
70
+ delete attributes . defaultChecked
71
+ delete attributes . onChange
65
72
66
73
const classes = classNames (
67
74
className ,
68
75
'switch' ,
69
76
label ? 'switch-label' : false ,
70
- pill ? 'switch-pill' : false ,
71
77
size ? `switch-${ size } ` : false ,
72
- variant ,
78
+ variant ? `switch-${ variant } ` : false ,
79
+ `switch${ outline ? '-outline' : '' } -${ color } ${ outline === 'alt' ? '-alt' : '' } ` ,
73
80
'form-check-label' ,
74
81
) ;
75
82
@@ -84,7 +91,7 @@ class AppSwitch extends Component {
84
91
85
92
return (
86
93
< label className = { classes } >
87
- < input type = { type } className = { inputClasses } onChange = { this . toggle } checked = { this . state . checked } name = { name } required = { required } disabled = { disabled } value = { value } />
94
+ < input type = { type } className = { inputClasses } onChange = { this . onChange } checked = { this . state . checked } name = { name } required = { required } disabled = { disabled } value = { value } { ... attributes } />
88
95
< span className = { sliderClasses } data-checked = { dataOn } data-unchecked = { dataOff } > </ span >
89
96
</ label >
90
97
) ;
0 commit comments