Feat/remove deprecated (ant-design#17510)

* feat: remove warnings for linkRender, nameRender in Breadcrumb

* feat: remove warnings for onOpen, onClose in Menu

* feat: remove warnings for overlay in Popover

* feat: remove warnings for columnsPageRange, columnsPageSize in Table

* feat: remove warnings for afterClose in Tag

* feat: remove warnings for notFoundContent, searchPlaceholder, body, onSearchChange in Transfer

* fix: types in Transfer

* feat: update test cases in Transfer

* feat: add additional test cases for removed deprecated apis

components/breadcrumb/Breadcrumb.tsx

@@ -61,16 +61,6 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
     params: PropTypes.object,
   };
 
-  componentDidMount() {
-    const props = this.props;
-    warning(
-      !('linkRender' in props || 'nameRender' in props),
-      'Breadcrumb',
-      '`linkRender` and `nameRender` are removed, please use `itemRender` instead, ' +
-        'see: https://u.ant.design/item-render.',
-    );
-  }
-
   getPath = (path: string, params: any) => {
     path = (path || '').replace(/^\//, '');
     Object.keys(params).forEach(key => {

components/breadcrumb/__tests__/Breadcrumb.test.js

@@ -84,4 +84,19 @@ describe('Breadcrumb', () => {
     const wrapper = render(<Breadcrumb routes={routes} />);
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('props#linkRender and props#nameRender do not warn anymore', () => {
+    const linkRender = jest.fn();
+    const nameRender = jest.fn();
+    mount(
+      <Breadcrumb linkRender={linkRender} nameRender={nameRender}>
+        <Breadcrumb.Item />
+        <Breadcrumb.Item>xxx</Breadcrumb.Item>
+      </Breadcrumb>,
+    );
+
+    expect(errorSpy.mock.calls.length).toBe(0);
+    expect(linkRender).not.toHaveBeenCalled();
+    expect(nameRender).not.toHaveBeenCalled();
+  });
 });

components/menu/__tests__/index.test.js

@@ -635,4 +635,27 @@ describe('Menu', () => {
 
     jest.useRealTimers();
   });
+
+  it('props#onOpen and props#onClose do not warn anymore', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const onOpen = jest.fn();
+    const onClose = jest.fn();
+    mount(
+      <Menu defaultOpenKeys={['1']} mode="inline" onOpen={onOpen} onClose={onClose}>
+        <SubMenu key="1" title="submenu1">
+          <Menu.Item key="submenu1">Option 1</Menu.Item>
+          <Menu.Item key="submenu2">Option 2</Menu.Item>
+        </SubMenu>
+        <Menu.Item key="2">menu2</Menu.Item>
+      </Menu>,
+    );
+
+    expect(errorSpy.mock.calls.length).toBe(1);
+    expect(errorSpy.mock.calls[0][0]).not.toContain(
+      '`onOpen` and `onClose` are removed, please use `onOpenChange` instead, see: https://u.ant.design/menu-on-open-change.',
+    );
+    expect(onOpen).not.toHaveBeenCalled();
+    expect(onClose).not.toHaveBeenCalled();
+  });
 });

components/menu/index.tsx

@@ -130,13 +130,6 @@ class InternalMenu extends React.Component<InternalMenuProps, MenuState> {
   constructor(props: InternalMenuProps) {
     super(props);
 
-    warning(
-      !('onOpen' in props || 'onClose' in props),
-      'Menu',
-      '`onOpen` and `onClose` are removed, please use `onOpenChange` instead, ' +
-        'see: https://u.ant.design/menu-on-open-change.',
-    );
-
     warning(
       !('inlineCollapsed' in props && props.mode !== 'inline'),
       'Menu',

components/popover/__tests__/index.test.js

@@ -20,4 +20,18 @@ describe('Popover', () => {
     expect(popup.innerHTML).toMatchSnapshot();
     expect(popup.innerHTML).toMatchSnapshot();
   });
+
+  it('props#overlay do not warn anymore', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const overlay = jest.fn();
+    mount(
+      <Popover content="console.log('hello world')" title="code" trigger="click">
+        <span>show me your code</span>
+      </Popover>,
+    );
+
+    expect(errorSpy.mock.calls.length).toBe(0);
+    expect(overlay).not.toHaveBeenCalled();
+  });
 });

components/popover/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Tooltip, { AbstractTooltipProps, TooltipPlacement, TooltipTrigger } from '../tooltip';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import warning from '../_util/warning';
 
 export interface PopoverProps extends AbstractTooltipProps {
   title?: React.ReactNode;
@@ -26,12 +25,6 @@ export default class Popover extends React.Component<PopoverProps, {}> {
 
   getOverlay(prefixCls: string) {
     const { title, content } = this.props;
-    warning(
-      !('overlay' in this.props),
-      'Popover',
-      '`overlay` is removed, please use `content` instead, ' +
-        'see: https://u.ant.design/popover-content',
-    );
     return (
       <div>
         {title && <div className={`${prefixCls}-title`}>{title}</div>}

components/table/Table.tsx

@@ -113,13 +113,6 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
 
     const { expandedRowRender, columns = [] } = props;
 
-    warning(
-      !('columnsPageRange' in props || 'columnsPageSize' in props),
-      'Table',
-      '`columnsPageRange` and `columnsPageSize` are removed, please use ' +
-        'fixed columns instead, see: https://u.ant.design/fixed-columns.',
-    );
-
     if (expandedRowRender && columns.some(({ fixed }) => !!fixed)) {
       warning(
         false,

components/table/__tests__/Table.test.js

@@ -93,4 +93,40 @@ describe('Table', () => {
       'Warning: [antd: Table] `expandedRowRender` and `Column.fixed` are not compatible. Please use one of them at one time.',
     );
   });
+
+  it('props#columnsPageRange and props#columnsPageSize do not warn anymore', () => {
+    const data = [
+      {
+        key: '1',
+        age: 32,
+      },
+      {
+        key: '2',
+        age: 42,
+      },
+    ];
+
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const columnsPageRange = jest.fn();
+    const columnsPageSize = jest.fn();
+    mount(
+      <Table
+        dataSource={data}
+        rowkey="key"
+        columnsPageRange={columnsPageRange}
+        columnsPageSize={columnsPageSize}
+      >
+        <Column title="Age" dataIndex="age" key="age" />
+      </Table>,
+    );
+
+    expect(errorSpy.mock.calls.length).toBe(1);
+    expect(errorSpy.mock.calls[0][0]).not.toContain(
+      '`columnsPageRange` and `columnsPageSize` are removed, please use fixed columns instead, see: https://u.ant.design/fixed-columns.',
+    );
+
+    expect(columnsPageRange).not.toHaveBeenCalled();
+    expect(columnsPageSize).not.toHaveBeenCalled();
+  });
 });

components/tag/__tests__/index.test.js

@@ -58,4 +58,19 @@ describe('Tag', () => {
       expect(wrapper.render()).toMatchSnapshot();
     });
   });
+
+  it('props#afterClose do not warn anymore', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const afterClose = jest.fn();
+    const wrapper = mount(<Tag closable afterClose={afterClose} />);
+
+    expect(errorSpy.mock.calls.length).toBe(1);
+    expect(errorSpy.mock.calls[0]).not.toContain(
+      `'afterClose' will be deprecated, please use 'onClose', we will remove this in the next version`,
+    );
+
+    wrapper.find('.anticon-close').simulate('click');
+    expect(afterClose).not.toHaveBeenCalled();
+  });
 });

components/tag/index.en-US.md

@@ -16,13 +16,12 @@ Tag for categorizing or markup.
 
 ### Tag
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| afterClose | Callback executed when close animation is completed, please use `onClose`, we will remove this in the next version | () => void | - |
-| closable | Whether the Tag can be closed | boolean | `false` |
-| color | Color of the Tag | string | - |
-| onClose | Callback executed when tag is closed | (e) => void | - |
-| visible | Whether the Tag is closed or not | boolean | `true` |
+| Property | Description                          | Type        | Default |
+| -------- | ------------------------------------ | ----------- | ------- |
+| closable | Whether the Tag can be closed        | boolean     | `false` |
+| color    | Color of the Tag                     | string      | -       |
+| onClose  | Callback executed when tag is closed | (e) => void | -       |
+| visible  | Whether the Tag is closed or not     | boolean     | `true`  |
 
 ### Tag.CheckableTag
 

components/tag/index.tsx

@@ -6,7 +6,6 @@ import Icon from '../icon';
 import CheckableTag from './CheckableTag';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import { PresetColorTypes } from '../_util/colors';
-import warning from '../_util/warning';
 import Wave from '../_util/wave';
 
 export { CheckableTagProps } from './CheckableTag';
@@ -18,7 +17,6 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
   closable?: boolean;
   visible?: boolean;
   onClose?: Function;
-  afterClose?: Function;
   style?: React.CSSProperties;
 }
 
@@ -47,24 +45,12 @@ class Tag extends React.Component<TagProps, TagState> {
     visible: true,
   };
 
-  constructor(props: TagProps) {
-    super(props);
-    warning(
-      !('afterClose' in props),
-      'Tag',
-      "'afterClose' will be deprecated, please use 'onClose', we will remove this in the next version.",
-    );
-  }
-
   setVisible(visible: boolean, e: React.MouseEvent<HTMLElement>) {
-    const { onClose, afterClose } = this.props;
+    const { onClose } = this.props;
     if (onClose) {
       onClose(e);
     }
-    if (afterClose && !onClose) {
-      // next version remove.
-      afterClose();
-    }
+
     if (e.defaultPrevented) {
       return;
     }
@@ -118,7 +104,7 @@ class Tag extends React.Component<TagProps, TagState> {
     const { prefixCls: customizePrefixCls, children, ...otherProps } = this.props;
     const isNeedWave =
       'onClick' in otherProps || (children && (children as React.ReactElement<any>).type === 'a');
-    const divProps = omit(otherProps, ['onClose', 'afterClose', 'color', 'visible', 'closable']);
+    const divProps = omit(otherProps, ['onClose', 'color', 'visible', 'closable']);
     return isNeedWave ? (
       <Wave>
         <div {...divProps} className={this.getTagClassName(configProps)} style={this.getTagStyle()}>

components/tag/index.zh-CN.md

@@ -16,13 +16,12 @@ title: Tag
 
 ### Tag
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| afterClose | 关闭动画完成后的回调，请使用 `onClose`, 我们将在下个版本删除此项 | () => void | - |
-| closable | 标签是否可以关闭 | boolean | false |
-| color | 标签色 | string | - |
-| onClose | 关闭时的回调 | (e) => void | - |
-| visible | 是否显示标签 | boolean | `true` |
+| 参数     | 说明             | 类型        | 默认值 |
+| -------- | ---------------- | ----------- | ------ |
+| closable | 标签是否可以关闭 | boolean     | false  |
+| color    | 标签色           | string      | -      |
+| onClose  | 关闭时的回调     | (e) => void | -      |
+| visible  | 是否显示标签     | boolean     | `true` |
 
 ### Tag.CheckableTag
 

components/transfer/__tests__/customize.test.js

@@ -13,12 +13,12 @@ describe('Transfer.Customize', () => {
     errorSpy.mockRestore();
   });
 
-  it('should warning use body', () => {
-    mount(<Transfer body={() => null} />);
+  it('props#body doesnot work anymore', () => {
+    const body = jest.fn();
+    mount(<Transfer body={body} />);
 
-    expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Transfer] `body` is internal usage and will bre removed, please use `children` instead.',
-    );
+    expect(errorSpy.mock.calls.length).toBe(0);
+    expect(body).not.toHaveBeenCalled();
   });
 
   describe('deprecated function', () => {
@@ -48,30 +48,5 @@ describe('Transfer.Customize', () => {
         </Transfer>,
       );
     });
-
-    it('should warn if called in body', () => {
-      let init = true;
-
-      mount(
-        <Transfer
-          {...commonProps}
-          body={({ handleSelect, handleSelectAll }) => {
-            if (init) {
-              handleSelect('', true);
-              expect(errorSpy).toHaveBeenCalledWith(
-                'Warning: [antd: Transfer] `handleSelect` will be removed, please use `onSelect` instead.',
-              );
-              errorSpy.mockReset();
-              handleSelectAll([], true);
-              expect(errorSpy).toHaveBeenCalledWith(
-                'Warning: [antd: Transfer] `handleSelectAll` will be removed, please use `onSelectAll` instead.',
-              );
-            }
-            init = false;
-            return null;
-          }}
-        />,
-      );
-    });
   });
 });

components/transfer/__tests__/index.test.js

@@ -245,10 +245,19 @@ describe('Transfer', () => {
     ).toEqual('Nothing');
   });
 
-  it('should display the correct locale using old API', () => {
+  it('should display the correct locale and ignore old API', () => {
     const emptyProps = { dataSource: [], selectedKeys: [], targetKeys: [] };
     const locale = { notFoundContent: 'old1', searchPlaceholder: 'old2' };
-    const wrapper = mount(<Transfer {...listCommonProps} {...emptyProps} {...locale} showSearch />);
+    const newLocalProp = { notFoundContent: 'new1', searchPlaceholder: 'new2' };
+    const wrapper = mount(
+      <Transfer
+        {...listCommonProps}
+        {...emptyProps}
+        {...locale}
+        locale={newLocalProp}
+        showSearch
+      />,
+    );
 
     expect(
       wrapper
@@ -257,7 +266,7 @@ describe('Transfer', () => {
         .find('.ant-transfer-list-search')
         .at(0)
         .prop('placeholder'),
-    ).toEqual('old2');
+    ).toEqual('new2');
 
     expect(
       wrapper
@@ -266,9 +275,9 @@ describe('Transfer', () => {
         .find('.ant-transfer-list-body-not-found')
         .at(0)
         .text(),
-    ).toEqual('old1');
+    ).toEqual('new1');
 
-    expect(consoleErrorSpy).toHaveBeenCalledWith(
+    expect(consoleErrorSpy).not.toHaveBeenCalledWith(
       'Warning: [antd: Transfer] `notFoundContent` and `searchPlaceholder` will be removed, please use `locale` instead.',
     );
     consoleErrorSpy.mockRestore();

components/transfer/__tests__/search.test.js

@@ -70,7 +70,7 @@ describe('Transfer.Search', () => {
     expect(onSearch).toHaveBeenCalledWith('left', '');
   });
 
-  it('legacy onSearchChange', () => {
+  it('legacy props#onSearchChange doesnot work anymore', () => {
     const onSearchChange = jest.fn();
 
     const wrapper = mount(
@@ -82,10 +82,7 @@ describe('Transfer.Search', () => {
       .at(0)
       .simulate('change', { target: { value: 'a' } });
 
-    expect(errorSpy.mock.calls[0][0]).toMatch(
-      'Warning: [antd: Transfer] `onSearchChange` is deprecated. Please use `onSearch` instead.',
-    );
-    expect(onSearchChange.mock.calls[0][0]).toEqual('left');
-    expect(onSearchChange.mock.calls[0][1].target.value).toEqual('a');
+    expect(errorSpy.mock.calls.length).toBe(0);
+    expect(onSearchChange).not.toHaveBeenCalled();
   });
 });