fix: Transfer showSelectAll={false} should hide dropdown (#31746)

close #31728

components/transfer/__tests__/__snapshots__/demo.test.js.snap

@@ -3089,6 +3089,21 @@ Array [
       <div
         class="ant-transfer-list-header"
       >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
         <span
           aria-label="down"
           class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
@@ -3791,6 +3806,21 @@ Array [
       <div
         class="ant-transfer-list-header"
       >
+        <label
+          class="ant-checkbox-wrapper ant-transfer-list-checkbox"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+        </label>
         <span
           aria-label="down"
           class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
@@ -4200,25 +4230,6 @@ exports[`renders ./components/transfer/demo/tree-transfer.md correctly 1`] = `
     <div
       class="ant-transfer-list-header"
     >
-      <span
-        aria-label="down"
-        class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="down"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-          />
-        </svg>
-      </span>
       <span
         class="ant-transfer-list-header-selected"
       >
@@ -4507,25 +4518,6 @@ exports[`renders ./components/transfer/demo/tree-transfer.md correctly 1`] = `
     <div
       class="ant-transfer-list-header"
     >
-      <span
-        aria-label="down"
-        class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="down"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-          />
-        </svg>
-      </span>
       <span
         class="ant-transfer-list-header-selected"
       >

components/transfer/__tests__/dropdown.test.js

@@ -72,6 +72,12 @@ describe('Transfer.Dropdown', () => {
     jest.useRealTimers();
   });
 
+  it('should hide checkbox and dropdown icon when showSelectAll={false}', () => {
+    const wrapper = mount(<Transfer {...listProps} showSelectAll={false} />);
+    expect(wrapper.find('.ant-transfer-list-header-dropdown').length).toBe(0);
+    expect(wrapper.find('.ant-transfer-list-header .ant-transfer-list-checkbox').length).toBe(0);
+  });
+
   describe('select invert', () => {
     [
       { name: 'with pagination', props: listProps, index: 2, keys: ['c', 'd'] },

components/transfer/demo/table-transfer.md

@@ -19,7 +19,7 @@ import difference from 'lodash/difference';
 
 // Customize Table Transfer
 const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
-  <Transfer {...restProps} showSelectAll={false}>
+  <Transfer {...restProps}>
     {({
       direction,
       filteredItems,

components/transfer/list.tsx

@@ -75,7 +75,7 @@ interface TransferListState {
 }
 
 export default class TransferList<
-  RecordType extends KeyWiseTransferItem
+  RecordType extends KeyWiseTransferItem,
 > extends React.PureComponent<TransferListProps<RecordType>, TransferListState> {
   static defaultProps = {
     dataSource: [],
@@ -234,16 +234,20 @@ export default class TransferList<
     );
   }
 
-  getCheckBox(
+  getCheckBox({
-    filteredItems: RecordType[],
+    filteredItems,
-    onItemSelectAll: (dataSource: string[], checkAll: boolean) => void,
+    onItemSelectAll,
-    showSelectAll?: boolean,
+    disabled,
-    disabled?: boolean,
+    prefixCls,
-    prefixCls?: string,
+  }: {
-  ): false | JSX.Element {
+    filteredItems: RecordType[];
+    onItemSelectAll: (dataSource: string[], checkAll: boolean) => void;
+    disabled?: boolean;
+    prefixCls?: string;
+  }): false | JSX.Element {
     const checkStatus = this.getCheckStatus(filteredItems);
     const checkedAll = checkStatus === 'all';
-    const checkAllCheckbox = showSelectAll !== false && (
+    const checkAllCheckbox = (
       <Checkbox
         disabled={disabled}
         checked={checkedAll}
@@ -311,7 +315,7 @@ export default class TransferList<
       renderList,
       onItemSelectAll,
       onItemRemove,
-      showSelectAll,
+      showSelectAll = true,
       showRemove,
       pagination,
     } = this.props;
@@ -349,7 +353,7 @@ export default class TransferList<
     const checkAllCheckbox =
       !showRemove &&
       !pagination &&
-      this.getCheckBox(filteredItems, onItemSelectAll, showSelectAll, disabled, prefixCls);
+      this.getCheckBox({ filteredItems, onItemSelectAll, disabled, prefixCls });
 
     let menu: React.ReactElement | null = null;
     if (showRemove) {
@@ -444,8 +448,12 @@ export default class TransferList<
       <div className={listCls} style={style}>
         {/* Header */}
         <div className={`${prefixCls}-header`}>
-          {checkAllCheckbox}
+          {showSelectAll ? (
-          {dropdown}
+            <>
+              {checkAllCheckbox}
+              {dropdown}
+            </>
+          ) : null}
           <span className={`${prefixCls}-header-selected`}>
             {this.getSelectAllLabel(checkedKeys.length, filteredItems.length)}
           </span>

components/transfer/style/customize.less

@@ -17,6 +17,11 @@
       border: 0;
       border-radius: 0;
 
+      .@{table-prefix-cls}-selection-column {
+        width: 40px;
+        min-width: 40px;
+      }
+
       > .@{table-prefix-cls}-content {
         // Header background color
         > .@{table-prefix-cls}-body > table > .@{table-prefix-cls}-thead > tr > th {