Merge pull request #18209 from ant-design/eslint-config-airbnb

chore: 🆙 upgrade react-slick and eslint-config-airbnb

.eslintrc.js

@@ -56,6 +56,8 @@ const eslintrc = {
     'jsx-a11y/anchor-is-valid': 0,
     'comma-dangle': ['error', 'always-multiline'],
     'react/jsx-filename-extension': 0,
+    'react/state-in-constructor': 0,
+    'react/jsx-props-no-spreading': 0,
     'prefer-destructuring': 0, // TODO: remove later
     'consistent-return': 0, // TODO: remove later
     'no-return-assign': 0, // TODO: remove later
@@ -78,6 +80,8 @@ const eslintrc = {
     'react/display-name': 0,
     // ban this for Number.isNaN needs polyfill
     'no-restricted-globals': 0,
+    'max-classes-per-file': 0,
+    'react/static-property-placement': 0,
   },
 };
 
@@ -100,6 +104,7 @@ if (process.env.RUN_ENV === 'DEMO') {
     'react/no-multi-comp': 0,
     'jsx-a11y/href-no-hash': 0,
     'import/no-extraneous-dependencies': 0,
+    'jsx-a11y/control-has-associated-label': 0,
   });
 }
 

components/_util/__tests__/util.test.js

@@ -143,7 +143,7 @@ describe('Test utils function', () => {
     it('bindAnimationEvent should return when node is null', () => {
       const wrapper = mount(
         <Wave>
-          <button type="button" disabled />
+          <button type="button" disabled>button</button>
         </Wave>,
       ).instance();
       expect(wrapper.bindAnimationEvent()).toBe(undefined);
@@ -152,7 +152,7 @@ describe('Test utils function', () => {
     it('bindAnimationEvent.onClick should return when children is hidden', () => {
       const wrapper = mount(
         <Wave>
-          <button type="button" style={{ display: 'none' }} />
+          <button type="button" style={{ display: 'none' }}>button</button>
         </Wave>,
       ).instance();
       expect(wrapper.bindAnimationEvent()).toBe(undefined);

components/_util/throttleByAnimationFrame.tsx

@@ -20,6 +20,7 @@ export default function throttleByAnimationFrame(fn: (...args: any[]) => void) {
 }
 
 export function throttleByAnimationFrameDecorator() {
+  // eslint-disable-next-line func-names
   return function(target: any, key: string, descriptor: any) {
     const fn = descriptor.value;
     let definingProperty = false;

components/badge/__tests__/__snapshots__/index.test.js.snap

@@ -2907,7 +2907,9 @@ exports[`Badge should support offset when count is a ReactNode 1`] = `
   <a
     class="head-example"
     href="#"
-  />
+  >
+    head
+  </a>
   <span
     class="ant-scroll-number-custom-component custom"
     style="right:-10px;margin-top:20px;color:#f5222d"

components/badge/__tests__/index.test.js

@@ -84,7 +84,7 @@ describe('Badge', () => {
   it('should support offset when count is a ReactNode', () => {
     const wrapper = render(
       <Badge count={<span className="custom" style={{ color: '#f5222d' }} />} offset={[10, 20]}>
-        <a href="#" className="head-example" />
+        <a href="#" className="head-example">head</a>
       </Badge>,
     );
     expect(wrapper).toMatchSnapshot();

components/carousel/__tests__/index.test.js

@@ -87,7 +87,6 @@ describe('Carousel', () => {
             <div />
           </Carousel>,
         );
-        jest.runAllTimers();
         expect(wrapper.render()).toMatchSnapshot();
       });
     });
@@ -117,6 +116,11 @@ describe('Carousel', () => {
     });
 
     it('should keep initialSlide', () => {
+      // react unsafe lifecycle don't works in React 15
+      // https://github.com/akiran/react-slick/commit/97988e897750e1d8f7b10a86b655f50d75d38298
+      if (process.env.REACT === '15') {
+        return;
+      }
       const wrapper = mount(<Carousel initialSlide={1} />);
       wrapper.setProps({
         children: [<div key="1" />, <div key="2" />, <div key="3" />],

components/form/Form.tsx

@@ -221,7 +221,7 @@ export default class Form extends React.Component<FormProps, any> {
 
   static createFormField = createFormField;
 
-  static create = function<TOwnProps extends FormComponentProps>(
+  static create = function create<TOwnProps extends FormComponentProps>(
     options: FormCreateOption<TOwnProps> = {},
   ): FormWrappedProps<TOwnProps> {
     return createDOMForm({

components/form/demo/customized-form-controls.md

@@ -73,24 +73,27 @@ class PriceInput extends React.Component {
     // Should provide an event to pass value to Form.
     const { onChange } = this.props;
     if (onChange) {
-      onChange(Object.assign({}, this.state, changedValue));
+      onChange({
+        ...this.state,
+        ...changedValue,
+      });
     }
   };
 
   render() {
     const { size } = this.props;
-    const { state } = this;
+    const { currency, number } = this.state;
     return (
       <span>
         <Input
           type="text"
           size={size}
-          value={state.number}
+          value={number}
           onChange={this.handleNumberChange}
           style={{ width: '65%', marginRight: '3%' }}
         />
         <Select
-          value={state.currency}
+          value={currency}
           size={size}
           style={{ width: '32%' }}
           onChange={this.handleCurrencyChange}

components/modal/ActionButton.tsx

@@ -58,6 +58,7 @@ export default class ActionButton extends React.Component<ActionButtonProps, Act
           },
           (e: Error) => {
             // Emit error when catch promise reject
+            // eslint-disable-next-line no-console
             console.error(e);
             // See: https://github.com/ant-design/ant-design/issues/6183
             this.setState({ loading: false });

components/modal/index.tsx

@@ -16,7 +16,7 @@ function modalWarn(props: ModalFuncProps) {
   return confirm(config);
 }
 
-Modal.info = function(props: ModalFuncProps) {
+Modal.info = function infoFn(props: ModalFuncProps) {
   const config = {
     type: 'info',
     icon: <Icon type="info-circle" />,
@@ -26,7 +26,7 @@ Modal.info = function(props: ModalFuncProps) {
   return confirm(config);
 };
 
-Modal.success = function(props: ModalFuncProps) {
+Modal.success = function successFn(props: ModalFuncProps) {
   const config = {
     type: 'success',
     icon: <Icon type="check-circle" />,
@@ -36,7 +36,7 @@ Modal.success = function(props: ModalFuncProps) {
   return confirm(config);
 };
 
-Modal.error = function(props: ModalFuncProps) {
+Modal.error = function errorFn(props: ModalFuncProps) {
   const config = {
     type: 'error',
     icon: <Icon type="close-circle" />,
@@ -50,7 +50,7 @@ Modal.warning = modalWarn;
 
 Modal.warn = modalWarn;
 
-Modal.confirm = function(props: ModalFuncProps) {
+Modal.confirm = function confirmFn(props: ModalFuncProps) {
   const config = {
     type: 'confirm',
     okCancel: true,
@@ -59,7 +59,7 @@ Modal.confirm = function(props: ModalFuncProps) {
   return confirm(config);
 };
 
-Modal.destroyAll = function() {
+Modal.destroyAll = function destroyAllFn() {
   while (destroyFns.length) {
     const close = destroyFns.pop();
     if (close) {

components/upload/__tests__/uploadlist.test.js

@@ -521,7 +521,7 @@ describe('Upload List', () => {
 
         const wrapper = mount(
           <Upload listType="picture" defaultFileList={[file]} previewFile={previewFile}>
-            <button type="button" />
+            <button type="button">button</button>
           </Upload>,
         );
         wrapper.setState({});

package.json

@@ -90,7 +90,7 @@
     "rc-util": "^4.6.0",
     "react-lazy-load": "^3.0.13",
     "react-lifecycles-compat": "^3.0.4",
-    "react-slick": "~0.24.0",
+    "react-slick": "~0.25.2",
     "resize-observer-polyfill": "^1.5.1",
     "shallowequal": "^1.1.0",
     "warning": "~4.0.3"
@@ -126,7 +126,7 @@
     "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.3.5",
     "eslint": "^6.1.0",
-    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-airbnb": "^18.0.0",
     "eslint-config-prettier": "^6.0.0",
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-import": "^2.17.3",