feat✨(transfer):Add a new direction parameter for filterOption func… (#44417)

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

* docs📝(transfer):  update filterOption API

* test(transfer): Add the filterOption parameter  test

* docs📝(transfer): update filterOption API

* test(transfer):  Update the filterOption parameter test

* docs📝(transfer): update filterOption API

* test(transfer):  Update the filterOption parameter test

* test(transfer):  Update the filterOption parameter test

* test(transfer):  Update the filterOption parameter test

* Update components/transfer/index.en-US.md

Signed-off-by: Amumu <yoyo837@hotmail.com>

---------

Signed-off-by: Amumu <yoyo837@hotmail.com>
Co-authored-by: yuanzhian <yuanzhian@cai-inc.com>
Co-authored-by: Amumu <yoyo837@hotmail.com>

components/transfer/__tests__/search.test.tsx

@@ -85,4 +85,49 @@ describe('Transfer.Search', () => {
 
     expect(filterOption).toHaveBeenCalledTimes(dataSource.length);
   });
+
+  it('The filterOption parameter is correct when use input in search box', () => {
+    const filterOption = jest.fn();
+
+    const { container } = testLibRender(
+      <Transfer 
+        filterOption={filterOption} 
+        dataSource={dataSource} 
+        targetKeys={['b']}
+        showSearch 
+      />,
+    );
+
+    fireEvent.change(
+      container
+        ?.querySelectorAll('.ant-transfer-list')
+        ?.item(0)
+        ?.querySelector('input[type="text"]')!, 
+      { target: { value: 'a' } },
+    );
+    expect(filterOption).toHaveBeenNthCalledWith(
+      1,
+      'a',
+      { key: 'a', title: 'a', description: 'a' },
+      'left',
+    );
+    expect(filterOption).toHaveBeenLastCalledWith(
+      'a',
+      { key: 'c', title: 'c', description: 'c' },
+      'left',
+    );
+    filterOption.mockReset();
+    fireEvent.change(
+      container
+        ?.querySelectorAll('.ant-transfer-list')
+        ?.item(1)
+        ?.querySelector('input[type="text"]')!, 
+      { target: { value: 'b' } },
+    );
+    expect(filterOption).toHaveBeenCalledWith(
+      'b',
+      { key: 'b', title: 'b', description: 'b' },
+      'right',
+    );
+  });
 });

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, (add `direction` support since 5.9.0+) | (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` } |  |

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>,

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` `direction` 三个参数，(`direction` 自5.9.0+支持)，当 `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: `请输入搜索内容` } |  |

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);
   };