Browse Source

fix: Transfer with rowKey will be unselectable (#43115)

* test: test driven

* fix: keys mapping

* chore: add bug version
pull/43119/head
二货爱吃白萝卜 1 year ago
committed by GitHub
parent
commit
5d65881984
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 30
      components/transfer/__tests__/index.test.tsx
  2. 6
      components/transfer/hooks/useSelection.ts
  3. 1
      scripts/post-script.js

30
components/transfer/__tests__/index.test.tsx

@ -496,10 +496,32 @@ describe('Transfer', () => {
expect(onScroll).toHaveBeenLastCalledWith('right', expect.anything()); expect(onScroll).toHaveBeenLastCalledWith('right', expect.anything());
}); });
it('should support rowKey is function', () => { it('support rowKey', () => {
expect(() => { const onSelectChange = jest.fn();
render(<Transfer {...listCommonProps} rowKey={(record) => record.key} />);
}).not.toThrow(); const Demo = () => {
const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
return (
<Transfer
{...listCommonProps}
selectedKeys={selectedKeys}
rowKey={(record) => `key_${record.key}`}
onSelectChange={(keys) => {
onSelectChange(keys);
setSelectedKeys(keys);
}}
/>
);
};
const { container } = render(<Demo />);
fireEvent.click(container.querySelector('.ant-transfer-list-content input')!);
expect(onSelectChange).toHaveBeenCalledWith(['key_a']);
expect(
container.querySelector<HTMLInputElement>('.ant-transfer-list-content input')!.checked,
).toBeTruthy();
}); });
it('should support render value and label in item', () => { it('should support render value and label in item', () => {

6
components/transfer/hooks/useSelection.ts

@ -7,6 +7,10 @@ function filterKeys(keys: string[], dataKeys: Set<string>) {
return keys.length === filteredKeys.length ? keys : filteredKeys; return keys.length === filteredKeys.length ? keys : filteredKeys;
} }
function flattenKeys(keys: Set<string>) {
return Array.from(keys).join(';');
}
export default function useSelection<T extends { key: string }>( export default function useSelection<T extends { key: string }>(
leftDataSource: T[], leftDataSource: T[],
rightDataSource: T[], rightDataSource: T[],
@ -44,7 +48,7 @@ export default function useSelection<T extends { key: string }>(
React.useEffect(() => { React.useEffect(() => {
setSourceSelectedKeys(filterKeys(sourceSelectedKeys, leftKeys)); setSourceSelectedKeys(filterKeys(sourceSelectedKeys, leftKeys));
setTargetSelectedKeys(filterKeys(targetSelectedKeys, rightKeys)); setTargetSelectedKeys(filterKeys(targetSelectedKeys, rightKeys));
}, [leftKeys, rightKeys]); }, [flattenKeys(leftKeys), flattenKeys(rightKeys)]);
return [ return [
// Keys // Keys

1
scripts/post-script.js

@ -37,6 +37,7 @@ const DEPRECIATED_VERSION = {
'https://github.com/ant-design/cssinjs/pull/108', 'https://github.com/ant-design/cssinjs/pull/108',
'https://github.com/ant-design/ant-design/pull/41993', 'https://github.com/ant-design/ant-design/pull/41993',
], ],
'5.6.2': ['https://github.com/ant-design/ant-design/issues/43113'],
}; };
function matchDeprecated(version) { function matchDeprecated(version) {

Loading…
Cancel
Save