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 = (props: ListItemProps { 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(); + expect( + container.querySelectorAll('.ant-transfer-operation button').item(0), + ).toBeDisabled(); + }); + describe('pagination', () => { it('boolean', async () => { const { getByTitle } = render(); 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 = { + ...listCommonProps, + dataSource: listCommonProps.dataSource.map((d) => ({ + ...d, + disabled: true, + })), + }; + const { container } = render(); + expect(container.querySelector('label.ant-checkbox-wrapper')).toHaveClass( + 'ant-checkbox-wrapper-disabled', + ); + expect(container.querySelector('span.ant-checkbox')).toHaveClass( + 'ant-checkbox-disabled', + ); + }); + it('support custom dropdown Icon', () => { const { container } = render( ( 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 = ( return [filterItems, filterRenderItems] as const; }, [dataSource, filterValue]); + const checkedActiveItems = useMemo(() => { + return filteredItems.filter((item) => checkedKeys.includes(item.key) && !item.disabled); + }, [checkedKeys, filteredItems]); + const checkStatus = useMemo(() => { - if (checkedKeys.length === 0) { + if (checkedActiveItems.length === 0) { return 'none'; } const checkedKeysMap = groupKeysMap(checkedKeys); @@ -196,7 +200,7 @@ const TransferList = ( return 'all'; } return 'part'; - }, [checkedKeys, filteredItems]); + }, [checkedKeys, checkedActiveItems]); const listBody = useMemo(() => { const search = showSearch ? ( @@ -254,7 +258,7 @@ const TransferList = ( const checkBox = ( !d.disabled).length === 0 || disabled} checked={checkStatus === 'all'} indeterminate={checkStatus === 'part'} className={`${prefixCls}-checkbox`} @@ -380,7 +384,7 @@ const TransferList = ( ) : null} - {getSelectAllLabel(checkedKeys.length, filteredItems.length)} + {getSelectAllLabel(checkedActiveItems.length, filteredItems.length)} {titleText}