@@ -33,9 +33,9 @@ const defaultProps = {
3333 outline : false ,
3434 size : '' ,
3535 checked : false ,
36- defaultChecked : false ,
37- disabled : false ,
38- required : false ,
36+ defaultChecked : undefined ,
37+ disabled : undefined ,
38+ required : undefined ,
3939 type : 'checkbox' ,
4040 variant : '' ,
4141 dataOn : 'On' ,
@@ -45,35 +45,54 @@ const defaultProps = {
4545class AppSwitch extends Component {
4646 constructor ( props ) {
4747 super ( props ) ;
48- this . onChange = this . onChange . bind ( this ) ;
48+ this . handleChange = this . handleChange . bind ( this ) ;
49+ this . handleKeyDown = this . handleKeyDown . bind ( this ) ;
50+ this . handleKeyUp = this . handleKeyUp . bind ( this ) ;
4951 this . state = {
52+ uncontrolled : ! ! this . props . defaultChecked ,
5053 checked : this . props . defaultChecked || this . props . checked ,
5154 selected : [ ]
5255 } ;
5356 }
5457
55- onChange ( event ) {
56- const target = event . target ;
58+ toggleState ( check ) {
5759 this . setState ( {
58- checked : target . checked ,
60+ checked : check
5961 } )
62+ }
63+
64+ handleChange ( event ) {
65+ const target = event . target ;
66+ this . toggleState ( target . checked )
6067
6168 if ( this . props . onChange ) {
6269 this . props . onChange ( event ) ;
6370 }
6471 }
6572
66- componentDidUpdate ( prevProps ) {
67- if ( this . props . checked !== prevProps . checked ) {
68- this . setState ( {
69- checked : this . props . checked
70- } )
73+ handleKeyDown ( event ) {
74+ if ( event . key === ' ' ) {
75+ event . preventDefault ( ) ;
76+ }
77+ }
78+
79+ handleKeyUp ( event ) {
80+ if ( event . key === 'Enter' || event . key === ' ' ) {
81+ this . toggleState ( ! this . state . checked ) ;
82+ }
83+ }
84+
85+ componentDidUpdate ( prevProps , prevState ) {
86+ if ( ! this . state . uncontrolled && ( this . props . checked !== prevState . checked ) ) {
87+ this . toggleState ( this . props . checked )
7188 }
7289 }
7390
7491 render ( ) {
7592 const { className, disabled, color, name, label, outline, size, required, type, value, dataOn, dataOff, variant, ...attributes } = this . props ;
7693
94+ const tabindex = attributes . tabIndex
95+ delete attributes . tabIndex
7796 delete attributes . checked
7897 delete attributes . defaultChecked
7998 delete attributes . onChange
@@ -98,8 +117,19 @@ class AppSwitch extends Component {
98117 ) ;
99118
100119 return (
101- < label className = { classes } >
102- < input type = { type } className = { inputClasses } onChange = { this . onChange } checked = { this . state . checked } name = { name } required = { required } disabled = { disabled } value = { value } { ...attributes } />
120+ < label className = { classes } tabIndex = { tabindex } onKeyUp = { this . handleKeyUp } onKeyDown = { this . handleKeyDown } >
121+ < input type = { type }
122+ className = { inputClasses }
123+ onChange = { this . handleChange }
124+ checked = { this . state . checked }
125+ name = { name }
126+ required = { required }
127+ disabled = { disabled }
128+ value = { value }
129+ aria-checked = { this . state . checked }
130+ aria-disabled = { disabled }
131+ aria-readonly = { disabled }
132+ { ...attributes } />
103133 < span className = { sliderClasses } data-checked = { dataOn } data-unchecked = { dataOff } > </ span >
104134 </ label >
105135 ) ;
0 commit comments