From bfb9cab02f75c50376b38dbf110192dd54043d66 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 5 Jun 2019 14:57:33 +0800 Subject: [PATCH 1/4] :zap: Migrate to new lifecycle methods ant-design/ant-design#9792 --- package.json | 3 +-- src/Checkbox.jsx | 57 ++++++++++++++++++++++++------------------------ tests/setup.js | 2 +- 3 files changed, 31 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index e3babe7..5632fd1 100644 --- a/package.json +++ b/package.json @@ -55,8 +55,7 @@ "dependencies": { "babel-runtime": "^6.23.0", "classnames": "2.x", - "prop-types": "15.x", - "rc-util": "^4.0.4" + "prop-types": "15.x" }, "devDependencies": { "core-js": "^2.5.1", diff --git a/src/Checkbox.jsx b/src/Checkbox.jsx index 2d8f148..e7e7409 100644 --- a/src/Checkbox.jsx +++ b/src/Checkbox.jsx @@ -1,9 +1,8 @@ -import React from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import PureRenderMixin from 'rc-util/lib/PureRenderMixin'; import classNames from 'classnames'; -export default class Checkbox extends React.Component { +export default class Checkbox extends Component { static propTypes = { prefixCls: PropTypes.string, className: PropTypes.string, @@ -23,6 +22,7 @@ export default class Checkbox extends React.Component { autoFocus: PropTypes.bool, value: PropTypes.any, }; + static defaultProps = { prefixCls: 'rc-checkbox', className: '', @@ -33,6 +33,7 @@ export default class Checkbox extends React.Component { onBlur() {}, onChange() {}, }; + constructor(props) { super(props); @@ -43,16 +44,14 @@ export default class Checkbox extends React.Component { }; } - componentWillReceiveProps(nextProps) { - if ('checked' in nextProps) { - this.setState({ - checked: nextProps.checked, - }); + static getDerivedStateFromProps(props, state) { + if ('checked' in props) { + return { + ...state, + checked: props.checked, + }; } - } - - shouldComponentUpdate(...args) { - return PureRenderMixin.shouldComponentUpdate.apply(this, args); + return null; } focus() { @@ -64,28 +63,30 @@ export default class Checkbox extends React.Component { } handleChange = (e) => { - const { props } = this; - if (props.disabled) { + const { disabled, onChange } = this.props; + if (disabled) { return; } - if (!('checked' in props)) { + if (!('checked' in this.props)) { this.setState({ checked: e.target.checked, }); } - props.onChange({ - target: { - ...props, - checked: e.target.checked, - }, - stopPropagation() { - e.stopPropagation(); - }, - preventDefault() { - e.preventDefault(); - }, - nativeEvent: e.nativeEvent, - }); + if (onChange) { + onChange({ + target: { + ...this.props, + checked: e.target.checked, + }, + stopPropagation() { + e.stopPropagation(); + }, + preventDefault() { + e.preventDefault(); + }, + nativeEvent: e.nativeEvent, + }); + } }; saveInput = (node) => { diff --git a/tests/setup.js b/tests/setup.js index 6eb7b89..684b8a6 100644 --- a/tests/setup.js +++ b/tests/setup.js @@ -1,4 +1,4 @@ -global.requestAnimationFrame = global.requestAnimationFrame || function (cb) { +global.requestAnimationFrame = global.requestAnimationFrame || function requestAnimationFrame(cb) { return setTimeout(cb, 0); }; From 1214360001a9a9d5b588c33e5231b262069feccd Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 5 Jun 2019 15:00:21 +0800 Subject: [PATCH 2/4] Add react-lifecycles-compat --- package.json | 3 ++- src/Checkbox.jsx | 7 ++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 5632fd1..355ea28 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,8 @@ "dependencies": { "babel-runtime": "^6.23.0", "classnames": "2.x", - "prop-types": "15.x" + "prop-types": "15.x", + "react-lifecycles-compat": "^3.0.4" }, "devDependencies": { "core-js": "^2.5.1", diff --git a/src/Checkbox.jsx b/src/Checkbox.jsx index e7e7409..1d22293 100644 --- a/src/Checkbox.jsx +++ b/src/Checkbox.jsx @@ -1,8 +1,9 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import { polyfill } from 'react-lifecycles-compat'; -export default class Checkbox extends Component { +class Checkbox extends Component { static propTypes = { prefixCls: PropTypes.string, className: PropTypes.string, @@ -150,3 +151,7 @@ export default class Checkbox extends Component { ); } } + +polyfill(Checkbox); + +export default Checkbox; From d3ee5c0d114443ad3567bd40840b524ce7e0e265 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 5 Jun 2019 15:01:57 +0800 Subject: [PATCH 3/4] 2.1.7 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 355ea28..ce4ff4a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-checkbox", - "version": "2.1.6", + "version": "2.1.7", "description": "checkbox ui component for react", "keywords": [ "react", From eab457f7876b5a794b2736a11ce69216e524e0b0 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 5 Jun 2019 15:18:59 +0800 Subject: [PATCH 4/4] Add test cases --- tests/index.spec.jsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/tests/index.spec.jsx b/tests/index.spec.jsx index ba13437..4d07229 100644 --- a/tests/index.spec.jsx +++ b/tests/index.spec.jsx @@ -79,4 +79,22 @@ describe('rc-checkbox', () => { mount(, { attachTo: container }); expect(handleFocus).toBeCalled(); }); + + it('onChange', () => { + const container = document.createElement('div'); + document.body.appendChild(container); + const onChange = jest.fn(); + const wrapper = mount(, { attachTo: container }); + wrapper.find('input').simulate('change'); + expect(onChange).toBeCalled(); + }); + + it('onChange disabled', () => { + const container = document.createElement('div'); + document.body.appendChild(container); + const onChange = jest.fn(); + const wrapper = mount(, { attachTo: container }); + wrapper.find('input').simulate('change'); + expect(onChange).not.toBeCalled(); + }); });