feat:transfer开启showSearch漏出input相关配置 (#52125)

* feat:对穿梭框的搜索框漏出属性配置

* 修改文案

* 恢复误删的文案

* feat：拓展Transfer 的showSearch属性，使配置后漏出Input相关的属性

* 调整格式

* showSearch不支持数组方式

* 修改单测

* 修改判断写法

* 修改单测写法

---------

Co-authored-by: 刘欢 <lh01217311@antgroup.com>

components/transfer/__tests__/index.test.tsx

@@ -6,8 +6,8 @@ import type { SelectAllLabel, TransferProps } from '..';
 import Transfer from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import Button from '../../button';
 import { waitFakeTimer } from '../../../tests/utils';
+import Button from '../../button';
 
 const listCommonProps: {
   dataSource: { key: string; title: string; disabled?: boolean }[];
@@ -843,6 +843,25 @@ describe('Transfer', () => {
       ).toBeChecked();
     });
   });
+
+  it('showSearch with single object', () => {
+    const emptyProps = { dataSource: [], selectedKeys: [], targetKeys: [] };
+    const locale = { itemUnit: 'Person', notFoundContent: 'Nothing' };
+    const { container } = render(
+      <Transfer
+        {...listCommonProps}
+        {...emptyProps}
+        showSearch={{ placeholder: 'Search placeholder', defaultValue: 'values' }}
+        locale={locale}
+      />,
+    );
+    const searchInputs = container.querySelectorAll('.ant-transfer-list-search input');
+    expect(searchInputs).toHaveLength(2);
+    searchInputs.forEach((input) => {
+      expect(input.getAttribute('placeholder')).toBe('Search placeholder');
+      expect(input).toHaveValue('values');
+    });
+  });
 });
 
 describe('immutable data', () => {

components/transfer/index.en-US.md

@@ -53,7 +53,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a React element and `value` is for title | (record) => ReactNode | - |  |
 | selectAllLabels | A set of customized labels for select all checkboxes on the header | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)\[] | - |  |
 | selectedKeys | A set of keys of selected items | string\[] \| number\[] | \[] |  |
-| showSearch | If included, a search box is shown on each column | boolean | false |  |
+| showSearch | If included, a search box is shown on each column | boolean \| { placeholder:string,defaultValue:string } | false |  |
 | showSelectAll | Show select all checkbox on the header | boolean | true |  |
 | status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
 | targetKeys | A set of keys of elements that are listed on the right column | string\[] \| number\[] | \[] |  |

components/transfer/index.tsx

@@ -74,6 +74,11 @@ export interface TransferLocale {
   removeCurrent?: string;
 }
 
+export interface TransferSearchOption {
+  placeholder?: string;
+  defaultValue?: string;
+}
+
 export interface TransferProps<RecordType = any> {
   prefixCls?: string;
   className?: string;
@@ -94,7 +99,7 @@ export interface TransferProps<RecordType = any> {
   operationStyle?: CSSProperties;
   titles?: React.ReactNode[];
   operations?: string[];
-  showSearch?: boolean;
+  showSearch?: boolean | TransferSearchOption;
   filterOption?: (inputValue: string, item: RecordType, direction: TransferDirection) => boolean;
   locale?: Partial<TransferLocale>;
   footer?: (

components/transfer/index.zh-CN.md

@@ -56,7 +56,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*g9vUQq2nkpEAAA
 | render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 ReactElement。或者返回一个普通对象，其中 `label` 字段为 ReactElement，`value` 字段为 title | (record) => ReactNode | - |  |
 | selectAllLabels | 自定义顶部多选框标题的集合 | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)\[] | - |  |
 | selectedKeys | 设置哪些项应该被选中 | string\[] \| number\[] | \[] |  |
-| showSearch | 是否显示搜索框 | boolean | false |  |
+| showSearch | 是否显示搜索框，或可对两侧搜索框进行配置 | boolean \| { placeholder:string,defaultValue:string } | false |  |
 | showSelectAll | 是否展示全选勾选框 | boolean | true |  |
 | status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
 | targetKeys | 显示在右侧框数据的 key 集合 | string\[] \| number\[] | \[] |  |

components/transfer/list.tsx

@@ -14,6 +14,7 @@ import type {
   SelectAllLabel,
   TransferDirection,
   TransferLocale,
+  TransferSearchOption,
 } from './index';
 import type { PaginationType, TransferKey } from './interface';
 import type { ListBodyRef, TransferListBodyProps } from './ListBody';
@@ -62,7 +63,7 @@ export interface TransferListProps<RecordType> extends TransferLocale {
   handleClear: () => void;
   /** Render item */
   render?: (item: RecordType) => RenderResult;
-  showSearch?: boolean;
+  showSearch?: boolean | TransferSearchOption;
   searchPlaceholder: string;
   itemUnit: string;
   itemsUnit: string;
@@ -83,6 +84,19 @@ export interface TransferListProps<RecordType> extends TransferLocale {
 
 export interface TransferCustomListBodyProps<T> extends TransferListBodyProps<T> {}
 
+const useShowSearchOption = (showSearch: boolean | TransferSearchOption) => {
+  if (showSearch && typeof showSearch === 'object') {
+    return {
+      ...showSearch,
+      defaultValue: showSearch.defaultValue || '',
+    };
+  }
+  return {
+    defaultValue: '',
+    placeholder: '',
+  };
+};
+
 const TransferList = <RecordType extends KeyWiseTransferItem>(
   props: TransferListProps<RecordType>,
 ) => {
@@ -119,8 +133,8 @@ const TransferList = <RecordType extends KeyWiseTransferItem>(
     filterOption,
     render = defaultRender,
   } = props;
-
-  const [filterValue, setFilterValue] = useState<string>('');
+  const searchOptions = useShowSearchOption(showSearch);
+  const [filterValue, setFilterValue] = useState<string>(searchOptions.defaultValue);
   const listBodyRef = useRef<ListBodyRef<RecordType>>({});
 
   const internalHandleFilter = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -209,7 +223,7 @@ const TransferList = <RecordType extends KeyWiseTransferItem>(
           prefixCls={`${prefixCls}-search`}
           onChange={internalHandleFilter}
           handleClear={internalHandleClear}
-          placeholder={searchPlaceholder}
+          placeholder={searchOptions.placeholder || searchPlaceholder}
           value={filterValue}
           disabled={disabled}
         />

components/transfer/search.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import SearchOutlined from '@ant-design/icons/SearchOutlined';
-
 import Input from '../input';
 
 export interface TransferSearchProps {
@@ -13,7 +12,14 @@ export interface TransferSearchProps {
 }
 
 const Search: React.FC<TransferSearchProps> = (props) => {
-  const { placeholder = '', value, prefixCls, disabled, onChange, handleClear } = props;
+  const {
+    placeholder = '',
+    value,
+    prefixCls,
+    disabled,
+    onChange,
+    handleClear,
+  } = props;
 
   const handleChange = React.useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {