From a3320dde296112c306170798ddfd942f87c77628 Mon Sep 17 00:00:00 2001
From: WwwHhhYran <62340860+WwwHhhYran@users.noreply.github.com>
Date: Fri, 6 Dec 2024 00:06:44 +0800
Subject: [PATCH] fix(transfer): transfer operation button should be disabled
 when all the checked items are disabled (#51784)

---
 components/transfer/ListItem.tsx             |  2 +-
 components/transfer/__tests__/index.test.tsx | 11 +++++++++++
 components/transfer/__tests__/list.test.tsx  | 17 +++++++++++++++++
 components/transfer/index.tsx                |  8 ++++++--
 components/transfer/list.tsx                 | 12 ++++++++----
 5 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/components/transfer/ListItem.tsx b/components/transfer/ListItem.tsx
index 45d7919857..9af641abdc 100644
--- a/components/transfer/ListItem.tsx
+++ b/components/transfer/ListItem.tsx
@@ -34,7 +34,7 @@ const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<R
 
   const className = classNames(`${prefixCls}-content-item`, {
     [`${prefixCls}-content-item-disabled`]: disabled || item.disabled,
-    [`${prefixCls}-content-item-checked`]: checked,
+    [`${prefixCls}-content-item-checked`]: checked && !item.disabled,
   });
 
   let title: string | undefined;
diff --git a/components/transfer/__tests__/index.test.tsx b/components/transfer/__tests__/index.test.tsx
index 112a2c37b5..8f92f42047 100644
--- a/components/transfer/__tests__/index.test.tsx
+++ b/components/transfer/__tests__/index.test.tsx
@@ -663,6 +663,17 @@ describe('Transfer', () => {
     expect(getByText('1 of 2')).toBeTruthy();
   });
 
+  it('should disable transfer operation button when some items are set to selected but also disabled', () => {
+    const dataSource = listDisabledProps.dataSource.map((d) => ({
+      ...d,
+      disabled: true,
+    }));
+    const { container } = render(<Transfer {...listDisabledProps} dataSource={dataSource} />);
+    expect(
+      container.querySelectorAll<HTMLDivElement>('.ant-transfer-operation button').item(0),
+    ).toBeDisabled();
+  });
+
   describe('pagination', () => {
     it('boolean', async () => {
       const { getByTitle } = render(<Transfer {...listDisabledProps} pagination />);
diff --git a/components/transfer/__tests__/list.test.tsx b/components/transfer/__tests__/list.test.tsx
index f00033dac6..f2c03d45fa 100644
--- a/components/transfer/__tests__/list.test.tsx
+++ b/components/transfer/__tests__/list.test.tsx
@@ -66,6 +66,23 @@ describe('Transfer.List', () => {
     );
   });
 
+  it('should disabled all select checkbox when each item of dataSource is disabled', () => {
+    const allDisabledListProps: TransferListProps<KeyWiseTransferItem> = {
+      ...listCommonProps,
+      dataSource: listCommonProps.dataSource.map((d) => ({
+        ...d,
+        disabled: true,
+      })),
+    };
+    const { container } = render(<List {...allDisabledListProps} />);
+    expect(container.querySelector<HTMLLabelElement>('label.ant-checkbox-wrapper')).toHaveClass(
+      'ant-checkbox-wrapper-disabled',
+    );
+    expect(container.querySelector<HTMLSpanElement>('span.ant-checkbox')).toHaveClass(
+      'ant-checkbox-disabled',
+    );
+  });
+
   it('support custom dropdown Icon', () => {
     const { container } = render(
       <List
diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx
index 911ca8fb11..a4100db003 100644
--- a/components/transfer/index.tsx
+++ b/components/transfer/index.tsx
@@ -404,8 +404,12 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
   const mergedStatus = getMergedStatus(status, customStatus);
   const mergedPagination = !children && pagination;
 
-  const leftActive = targetSelectedKeys.length > 0;
-  const rightActive = sourceSelectedKeys.length > 0;
+  const leftActive =
+    rightDataSource.filter((d) => targetSelectedKeys.includes(d.key as TransferKey) && !d.disabled)
+      .length > 0;
+  const rightActive =
+    leftDataSource.filter((d) => sourceSelectedKeys.includes(d.key as TransferKey) && !d.disabled)
+      .length > 0;
 
   const cls = classNames(
     prefixCls,
diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx
index f9c92a6853..56fffbfceb 100644
--- a/components/transfer/list.tsx
+++ b/components/transfer/list.tsx
@@ -187,8 +187,12 @@ const TransferList = <RecordType extends KeyWiseTransferItem>(
     return [filterItems, filterRenderItems] as const;
   }, [dataSource, filterValue]);
 
+  const checkedActiveItems = useMemo<RecordType[]>(() => {
+    return filteredItems.filter((item) => checkedKeys.includes(item.key) && !item.disabled);
+  }, [checkedKeys, filteredItems]);
+
   const checkStatus = useMemo<string>(() => {
-    if (checkedKeys.length === 0) {
+    if (checkedActiveItems.length === 0) {
       return 'none';
     }
     const checkedKeysMap = groupKeysMap(checkedKeys);
@@ -196,7 +200,7 @@ const TransferList = <RecordType extends KeyWiseTransferItem>(
       return 'all';
     }
     return 'part';
-  }, [checkedKeys, filteredItems]);
+  }, [checkedKeys, checkedActiveItems]);
 
   const listBody = useMemo<React.ReactNode>(() => {
     const search = showSearch ? (
@@ -254,7 +258,7 @@ const TransferList = <RecordType extends KeyWiseTransferItem>(
 
   const checkBox = (
     <Checkbox
-      disabled={dataSource.length === 0 || disabled}
+      disabled={dataSource.filter((d) => !d.disabled).length === 0 || disabled}
       checked={checkStatus === 'all'}
       indeterminate={checkStatus === 'part'}
       className={`${prefixCls}-checkbox`}
@@ -380,7 +384,7 @@ const TransferList = <RecordType extends KeyWiseTransferItem>(
           </>
         ) : null}
         <span className={`${prefixCls}-header-selected`}>
-          {getSelectAllLabel(checkedKeys.length, filteredItems.length)}
+          {getSelectAllLabel(checkedActiveItems.length, filteredItems.length)}
         </span>
         <span className={`${prefixCls}-header-title`}>{titleText}</span>
       </div>