merge feature into master

components/image/__tests__/__snapshots__/demo.test.js.snap

@@ -156,6 +156,55 @@ exports[`renders ./components/image/demo/placeholder.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/image/demo/preview-mask.md correctly 1`] = `
+<div
+  class="ant-image"
+  style="width:96px"
+>
+  <img
+    class="ant-image-img"
+    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+  />
+  <div
+    class="ant-image-mask customize-mask"
+  >
+    <div
+      class="ant-space ant-space-vertical ant-space-align-center"
+    >
+      <div
+        class="ant-space-item"
+        style="margin-bottom:8px"
+      >
+        <span
+          aria-label="zoom-in"
+          class="anticon anticon-zoom-in"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="zoom-in"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
+            />
+          </svg>
+        </span>
+      </div>
+      <div
+        class="ant-space-item"
+      >
+        示例
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/image/demo/previewGroup.md correctly 1`] = `
 Array [
   <div

components/image/demo/preview-mask.md

@@ -0,0 +1,51 @@
+---
+order: 99
+title:
+  zh-CN: 自定义预览文本
+  en-US: Custom preview mask
+debug: true
+---
+
+## zh-CN
+
+自定义预览文本。
+
+## en-US
+
+Custom preview mask.
+
+```tsx
+import React from 'react';
+import { Image, Space } from 'antd';
+import { ZoomInOutlined } from '@ant-design/icons';
+
+function ImageDemo() {
+  return (
+    <Image
+      width={96}
+      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+      preview={{
+        maskClassName: 'customize-mask',
+        mask: (
+          <Space direction="vertical" align="center">
+            <ZoomInOutlined />
+            示例
+          </Space>
+        ),
+      }}
+    />
+  );
+}
+
+ReactDOM.render(<ImageDemo />, mountNode);
+```
+
+```css
+.customize-mask {
+  opacity: 1;
+  font-size: 20px;
+}
+.customize-mask .anticon {
+  font-size: 32px;
+}
+```

components/image/index.en-US.md

@@ -33,6 +33,8 @@ Previewable image.
   onVisibleChange?: (visible, prevVisible) => void;
   getContainer?: string | HTMLElement | (() => HTMLElement); // V4.8.0
   src?: string; // V4.10.0
+  mask?: ReactNode; // V4.9.0
+  maskClassName?: string; // V4.11.0
 }
 ```
 

components/image/index.zh-CN.md

@@ -34,6 +34,8 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
   onVisibleChange?: (visible, prevVisible) => void;
   getContainer?: string | HTMLElement | (() => HTMLElement); // V4.8.0
   src?: string; // V4.10.0
+  mask?: ReactNode; // V4.9.0
+  maskClassName?: string; // V4.11.0
 }
 ```
 

components/table/demo/custom-filter-panel.md

@@ -9,6 +9,8 @@ title:
 
 通过 `filterDropdown` 自定义的列筛选功能，并实现一个搜索列的示例。
 
+给函数 `confirm` 添加 `boolean` 类型参数 `closeDropdown`，是否关闭筛选菜单，默认为 `true`。
+
 ## en-US
 
 Implement a customized column search example via `filterDropdown`.
@@ -77,6 +79,20 @@ class App extends React.Component {
           <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
             Reset
           </Button>
+          <Button
+            type="link"
+            size="small"
+            onClick={() => {
+              confirm({ closeDropdown: false });
+              console.log('1234');
+              this.setState({
+                searchText: selectedKeys[0],
+                searchedColumn: dataIndex,
+              });
+            }}
+          >
+            Filter
+          </Button>
         </Space>
       </div>
     ),

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -8,7 +8,14 @@ import Checkbox from '../../../checkbox';
 import Radio from '../../../radio';
 import Dropdown from '../../../dropdown';
 import Empty from '../../../empty';
-import { ColumnType, ColumnFilterItem, Key, TableLocale, GetPopupContainer } from '../../interface';
+import {
+  ColumnType,
+  ColumnFilterItem,
+  Key,
+  TableLocale,
+  GetPopupContainer,
+  FilterConfirmProps,
+} from '../../interface';
 import FilterDropdownMenuWrapper from './FilterWrapper';
 import { FilterState } from '.';
 import useSyncState from '../../../_util/hooks/useSyncState';
@@ -160,8 +167,6 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
 
   // ======================= Submit ========================
   const internalTriggerFilter = (keys: Key[] | undefined | null) => {
-    triggerVisible(false);
-
     const mergedKeys = keys && keys.length ? keys : null;
     if (mergedKeys === null && (!filterState || !filterState.filteredKeys)) {
       return null;
@@ -179,14 +184,21 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
   };
 
   const onConfirm = () => {
+    triggerVisible(false);
     internalTriggerFilter(getFilteredKeysSync());
   };
 
   const onReset = () => {
     setFilteredKeysSync([]);
+    triggerVisible(false);
     internalTriggerFilter([]);
   };
 
+  const doFilter = (param: FilterConfirmProps = { closeDropdown: true }) => {
+    triggerVisible(!param.closeDropdown);
+    internalTriggerFilter(getFilteredKeysSync());
+  };
+
   const onVisibleChange = (newVisible: boolean) => {
     if (newVisible && propFilteredKeys !== undefined) {
       // Sync filteredKeys on appear in controlled mode (propFilteredKeys !== undefiend)
@@ -213,7 +225,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
       prefixCls: `${dropdownPrefixCls}-custom`,
       setSelectedKeys: (selectedKeys: Key[]) => onSelectKeys({ selectedKeys }),
       selectedKeys: getFilteredKeysSync(),
-      confirm: onConfirm,
+      confirm: doFilter,
       clearFilters: onReset,
       filters: column.filters,
       visible: mergedVisible,

components/table/interface.tsx

@@ -67,11 +67,15 @@ export type ColumnTitle<RecordType> =
   | React.ReactNode
   | ((props: ColumnTitleProps<RecordType>) => React.ReactNode);
 
+export interface FilterConfirmProps {
+  closeDropdown: boolean;
+}
+
 export interface FilterDropdownProps {
   prefixCls: string;
   setSelectedKeys: (selectedKeys: React.Key[]) => void;
   selectedKeys: React.Key[];
-  confirm: () => void;
+  confirm: (param: FilterConfirmProps) => void;
   clearFilters?: () => void;
   filters?: ColumnFilterItem[];
   visible: boolean;

package.json

@@ -124,7 +124,7 @@
     "rc-drawer": "~4.2.0",
     "rc-dropdown": "~3.2.0",
     "rc-field-form": "~1.17.3",
-    "rc-image": "~5.0.2",
+    "rc-image": "~5.1.1",
     "rc-input-number": "~6.1.0",
     "rc-mentions": "~1.5.0",
     "rc-menu": "~8.10.0",