Merge remote-tracking branch 'origin/feature' into next

README.md

@@ -47,7 +47,7 @@ An enterprise-class UI design language and React UI library.
 
 [![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://ant.design)
 
-English | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md)
+English | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md)
 
 ## ✨ Features
 

components/drawer/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import RcDrawer from 'rc-drawer';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';
-import { ConfigContext, DirectionType } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import { tuple } from '../_util/type';
 import useForceUpdate from '../_util/hooks/useForceUpdate';
 
@@ -64,22 +64,13 @@ export interface DrawerProps {
   footer?: React.ReactNode;
   footerStyle?: React.CSSProperties;
   level?: string | string[] | null | undefined;
-  levelMove?:
-    | ILevelMove
-    | ((e: { target: HTMLElement; open: boolean }) => ILevelMove);
-}
-
-export interface IDrawerState {
-  push?: boolean;
-}
-
-interface InternalDrawerProps extends DrawerProps {
-  direction: DirectionType;
+  levelMove?: ILevelMove | ((e: { target: HTMLElement; open: boolean }) => ILevelMove);
+  children?: React.ReactNode;
 }
 
 const defaultPushState: PushState = { distance: 180 };
 
-const Drawer = React.forwardRef<DrawerRef, InternalDrawerProps>(
+const Drawer = React.forwardRef<DrawerRef, DrawerProps>(
   (
     {
       width,
@@ -95,9 +86,7 @@ const Drawer = React.forwardRef<DrawerRef, InternalDrawerProps>(
       closeIcon = <CloseOutlined />,
       bodyStyle,
       drawerStyle,
-      prefixCls,
       className,
-      direction,
       visible,
       children,
       zIndex,
@@ -108,6 +97,8 @@ const Drawer = React.forwardRef<DrawerRef, InternalDrawerProps>(
       onClose,
       footer,
       footerStyle,
+      prefixCls: customizePrefixCls,
+      getContainer: customizeGetContainer,
       extra,
       ...rest
     },
@@ -118,6 +109,14 @@ const Drawer = React.forwardRef<DrawerRef, InternalDrawerProps>(
     const parentDrawer = React.useContext(DrawerContext);
     const destroyClose = React.useRef<boolean>(false);
 
+    const { getPopupContainer, getPrefixCls, direction } = React.useContext(ConfigContext);
+    const prefixCls = getPrefixCls('drawer', customizePrefixCls);
+    const getContainer =
+      // 有可能为 false，所以不能直接判断
+      customizeGetContainer === undefined && getPopupContainer
+        ? () => getPopupContainer(document.body)
+        : customizeGetContainer;
+
     React.useEffect(() => {
       // fix: delete drawer in child and re-render, no push started.
       // <Drawer>{show && <Drawer />}</Drawer>
@@ -320,6 +319,7 @@ const Drawer = React.forwardRef<DrawerRef, InternalDrawerProps>(
           showMask={mask}
           style={getRcDrawerStyle()}
           className={drawerClassName}
+          getContainer={getContainer}
         >
           {renderBody()}
         </RcDrawer>
@@ -330,30 +330,4 @@ const Drawer = React.forwardRef<DrawerRef, InternalDrawerProps>(
 
 Drawer.displayName = 'Drawer';
 
-const DrawerWrapper: React.FC<DrawerProps> = React.forwardRef<DrawerRef, DrawerProps>(
-  (props, ref) => {
-    const { prefixCls: customizePrefixCls, getContainer: customizeGetContainer } = props;
-    const { getPopupContainer, getPrefixCls, direction } = React.useContext(ConfigContext);
-
-    const prefixCls = getPrefixCls('drawer', customizePrefixCls);
-    const getContainer =
-      // 有可能为 false，所以不能直接判断
-      customizeGetContainer === undefined && getPopupContainer
-        ? () => getPopupContainer(document.body)
-        : customizeGetContainer;
-
-    return (
-      <Drawer
-        {...props}
-        ref={ref}
-        prefixCls={prefixCls}
-        getContainer={getContainer}
-        direction={direction}
-      />
-    );
-  },
-);
-
-DrawerWrapper.displayName = 'DrawerWrapper';
-
-export default DrawerWrapper;
+export default Drawer;

components/table/__tests__/Table.filter.test.js

@@ -2197,4 +2197,59 @@ describe('Table.filter', () => {
       expect(wrapper.find('Dropdown').first().props().visible).toBe(res2);
     });
   });
+
+  it('filterDropDown should support filterResetToDefaultFilteredValue', () => {
+    jest.useFakeTimers();
+    jest.spyOn(console, 'error').mockImplementation(() => undefined);
+
+    const columnFilter = {
+      ...column,
+      filterMode: 'tree',
+      filterSearch: true,
+      defaultFilteredValue: ['girl'],
+    };
+
+    let wrapper = mount(
+      createTable({
+        columns: [columnFilter],
+      }),
+    );
+    wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent);
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+    expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(1);
+    wrapper
+      .find(Checkbox)
+      .find('input')
+      .simulate('change', { target: { checked: true } });
+    expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(5);
+    wrapper.find('button.ant-btn-link').simulate('click', nativeEvent);
+    expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(0);
+
+    wrapper = mount(
+      createTable({
+        columns: [
+          {
+            ...columnFilter,
+            filterResetToDefaultFilteredValue: true,
+          },
+        ],
+      }),
+    );
+    wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent);
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+    wrapper
+      .find(Checkbox)
+      .find('input')
+      .simulate('change', { target: { checked: true } });
+    expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(5);
+    wrapper.find('button.ant-btn-link').simulate('click', nativeEvent);
+    expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(1);
+    expect(wrapper.find('.ant-tree-checkbox-checked+span').text()).toBe('Girl');
+  });
 });

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -111,6 +111,7 @@ export interface FilterDropdownProps<RecordType> {
   triggerFilter: (filterState: FilterState<RecordType>) => void;
   locale: TableLocale;
   getPopupContainer?: GetPopupContainer;
+  filterResetToDefaultFilteredValue?: boolean;
 }
 
 function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
@@ -130,7 +131,12 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
     getPopupContainer,
   } = props;
 
-  const { filterDropdownVisible, onFilterDropdownVisibleChange } = column;
+  const {
+    filterDropdownVisible,
+    onFilterDropdownVisibleChange,
+    filterResetToDefaultFilteredValue,
+    defaultFilteredValue,
+  } = column;
   const [visible, setVisible] = React.useState(false);
 
   const filtered: boolean = !!(
@@ -231,8 +237,14 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
     if (closeDropdown) {
       triggerVisible(false);
     }
+
     setSearchValue('');
-    setFilteredKeysSync([]);
+
+    if (filterResetToDefaultFilteredValue) {
+      setFilteredKeysSync((defaultFilteredValue || []).map(key => String(key)));
+    } else {
+      setFilteredKeysSync([]);
+    }
   };
 
   const doFilter = ({ closeDropdown } = { closeDropdown: true }) => {

components/table/index.en-US.md

@@ -120,6 +120,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
 | colSpan | Span of this column's title | number | - |  |
 | dataIndex | Display field of the data record, support nest path by string array | string \| string\[] | - |  |
 | defaultFilteredValue | Default filtered values | string\[] | - |  |
+| filterResetToDefaultFilteredValue | click the reset button, whether to restore the default filter | boolean | false |  |
 | defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - |  |
 | editable | Whether column can be edited | boolean | false |  |
 | ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 |

components/table/index.zh-CN.md

@@ -127,6 +127,7 @@ const columns = [
 | colSpan | 表头列合并,设置为 0 时，不渲染 | number | - |  |
 | dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string \| string\[] | - |  |
 | defaultFilteredValue | 默认筛选值 | string\[] | - |  |
+| filterResetToDefaultFilteredValue | 点击重置按钮的时候，是否恢复默认筛选值 | boolean | false |  |
 | defaultSortOrder | 默认排序顺序 | `ascend` \| `descend` | - |  |
 | editable | 是否可编辑 | boolean | false |  |
 | ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |

components/table/interface.tsx

@@ -117,6 +117,7 @@ export interface ColumnType<RecordType> extends RcColumnType<RecordType> {
   onFilter?: (value: string | number | boolean, record: RecordType) => boolean;
   filterDropdownVisible?: boolean;
   onFilterDropdownVisibleChange?: (visible: boolean) => void;
+  filterResetToDefaultFilteredValue?: boolean;
 
   // Responsive
   responsive?: Breakpoint[];

components/typography/Base/index.tsx

@@ -27,7 +27,7 @@ export type BaseType = 'secondary' | 'success' | 'warning' | 'danger';
 
 interface CopyConfig {
   text?: string;
-  onCopy?: () => void;
+  onCopy?: (event?: React.MouseEvent<HTMLDivElement>) => void;
   icon?: React.ReactNode;
   tooltips?: boolean | React.ReactNode;
 }
@@ -207,7 +207,7 @@ const Base = React.forwardRef((props: InternalBlockProps, ref: any) => {
       setCopied(false);
     }, 3000);
 
-    copyConfig.onCopy?.();
+    copyConfig.onCopy?.(e);
   };
 
   React.useEffect(() => cleanCopyId, []);

components/typography/__tests__/copy.test.tsx

@@ -208,6 +208,18 @@ describe('Typography copy', () => {
       expect(onDivClick).not.toBeCalled();
     });
 
+    it('the first parameter of onCopy is the click event', () => {
+      function onCopy(e: React.MouseEvent<HTMLDivElement>) {
+        expect(e).not.toBeUndefined();
+      }
+      const wrapper = mount(
+        <Base component="p" copyable={{ onCopy }}>
+          test copy
+        </Base>,
+      );
+      wrapper.find('.ant-typography-copy').first().simulate('click');
+    });
+
     it('copy to clipboard', done => {
       const spy = jest.spyOn(copyObj, 'default');
       const originText = 'origin text.';

components/typography/index.en-US.md

@@ -71,7 +71,7 @@ Basic text writing, including headings, body text, lists, and more.
 
     {
       text: string,
-      onCopy: function,
+      onCopy: function(event),
       icon: ReactNode,
       tooltips: false | [ReactNode, ReactNode],
     }

components/typography/index.zh-CN.md

@@ -72,7 +72,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
 
     {
       text: string,
-      onCopy: function,
+      onCopy: function(event),
       icon: ReactNode,
       tooltips: false | [ReactNode, ReactNode],
     }