Pass event

.gitignore

@@ -27,3 +27,4 @@ lib
 es
 yarn.lock
 package-lock.json
+coverage/

.travis.yml

@@ -8,7 +8,7 @@ notifications:
   - afc163@gmail.com
 
 node_js:
-- 6
+- 10
 
 before_install:
 - |
@@ -17,22 +17,15 @@ before_install:
       echo "Only docs were updated, stopping build process."
       exit
     fi
-    npm install npm@3.x -g
-    phantomjs --version
 script:
 - |
     if [ "$TEST_TYPE" = test ]; then
-      npm test
+      npm test -- --coverage && \
+      bash <(curl -s https://codecov.io/bash)
     else
       npm run $TEST_TYPE
     fi
 env:
   matrix:
   - TEST_TYPE=lint
-  - TEST_TYPE=test
-  - TEST_TYPE=coverage
-
-
-matrix:
-  allow_failures:
-  - env: "TEST_TYPE=saucelabs"
+  - TEST_TYPE=test

examples/simple.js

@@ -3,32 +3,37 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Switch from 'rc-switch';
 
-function onChange(value) {
-  console.log(`switch checked: ${value}`); // eslint-disable-line
+function onChange(value, event) {
+  console.log(`switch checked: ${value}`, event); // eslint-disable-line
 }
 
 class Demo extends React.Component {
   state = {
     disabled: false,
-  }
+  };
 
   toggle = () => {
+    const { disabled } = this.state;
     this.setState({
-      disabled: !this.state.disabled,
+      disabled: !disabled,
     });
-  }
+  };
 
   render() {
+    const { disabled } = this.state;
     return (
       <div style={{ margin: 20 }}>
         <Switch
           onChange={onChange}
-          disabled={this.state.disabled}
-          checkedChildren={'开'}
-          unCheckedChildren={'关'}
+          onClick={onChange}
+          disabled={disabled}
+          checkedChildren="开"
+          unCheckedChildren="关"
         />
         <div style={{ marginTop: 20 }}>
-          <button onClick={this.toggle}>toggle disabled</button>
+          <button type="button" onClick={this.toggle}>
+            toggle disabled
+          </button>
         </div>
       </div>
     );

package.json

@@ -34,30 +34,20 @@
     "start": "rc-tools run server",
     "pub": "rc-tools run pub --babel-runtime",
     "lint": "rc-tools run lint",
-    "test": "jest",
+    "test": "rc-tools run test",
     "prepublish": "rc-tools run guard",
-    "coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls"
-  },
-  "jest": {
-    "setupFiles": ["./tests/setup.js"],
-    "collectCoverageFrom": [
-      "src/**/*"
-    ],
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ],
-    "transform": {
-      "\\.jsx?$": "./node_modules/rc-tools/scripts/jestPreprocessor.js"
-    }
+    "coverage": "rc-tools run test --coverage",
+    "pre-commit": "rc-tools run pre-commit",
+    "lint-staged": "lint-staged"
   },
   "devDependencies": {
     "coveralls": "^2.11.15",
     "enzyme": "^3.0.0",
     "enzyme-adapter-react-16": "^1.0.1",
     "enzyme-to-json": "^3.0.0",
-    "jest": "^19.0.2",
+    "lint-staged": "^8.1.0",
     "pre-commit": "1.x",
-    "rc-tools": "6.x",
+    "rc-tools": "^9.3.4",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-test-renderer": "^16.0.0"
@@ -67,11 +57,17 @@
     "react-dom": "^16.0.0"
   },
   "pre-commit": [
-    "lint"
+    "lint-staged"
   ],
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "npm run pre-commit",
+      "git add"
+    ]
+  },
   "dependencies": {
-    "babel-runtime": "^6.23.0",
     "classnames": "^2.2.1",
-    "prop-types": "^15.5.6"
+    "prop-types": "^15.5.6",
+    "react-lifecycles-compat": "^3.0.4"
   }
 }

src/Switch.jsx

@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-const classNames = require('classnames');
+import { polyfill } from 'react-lifecycles-compat';
 
-function noop() {
-}
+const classNames = require('classnames');
 
 class Switch extends Component {
   constructor(props) {
@@ -25,50 +24,66 @@ class Switch extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(nextProps) {
+    const newState = {};
+    const { checked } = nextProps;
+
     if ('checked' in nextProps) {
-      this.setState({
-        checked: !!nextProps.checked,
-      });
+      newState.checked = !!checked;
     }
+
+    return newState;
   }
 
-  setChecked(checked) {
-    if (this.props.disabled) {
+  setChecked(checked, e) {
+    const { disabled, onChange } = this.props;
+    if (disabled) {
       return;
     }
     if (!('checked' in this.props)) {
       this.setState({
         checked,
       });
     }
-    this.props.onChange(checked);
+    if (onChange) {
+      onChange(checked, e);
+    }
   }
 
-  toggle = () => {
+  handleClick = e => {
+    const { checked } = this.state;
     const { onClick } = this.props;
-    const checked = !this.state.checked;
-    this.setChecked(checked);
-    onClick(checked);
-  }
-
-  handleKeyDown = (e) => {
-    if (e.keyCode === 37) { // Left
-      this.setChecked(false);
-    } else if (e.keyCode === 39) { // Right
-      this.setChecked(true);
+    const newChecked = !checked;
+    this.setChecked(newChecked, e);
+    if (onClick) {
+      onClick(newChecked, e);
     }
-  }
+  };
+
+  handleKeyDown = e => {
+    if (e.keyCode === 37) {
+      // Left
+      this.setChecked(false, e);
+    } else if (e.keyCode === 39) {
+      // Right
+      this.setChecked(true, e);
+    }
+  };
 
   // Handle auto focus when click switch in Chrome
-  handleMouseUp = (e) => {
+  handleMouseUp = e => {
+    const { onMouseUp } = this.props;
     if (this.node) {
       this.node.blur();
     }
-    if (this.props.onMouseUp) {
-      this.props.onMouseUp(e);
+    if (onMouseUp) {
+      onMouseUp(e);
     }
-  }
+  };
+
+  saveNode = node => {
+    this.node = node;
+  };
 
   focus() {
     this.node.focus();
@@ -78,14 +93,17 @@ class Switch extends Component {
     this.node.blur();
   }
 
-  saveNode = (node) => {
-    this.node = node;
-  }
-
   render() {
-    const { className, prefixCls, disabled, loadingIcon,
-      checkedChildren, unCheckedChildren, ...restProps } = this.props;
-    const checked = this.state.checked;
+    const {
+      className,
+      prefixCls,
+      disabled,
+      loadingIcon,
+      checkedChildren,
+      unCheckedChildren,
+      ...restProps
+    } = this.props;
+    const { checked } = this.state;
     const switchClassName = classNames({
       [className]: !!className,
       [prefixCls]: true,
@@ -102,7 +120,7 @@ class Switch extends Component {
         className={switchClassName}
         ref={this.saveNode}
         onKeyDown={this.handleKeyDown}
-        onClick={this.toggle}
+        onClick={this.handleClick}
         onMouseUp={this.handleMouseUp}
       >
         {loadingIcon}
@@ -136,8 +154,8 @@ Switch.defaultProps = {
   unCheckedChildren: null,
   className: '',
   defaultChecked: false,
-  onChange: noop,
-  onClick: noop,
 };
 
+polyfill(Switch);
+
 export default Switch;

tests/index.spec.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
-import Switch from '../index';
 import React from 'react';
 import { mount } from 'enzyme';
+import Switch from '../index';
 
 describe('rc-switch', () => {
   let switcher;
@@ -24,7 +24,7 @@ describe('rc-switch', () => {
   });
 
   it('should change from an initial checked state of true to false on click', () => {
-    const wrapper = mount(<Switch defaultChecked/>);
+    const wrapper = mount(<Switch defaultChecked />);
     expect(wrapper.state().checked).toBe(true);
     wrapper.simulate('click');
     expect(wrapper.state().checked).toBe(false);
@@ -34,24 +34,24 @@ describe('rc-switch', () => {
     const onClick = jest.fn();
     const wrapper = mount(<Switch onClick={onClick} />);
     wrapper.simulate('click');
-    expect(onClick).toBeCalledWith(true);
+    expect(onClick).toBeCalledWith(true, expect.objectContaining({ type: 'click' }));
     expect(onClick.mock.calls.length).toBe(1);
     wrapper.simulate('click');
-    expect(onClick).toBeCalledWith(false);
+    expect(onClick).toBeCalledWith(false, expect.objectContaining({ type: 'click' }));
     expect(onClick.mock.calls.length).toBe(2);
   });
 
   it('should not toggle when clicked in a disabled state', () => {
     const onChange = jest.fn();
-    const wrapper = mount(<Switch disabled checked onChange={onChange}/>);
+    const wrapper = mount(<Switch disabled checked onChange={onChange} />);
     expect(wrapper.state().checked).toBe(true);
     wrapper.simulate('click');
     expect(wrapper.state().checked).toBe(true);
     expect(onChange.mock.calls.length).toBe(0);
   });
 
   it('should support loading icon node', () => {
-    const wrapper = mount(<Switch loadingIcon={<span className="extra">loading</span>}/>);
+    const wrapper = mount(<Switch loadingIcon={<span className="extra">loading</span>} />);
     expect(wrapper.find('.extra').text()).toBe('loading');
   });