feat: Transfer support custom dropdown Icon (#43773)

* feat: Transfer support custom dropdown Icon

* fix

* fix

* test: add test case

* rename

components/transfer/__tests__/list.test.tsx

@@ -64,4 +64,18 @@ describe('Transfer.List', () => {
       'ant-checkbox-disabled',
     );
   });
+
+  it('support custom dropdown Icon', () => {
+    const { container } = render(
+      <List
+        {...listCommonProps}
+        selectionsIcon={<span className="test-dropdown-icon">test</span>}
+      />,
+    );
+    expect(
+      container?.querySelector<HTMLSpanElement>(
+        '.ant-transfer-list .ant-transfer-list-header .test-dropdown-icon',
+      ),
+    ).toBeTruthy();
+  });
 });

components/transfer/index.en-US.md

@@ -40,6 +40,7 @@ One or more elements can be selected from either column, one click on the proper
 | --- | --- | --- | --- | --- |
 | 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 | - |  |
 | 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 | - |  |

components/transfer/index.tsx

@@ -105,6 +105,7 @@ export interface TransferProps<RecordType> {
   oneWay?: boolean;
   pagination?: PaginationType;
   status?: InputStatus;
+  selectionsIcon?: React.ReactNode;
 }
 
 const Transfer = <RecordType extends TransferItem = TransferItem>(
@@ -130,6 +131,7 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
     prefixCls: customizePrefixCls,
     className,
     rootClassName,
+    selectionsIcon,
     filterOption,
     render,
     footer,
@@ -374,6 +376,7 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
         showSelectAll={showSelectAll}
         selectAllLabel={selectAllLabels[0]}
         pagination={mergedPagination}
+        selectionsIcon={selectionsIcon}
         {...listLocale}
       />
       <Operation
@@ -412,6 +415,7 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
         selectAllLabel={selectAllLabels[1]}
         showRemove={oneWay}
         pagination={mergedPagination}
+        selectionsIcon={selectionsIcon}
         {...listLocale}
       />
     </div>,

components/transfer/index.zh-CN.md

@@ -43,6 +43,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 | - |  |
 | footer | 底部渲染函数 | (props, { direction }) => ReactNode | - | direction: 4.17.0 |
 | listStyle | 两个穿梭框的自定义样式 | object\|({direction: `left` \| `right`}) => object | - |  |

components/transfer/list.tsx

@@ -34,6 +34,8 @@ function getEnabledItemKeys<RecordType extends KeyWiseTransferItem>(items: Recor
   return items.filter((data) => !data.disabled).map((data) => data.key);
 }
 
+const isValidIcon = (icon: React.ReactNode) => icon !== undefined;
+
 export interface RenderedItem<RecordType> {
   renderedText: string;
   renderedEl: React.ReactNode;
@@ -72,6 +74,7 @@ export interface TransferListProps<RecordType> extends TransferLocale {
   selectAllLabel?: SelectAllLabel;
   showRemove?: boolean;
   pagination?: PaginationType;
+  selectionsIcon?: React.ReactNode;
 }
 
 const TransferList = <RecordType extends KeyWiseTransferItem>(
@@ -99,6 +102,7 @@ const TransferList = <RecordType extends KeyWiseTransferItem>(
     itemsUnit,
     itemUnit,
     selectAllLabel,
+    selectionsIcon,
     footer,
     renderList,
     onItemSelectAll,
@@ -352,7 +356,7 @@ const TransferList = <RecordType extends KeyWiseTransferItem>(
 
   const dropdown: React.ReactNode = (
     <Dropdown className={`${prefixCls}-header-dropdown`} menu={{ items }} disabled={disabled}>
-      <DownOutlined />
+      {isValidIcon(selectionsIcon) ? selectionsIcon : <DownOutlined />}
     </Dropdown>
   );