fix(transfer): transfer operation button should be disabled when all the checked items are disabled (#51784)

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;

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 />);

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

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,

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>