diff --git a/components/transfer/__tests__/search.test.tsx b/components/transfer/__tests__/search.test.tsx index cf7ac774873b..69f51c8407e8 100644 --- a/components/transfer/__tests__/search.test.tsx +++ b/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( + , + ); + + 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', + ); + }); }); diff --git a/components/transfer/index.en-US.md b/components/transfer/index.en-US.md index 9d2931b68505..2455c1b67cb3 100644 --- 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, (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` } | | diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index 4839f72e5fc9..bc8401dd9c95 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -90,7 +90,7 @@ export interface TransferProps { titles?: React.ReactNode[]; operations?: string[]; showSearch?: boolean; - filterOption?: (inputValue: string, item: RecordType) => boolean; + filterOption?: (inputValue: string, item: RecordType, direction: TransferDirection) => boolean; locale?: Partial; footer?: ( props: TransferListProps, diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md index 4a61c6304be3..a06ab72715a7 100644 --- 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` `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: `请输入搜索内容` } | | diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx index e076024acb69..80e28caba9f4 100644 --- a/components/transfer/list.tsx +++ b/components/transfer/list.tsx @@ -48,7 +48,7 @@ export interface TransferListProps 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) => void; @@ -128,7 +128,7 @@ const TransferList = ( const matchFilter = (text: string, item: RecordType) => { if (filterOption) { - return filterOption(filterValue, item); + return filterOption(filterValue, item, direction); } return text.includes(filterValue); };