fix(Transfer): Prioritize using the disabled property of the Transfer component (ant-design#56093)

Co-authored-by: afc163 <afc163@gmail.com>

Author: zenggpzqbx

components/transfer/ListBody.tsx

@@ -137,7 +137,7 @@ const TransferListBody: React.ForwardRefRenderFunction<
             onClick={onInternalClick}
             onRemove={onRemove}
             checked={selectedKeys.includes(item.key)}
-            disabled={globalDisabled || item.disabled}
+            disabled={globalDisabled}
           />
         ))}
       </ul>

components/transfer/ListItem.tsx

@@ -36,9 +36,9 @@ const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<R
     onRemove,
     showRemove,
   } = props;
-
+  const mergedDisabled = disabled || item?.disabled;
   const classes = clsx(`${prefixCls}-content-item`, classNames.item, {
-    [`${prefixCls}-content-item-disabled`]: disabled || item.disabled,
+    [`${prefixCls}-content-item-disabled`]: mergedDisabled,
     [`${prefixCls}-content-item-checked`]: checked && !item.disabled,
   });
 
@@ -70,7 +70,7 @@ const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<R
         {labelNode}
         <button
           type="button"
-          disabled={disabled || item.disabled}
+          disabled={mergedDisabled}
           className={`${prefixCls}-content-item-remove`}
           aria-label={contextLocale?.remove}
           onClick={() => onRemove?.(item)}
@@ -82,15 +82,15 @@ const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<R
   }
 
   // Default click to select
-  liProps.onClick = disabled || item.disabled ? undefined : (event) => onClick(item, event);
+  liProps.onClick = mergedDisabled ? undefined : (event) => onClick(item, event);
 
   return (
     <li {...liProps}>
       <Checkbox
         className={clsx(`${prefixCls}-checkbox`, classNames.itemIcon)}
         style={styles.itemIcon}
         checked={checked}
-        disabled={disabled || item.disabled}
+        disabled={mergedDisabled}
       />
       {labelNode}
     </li>

components/transfer/__tests__/index.test.tsx

@@ -8,6 +8,7 @@ import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { waitFakeTimer } from '../../../tests/utils';
 import Button from '../../button';
+import Checkbox from '../../checkbox';
 import ConfigProvider from '../../config-provider';
 import Form from '../../form';
 
@@ -991,6 +992,86 @@ describe('Transfer', () => {
       expect(transfers[0]).not.toHaveClass('ant-transfer-disabled');
       expect(transfers[1]).toHaveClass('ant-transfer-disabled');
     });
+
+    it('prioritize using the disabled property of the Transfer component', () => {
+      const App: React.FC = () => {
+        const mockData = Array.from({ length: 20 }).map((_, i) => ({
+          key: i.toString(),
+          title: `content${i + 1}`,
+          description: `description of content${i + 1}`,
+          disabled: i <= 5,
+        }));
+        const initialTargetKeys = mockData
+          .filter((item) => Number(item.key) > 10)
+          .map((item) => item.key);
+        const [componentDisabled, setComponentDisabled] = useState<boolean>(true);
+        const [transferDisabled, setTransferDisabled] = useState<boolean>(true);
+        const [targetKeys] = useState<TransferProps['targetKeys']>(initialTargetKeys);
+        const [selectedKeys] = useState<TransferProps['targetKeys']>([]);
+        return (
+          <>
+            <Checkbox
+              checked={componentDisabled}
+              onChange={(e) => setComponentDisabled(e.target.checked)}
+            >
+              Form disabled
+            </Checkbox>
+            <Checkbox
+              checked={transferDisabled}
+              onChange={(e) => setTransferDisabled(e.target.checked)}
+            >
+              Transfer disabled
+            </Checkbox>
+            <Form
+              labelCol={{ span: 4 }}
+              wrapperCol={{ span: 14 }}
+              layout="horizontal"
+              disabled={componentDisabled}
+              style={{ maxWidth: 600 }}
+            >
+              <Form.Item label="Transfer">
+                <Transfer
+                  dataSource={mockData}
+                  titles={['Source', 'Target']}
+                  targetKeys={targetKeys}
+                  selectedKeys={selectedKeys}
+                  disabled={transferDisabled}
+                  render={(item) => item.title}
+                />
+              </Form.Item>
+            </Form>
+          </>
+        );
+      };
+      const { container } = render(<App />);
+      const transfer = container.querySelector('.ant-transfer');
+      const checkboxes = container.querySelectorAll('.ant-checkbox-input');
+      const formCheck: HTMLInputElement = checkboxes[0] as HTMLInputElement;
+      const transferCheck: HTMLInputElement = checkboxes[1] as HTMLInputElement;
+
+      expect(formCheck.checked).toBe(true);
+      expect(transferCheck.checked).toBe(true);
+      expect(transfer).toHaveClass('ant-transfer-disabled');
+
+      fireEvent.click(transferCheck);
+      expect(formCheck.checked).toBe(true);
+      expect(transferCheck.checked).toBe(false);
+      expect(container.querySelectorAll('.ant-transfer-list-content-item-disabled')).toHaveLength(
+        6,
+      );
+
+      fireEvent.click(formCheck);
+      expect(formCheck.checked).toBe(false);
+      expect(transferCheck.checked).toBe(false);
+      expect(container.querySelectorAll('.ant-transfer-list-content-item-disabled')).toHaveLength(
+        6,
+      );
+
+      fireEvent.click(transferCheck);
+      expect(formCheck.checked).toBe(false);
+      expect(transferCheck.checked).toBe(true);
+      expect(transfer).toHaveClass('ant-transfer-disabled');
+    });
   });
 });