fixing onChange and proptypes

.storybook/__snapshots__/Storyshots.test.js.snap

@@ -10,7 +10,7 @@ exports[`Storyshots CheckBox basic usage 1`] = `
     disabled={false}
     id="asInput1"
     name="checkbox"
-    onClick={[Function]}
+    onChange={[Function]}
     type="checkbox"
   />
   <label
@@ -31,7 +31,7 @@ exports[`Storyshots CheckBox call a function 1`] = `
     disabled={false}
     id="asInput7"
     name="checkbox"
-    onClick={[Function]}
+    onChange={[Function]}
     type="checkbox"
   />
   <label
@@ -52,7 +52,7 @@ exports[`Storyshots CheckBox default checked 1`] = `
     disabled={false}
     id="asInput5"
     name="checkbox"
-    onClick={[Function]}
+    onChange={[Function]}
     type="checkbox"
   />
   <label
@@ -73,7 +73,7 @@ exports[`Storyshots CheckBox disabled 1`] = `
     disabled={true}
     id="asInput3"
     name="checkbox"
-    onClick={[Function]}
+    onChange={[Function]}
     type="checkbox"
   />
   <label

src/CheckBox/CheckBox.stories.jsx

@@ -32,6 +32,6 @@ storiesOf('CheckBox', module)
     <CheckBox
       name="checkbox"
       label="check out the console"
-      onChangeState={() => console.log('the checkbox changed state')}
+      onChange={() => console.log('the checkbox changed state')}
     />
   ));

src/CheckBox/CheckBox.test.jsx

@@ -28,11 +28,11 @@ describe('<CheckBox />', () => {
 
     expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
 
-    wrapper.find('[type="checkbox"]').simulate('click');
+    wrapper.find('[type="checkbox"]').simulate('change');
     expect(wrapper.find('[aria-checked=false]').exists()).toEqual(false);
     expect(wrapper.find('[aria-checked=true]').exists()).toEqual(true);
 
-    wrapper.find('[type="checkbox"]').simulate('click');
+    wrapper.find('[type="checkbox"]').simulate('change');
     expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
     expect(wrapper.find('[aria-checked=true]').exists()).toEqual(false);
   });
@@ -43,12 +43,12 @@ describe('<CheckBox />', () => {
       <CheckBox
         name="checkbox"
         label="check me out!"
-        onChangeState={spy}
+        onChange={spy}
       />,
     );
 
     expect(spy).toHaveBeenCalledTimes(0);
-    wrapper.find('input').simulate('click');
+    wrapper.find('input').simulate('change');
     expect(spy).toHaveBeenCalledTimes(1);
   });
 
@@ -64,7 +64,7 @@ describe('<CheckBox />', () => {
     expect(wrapper.find('[defaultChecked=true]').exists()).toEqual(true);
     expect(wrapper.find('[aria-checked=true]').exists()).toEqual(true);
 
-    wrapper.find('input').simulate('click');
+    wrapper.find('input').simulate('change');
     expect(wrapper.find('[defaultChecked=false]').exists()).toEqual(true);
     expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
   });
@@ -78,11 +78,9 @@ describe('<CheckBox />', () => {
       />,
     );
 
-    expect(wrapper.find('[defaultChecked=false]').exists()).toEqual(true);
-    expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
+    expect(wrapper.props().disabled).toEqual(true);
 
-    wrapper.find('input').simulate('click');
-    expect(wrapper.find('[defaultChecked=false]').exists()).toEqual(true);
-    expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
+    wrapper.find('input').simulate('change');
+    expect(wrapper.props().disabled).toEqual(true);
   });
 });

src/CheckBox/index.jsx

 import React from 'react';
+import PropTypes from 'prop-types';
 
-import asInput, { inputProps } from '../asInput';
+import asInput from '../asInput';
 import newId from '../utils/newId';
 
 class Check extends React.Component {
   constructor(props) {
     super(props);
 
-    this.handleClick = this.handleClick.bind(this);
-    if (this.props.onChangeState) {
-      this.onChangeState = this.props.onChangeState.bind(this);
-    }
+    this.onChange = this.onChange.bind(this);
 
     const id = newId('checkbox');
     this.state = {
@@ -19,13 +17,11 @@ class Check extends React.Component {
     };
   }
 
-  handleClick() {
+  onChange(event) {
     this.setState({
       checked: !this.state.checked,
     });
-    if (this.onChangeState) {
-      this.onChangeState();
-    }
+    this.props.onChange(event);
   }
 
 
@@ -39,18 +35,27 @@ class Check extends React.Component {
         name={props.name}
         defaultChecked={this.state.checked}
         aria-checked={this.state.checked}
-        onClick={this.handleClick}
+        onChange={this.onChange}
         disabled={props.disabled}
       />
     );
   }
 }
 
-Check.propTypes = inputProps;
+Check.propTypes = {
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+Check.defaultProps = {
+  checked: false,
+  onChange: () => {},
+};
 
 const CheckBox = asInput(Check, false);
 
 CheckBox.propTypes = {
+  ...CheckBox.propTypes,
   ...Check.propTypes,
 };