chore(deps-dev): bump eslint-config-airbnb from 18.2.1 to 19.0.0 (ant…

…-design#32824) * chore(deps-dev): bump eslint-config-airbnb from 18.2.1 to 19.0.0 Bumps [eslint-config-airbnb](https://github.com/airbnb/javascript) from 18.2.1 to 19.0.0. - [Release notes](https://github.com/airbnb/javascript/releases) - [Commits](airbnb/javascript@eslint-config-airbnb-v18.2.1...eslint-config-airbnb-v19.0.0) --- updated-dependencies: - dependency-name: eslint-config-airbnb dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * chore: code style * memoize-one * add comment * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * fix lint * improve useMemo deps Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: afc163 <[email protected]>
smwhr · Nov 26, 2021 · 20d5502 · 20d5502
1 parent 6f837e0
commit 20d5502
Show file tree

Hide file tree

Showing 51 changed files with 367 additions and 344 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -78,6 +78,8 @@ module.exports = {
         'jsx-a11y/href-no-hash': 0,
         'jsx-a11y/control-has-associated-label': 0,
         'import/no-extraneous-dependencies': 0,
+        'react/jsx-no-constructed-context-values': 0,
+        'react/no-unstable-nested-components': 0,
       },
     },
   ],
@@ -100,7 +102,8 @@ module.exports = {
     'react/no-unused-prop-types': 0,
     'react/default-props-match-prop-types': 0,
     'react-hooks/rules-of-hooks': 2, // Checks rules of Hooks
-
+    'react/function-component-definition': 0,
+    'react/no-unused-class-component-methods': 0,
     'import/extensions': 0,
     'import/no-cycle': 0,
     'import/no-extraneous-dependencies': [

diff --git a/components/_util/__tests__/unreachableException.test.js b/components/_util/__tests__/unreachableException.test.js
@@ -3,6 +3,6 @@ import UnreachableException from '../unreachableException';
 describe('UnreachableException', () => {
   it('error thrown matches snapshot', () => {
     const exception = new UnreachableException('some value');
-    expect(exception.message).toMatchInlineSnapshot(`"unreachable case: \\"some value\\""`);
+    expect(exception.error.message).toMatchInlineSnapshot(`"unreachable case: \\"some value\\""`);
   });
 });
diff --git a/components/_util/unreachableException.ts b/components/_util/unreachableException.ts
@@ -1,5 +1,8 @@
+
 export default class UnreachableException {
+  error: Error;
+
   constructor(value: never) {
-    return new Error(`unreachable case: ${JSON.stringify(value)}`);
+    this.error = new Error(`unreachable case: ${JSON.stringify(value)}`);
   }
 }
diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import memoizeOne from 'memoize-one';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import Affix from '../affix';
 import AnchorLink from './AnchorLink';
@@ -258,7 +259,6 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
 
   render() {
     const { getPrefixCls, direction } = this.context;
-
     const {
       prefixCls: customizePrefixCls,
       className = '',
@@ -267,6 +267,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
       affix,
       showInkInFixed,
       children,
+      onClick,
     } = this.props;
     const { activeLink } = this.state;
 
@@ -309,16 +310,16 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
       </div>
     );
 
+    const contextValue = memoizeOne((link, onClickFn) => ({
+      registerLink: this.registerLink,
+      unregisterLink: this.unregisterLink,
+      scrollTo: this.handleScrollTo,
+      activeLink: link,
+      onClick: onClickFn,
+    }))(activeLink, onClick);
+
     return (
-      <AnchorContext.Provider
-        value={{
-          registerLink: this.registerLink,
-          unregisterLink: this.unregisterLink,
-          activeLink: this.state.activeLink,
-          scrollTo: this.handleScrollTo,
-          onClick: this.props.onClick,
-        }}
-      >
+      <AnchorContext.Provider value={contextValue}>
         {!affix ? (
           anchorContent
         ) : (

diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx
@@ -55,9 +55,9 @@ const getPath = (path: string, params: any) => {
   return path;
 };
 
-const addChildPath = (paths: string[], childPath: string = '', params: any) => {
+const addChildPath = (paths: string[], childPath: string, params: any) => {
   const originalPaths = [...paths];
-  const path = getPath(childPath, params);
+  const path = getPath(childPath || '', params);
   if (path) {
     originalPaths.push(path);
   }

diff --git a/components/button/__tests__/index.test.tsx b/components/button/__tests__/index.test.tsx
@@ -316,6 +316,7 @@ describe('Button', () => {
   it('should handle fragment as children', () => {
     const wrapper = mount(
       <Button>
+        {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
         <>text</>
       </Button>,
     );

diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx
@@ -32,7 +32,7 @@ const ButtonGroup: React.FC<ButtonGroupProps> = props => (
           break;
         default:
           // eslint-disable-next-line no-console
-          console.warn(new UnreachableException(size));
+          console.warn((new UnreachableException(size)).error);
       }
 
       const classes = classNames(

diff --git a/components/carousel/__tests__/index.test.js b/components/carousel/__tests__/index.test.js
@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
 import Carousel from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
+import { sleep } from '../../../tests/utils';
 
 describe('Carousel', () => {
   mountTest(Carousel);
@@ -65,7 +66,7 @@ describe('Carousel', () => {
     const spy = jest.spyOn(ref.current.innerSlider, 'autoPlay');
     window.resizeTo(1000);
     expect(spy).not.toHaveBeenCalled();
-    await new Promise(resolve => setTimeout(resolve, 500));
+    await sleep(500);
     expect(spy).toHaveBeenCalled();
   });
 

diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx
@@ -131,17 +131,16 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec
     ));
   }
 
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
   const context = {
     toggleOption,
     value,
     disabled: restProps.disabled,
     name: restProps.name,
-
     // https://github.com/ant-design/ant-design/issues/16376
     registerValue,
     cancelValue,
   };
-
   const classString = classNames(
     groupPrefixCls,
     {

diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx
@@ -151,9 +151,10 @@ function Descriptions({
 
   // Children
   const rows = getRows(children, mergedColumn);
+  const contextValue = React.useMemo(() => ({ labelStyle, contentStyle }), [labelStyle, contentStyle]);
 
   return (
-    <DescriptionsContext.Provider value={{ labelStyle, contentStyle }}>
+    <DescriptionsContext.Provider value={contextValue}>
       <div
         className={classNames(
           prefixCls,

diff --git a/components/form/FormItemInput.tsx b/components/form/FormItemInput.tsx
@@ -77,7 +77,7 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = pro
     ) : null;
 
   // Pass to sub FormItem should not with col info
-  const subFormContext = { ...formContext };
+  const subFormContext = React.useMemo(() => ({ ...formContext }), [formContext]);
   delete subFormContext.labelCol;
   delete subFormContext.wrapperCol;
 
@@ -87,8 +87,9 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = pro
       {icon}
     </div>
   );
+  const formItemContext = React.useMemo(() => ({ prefixCls, status }), [prefixCls, status]);
   const errorListDom = (
-    <FormItemPrefixContext.Provider value={{ prefixCls, status }}>
+    <FormItemPrefixContext.Provider value={formItemContext}>
       <ErrorList
         errors={errors}
         warnings={warnings}

diff --git a/components/form/FormList.tsx b/components/form/FormList.tsx
@@ -38,11 +38,18 @@ const FormList: React.FC<FormListProps> = ({
 
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('form', customizePrefixCls);
+  const contextValue = React.useMemo(
+    () => ({
+      prefixCls,
+      status: 'error' as const,
+    }),
+    [prefixCls],
+  );
 
   return (
     <List {...props}>
       {(fields, operation, meta) => (
-        <FormItemPrefixContext.Provider value={{ prefixCls, status: 'error' }}>
+        <FormItemPrefixContext.Provider value={contextValue}>
           {children(
             fields.map(field => ({ ...field, fieldKey: field.key })),
             operation,

diff --git a/components/form/demo/form-context.md b/components/form/demo/form-context.md
@@ -94,56 +94,54 @@ const Demo = () => {
   };
 
   return (
-    <>
-      <Form.Provider
-        onFormFinish={(name, { values, forms }) => {
-          if (name === 'userForm') {
-            const { basicForm } = forms;
-            const users = basicForm.getFieldValue('users') || [];
-            basicForm.setFieldsValue({ users: [...users, values] });
-            setVisible(false);
-          }
-        }}
-      >
-        <Form {...layout} name="basicForm" onFinish={onFinish}>
-          <Form.Item name="group" label="Group Name" rules={[{ required: true }]}>
-            <Input />
-          </Form.Item>
-          <Form.Item
-            label="User List"
-            shouldUpdate={(prevValues, curValues) => prevValues.users !== curValues.users}
-          >
-            {({ getFieldValue }) => {
-              const users: UserType[] = getFieldValue('users') || [];
-              return users.length ? (
-                <ul>
-                  {users.map((user, index) => (
-                    <li key={index} className="user">
-                      <Avatar icon={<UserOutlined />} />
-                      {user.name} - {user.age}
-                    </li>
-                  ))}
-                </ul>
-              ) : (
-                <Typography.Text className="ant-form-text" type="secondary">
-                  ( <SmileOutlined /> No user yet. )
-                </Typography.Text>
-              );
-            }}
-          </Form.Item>
-          <Form.Item {...tailLayout}>
-            <Button htmlType="submit" type="primary">
-              Submit
-            </Button>
-            <Button htmlType="button" style={{ margin: '0 8px' }} onClick={showUserModal}>
-              Add User
-            </Button>
-          </Form.Item>
-        </Form>
-
-        <ModalForm visible={visible} onCancel={hideUserModal} />
-      </Form.Provider>
-    </>
+    <Form.Provider
+      onFormFinish={(name, { values, forms }) => {
+        if (name === 'userForm') {
+          const { basicForm } = forms;
+          const users = basicForm.getFieldValue('users') || [];
+          basicForm.setFieldsValue({ users: [...users, values] });
+          setVisible(false);
+        }
+      }}
+    >
+      <Form {...layout} name="basicForm" onFinish={onFinish}>
+        <Form.Item name="group" label="Group Name" rules={[{ required: true }]}>
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label="User List"
+          shouldUpdate={(prevValues, curValues) => prevValues.users !== curValues.users}
+        >
+          {({ getFieldValue }) => {
+            const users: UserType[] = getFieldValue('users') || [];
+            return users.length ? (
+              <ul>
+                {users.map((user, index) => (
+                  <li key={index} className="user">
+                    <Avatar icon={<UserOutlined />} />
+                    {user.name} - {user.age}
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <Typography.Text className="ant-form-text" type="secondary">
+                ( <SmileOutlined /> No user yet. )
+              </Typography.Text>
+            );
+          }}
+        </Form.Item>
+        <Form.Item {...tailLayout}>
+          <Button htmlType="submit" type="primary">
+            Submit
+          </Button>
+          <Button htmlType="button" style={{ margin: '0 8px' }} onClick={showUserModal}>
+            Add User
+          </Button>
+        </Form.Item>
+      </Form>
+
+      <ModalForm visible={visible} onCancel={hideUserModal} />
+    </Form.Provider>
   );
 };
 

diff --git a/components/form/demo/layout.md b/components/form/demo/layout.md
@@ -43,32 +43,30 @@ const FormLayoutDemo = () => {
       : null;
 
   return (
-    <>
-      <Form
-        {...formItemLayout}
-        layout={formLayout}
-        form={form}
-        initialValues={{ layout: formLayout }}
-        onValuesChange={onFormLayoutChange}
-      >
-        <Form.Item label="Form Layout" name="layout">
-          <Radio.Group value={formLayout}>
-            <Radio.Button value="horizontal">Horizontal</Radio.Button>
-            <Radio.Button value="vertical">Vertical</Radio.Button>
-            <Radio.Button value="inline">Inline</Radio.Button>
-          </Radio.Group>
-        </Form.Item>
-        <Form.Item label="Field A">
-          <Input placeholder="input placeholder" />
-        </Form.Item>
-        <Form.Item label="Field B">
-          <Input placeholder="input placeholder" />
-        </Form.Item>
-        <Form.Item {...buttonItemLayout}>
-          <Button type="primary">Submit</Button>
-        </Form.Item>
-      </Form>
-    </>
+    <Form
+      {...formItemLayout}
+      layout={formLayout}
+      form={form}
+      initialValues={{ layout: formLayout }}
+      onValuesChange={onFormLayoutChange}
+    >
+      <Form.Item label="Form Layout" name="layout">
+        <Radio.Group value={formLayout}>
+          <Radio.Button value="horizontal">Horizontal</Radio.Button>
+          <Radio.Button value="vertical">Vertical</Radio.Button>
+          <Radio.Button value="inline">Inline</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item label="Field A">
+        <Input placeholder="input placeholder" />
+      </Form.Item>
+      <Form.Item label="Field B">
+        <Input placeholder="input placeholder" />
+      </Form.Item>
+      <Form.Item {...buttonItemLayout}>
+        <Button type="primary">Submit</Button>
+      </Form.Item>
+    </Form>
   );
 };