feat✨(transfer):Add a new direction parameter for filterOption function

ant-design · Aug 25, 2023 · 97ab82e · 97ab82e
1 parent d373bf3
commit 97ab82e
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/components/transfer/index.en-US.md b/components/transfer/index.en-US.md
@@ -43,7 +43,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop | [RecordType extends TransferItem = TransferItem](https://github.com/ant-design/ant-design/blob/1bf0bab2a7bc0a774119f501806e3e0e3a6ba283/components/transfer/index.tsx#L12)\[] | \[] |  |
 | disabled | Whether disabled transfer | boolean | false |  |
 | selectionsIcon | custom dropdown icon | React.ReactNode |  | 5.8.0 |
-| filterOption | A function to determine whether an item should show in search result list, only works when searching | (inputValue, option): boolean | - |  |
+| filterOption | A function to determine whether an item should show in search result list, only works when searching | (inputValue, option, direction: `left` \| `right`): boolean | - |  |
 | footer | A function used for rendering the footer | (props, { direction }) => ReactNode | - | direction: 4.17.0 |
 | listStyle | A custom CSS style used for rendering the transfer columns | object \| ({direction: `left` \| `right`}) => object | - |  |
 | locale | The i18n text including filter, empty text, item unit, etc | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode \| ReactNode[]; } | { itemUnit: `item`, itemsUnit: `items`, notFoundContent: `The list is empty`, searchPlaceholder: `Search here` } |  |

diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx
@@ -90,7 +90,7 @@ export interface TransferProps<RecordType> {
   titles?: React.ReactNode[];
   operations?: string[];
   showSearch?: boolean;
-  filterOption?: (inputValue: string, item: RecordType) => boolean;
+  filterOption?: (inputValue: string, item: RecordType, direction: TransferDirection) => boolean;
   locale?: Partial<TransferLocale>;
   footer?: (
     props: TransferListProps<RecordType>,

diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md
@@ -46,7 +46,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yv12S4sSRAEAAA
 | dataSource | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外 | [RecordType extends TransferItem = TransferItem](https://github.com/ant-design/ant-design/blob/1bf0bab2a7bc0a774119f501806e3e0e3a6ba283/components/transfer/index.tsx#L12)\[] | \[] |  |
 | disabled | 是否禁用 | boolean | false |  |
 | selectionsIcon | 自定义下拉菜单图标 | React.ReactNode |  | 5.8.0 |
-| filterOption | 根据搜索内容进行筛选，接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | (inputValue, option): boolean | - |  |
+| filterOption | 根据搜索内容进行筛选，接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | (inputValue, option, direction: `left` \| `right`): boolean | - |  |
 | footer | 底部渲染函数 | (props, { direction }) => ReactNode | - | direction: 4.17.0 |
 | listStyle | 两个穿梭框的自定义样式 | object\|({direction: `left` \| `right`}) => object | - |  |
 | locale | 各种语言 | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode \| ReactNode[]; } | { itemUnit: `项`, itemsUnit: `项`, searchPlaceholder: `请输入搜索内容` } |  |

diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx
@@ -48,7 +48,7 @@ export interface TransferListProps<RecordType> extends TransferLocale {
   prefixCls: string;
   titleText: React.ReactNode;
   dataSource: RecordType[];
-  filterOption?: (filterText: string, item: RecordType) => boolean;
+  filterOption?: (filterText: string, item: RecordType, direction: TransferDirection) => boolean;
   style?: React.CSSProperties;
   checkedKeys: string[];
   handleFilter: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -128,7 +128,7 @@ const TransferList = <RecordType extends KeyWiseTransferItem>(
 
   const matchFilter = (text: string, item: RecordType) => {
     if (filterOption) {
-      return filterOption(filterValue, item);
+      return filterOption(filterValue, item, direction);
     }
     return text.includes(filterValue);
   };