fix: refine toggle component (#319)

Author: jbadan

package.json

@@ -40,11 +40,11 @@
     "react-syntax-highlighter": "^9.0.1"
   },
   "devDependencies": {
-    "annotated-prop-types": "^0.3.0",
     "@babel/cli": "^7.1.5",
     "@babel/core": "7.1.0",
     "@babel/polyfill": "^7.1.5",
     "@svgr/webpack": "2.4.1",
+    "annotated-prop-types": "^0.3.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
     "babel-jest": "23.6.0",

src/Toggle/Toggle.js

@@ -6,15 +6,19 @@ import {TOGGLE_SIZES} from '../utils/constants';
 export class Toggle extends React.Component {
     constructor(props) {
         super(props);
-        this.state = { checked: props.checked };
+        this.state = { checked: props.checked ? props.checked : false };
     }
 
-    handleChange = () => {
-        this.setState({ checked: !this.state.checked });
-    };
+    handleChange = (e) => {
+        this.setState({
+            checked: !this.state.checked
+        }, () => {
+            this.props.onChange(e);
+        });
+    }
 
     render() {
-        const { size, id, disabled, children, className, labelProps, inputProps, ...rest } = this.props;
+        const { size, id, checked, disabled, children, className, labelProps, inputProps, onChange, ...rest } = this.props;
 
         const toggleClasses = classnames(
             'fd-form__item',
@@ -58,10 +62,20 @@ export class Toggle extends React.Component {
 }
 
 Toggle.propTypes = {
+    checked: PropTypes.bool,
     className: PropTypes.string,
     disabled: PropTypes.bool,
     id: PropTypes.string,
     inputProps: PropTypes.object,
     labelProps: PropTypes.object,
-    size: PropTypes.oneOf(TOGGLE_SIZES)
+    size: PropTypes.oneOf(TOGGLE_SIZES),
+    onChange: PropTypes.func
+};
+
+Toggle.defaultProps = {
+    onChange: () => {}
+};
+
+Toggle.propDescriptions = {
+    checked: 'Set to true for component to be checked on render.'
 };

src/Toggle/Toggle.test.js

@@ -53,6 +53,30 @@ describe('<Toggle />', () => {
         expect(wrapper.state(['checked'])).toBeTruthy();
     });
 
+    describe('Toggle default rendering', () => {
+        test('should default to a not checked state', () => {
+            const element = mount(<Toggle />);
+
+            expect(element.state(['checked'])).toBe(false);
+        });
+        test('should have truthy checked state when passed checked prop', () => {
+            const element = mount(<Toggle checked />);
+
+            expect(element.state(['checked'])).toBe(true);
+        });
+    });
+
+    describe('onChange handler', () => {
+        test('should dispatch the onChange callback with the event', () => {
+            let f = jest.fn();
+            const element = mount(<Toggle data-sample='Sample' onChange={f} />);
+
+            element.find('input[type="checkbox"]').simulate('change');
+
+            expect(f).toHaveBeenCalledTimes(1);
+        });
+    });
+
     describe('Prop spreading', () => {
         test('should allow props to be spread to the Toggle component', () => {
             const element = mount(<Toggle data-sample='Sample' />);

src/Toggle/__snapshots__/Toggle.test.js.snap

@@ -11,6 +11,7 @@ exports[`<Toggle /> create toggle component 1`] = `
       className="fd-toggle fd-form__control"
     >
       <input
+        checked={false}
         onChange={[Function]}
         type="checkbox"
       />
@@ -26,7 +27,6 @@ exports[`<Toggle /> create toggle component 1`] = `
 
 exports[`<Toggle /> create toggle component 2`] = `
 <div
-  checked={true}
   className="fd-form__item fd-form__item--check blue"
 >
   <label
@@ -61,6 +61,7 @@ exports[`<Toggle /> create toggle component 3`] = `
       className="fd-toggle fd-form__control"
     >
       <input
+        checked={false}
         disabled={true}
         onChange={[Function]}
         type="checkbox"
@@ -77,7 +78,6 @@ exports[`<Toggle /> create toggle component 3`] = `
 
 exports[`<Toggle /> create toggle component 4`] = `
 <div
-  checked={true}
   className="fd-form__item fd-form__item--check"
 >
   <label