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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with
32 additions and
5 deletions
-
components/transfer/__tests__/index.test.tsx
-
components/transfer/hooks/useSelection.ts
-
scripts/post-script.js
|
|
@ -496,10 +496,32 @@ describe('Transfer', () => { |
|
|
|
expect(onScroll).toHaveBeenLastCalledWith('right', expect.anything()); |
|
|
|
}); |
|
|
|
|
|
|
|
it('should support rowKey is function', () => { |
|
|
|
expect(() => { |
|
|
|
render(<Transfer {...listCommonProps} rowKey={(record) => record.key} />); |
|
|
|
}).not.toThrow(); |
|
|
|
it('support rowKey', () => { |
|
|
|
const onSelectChange = jest.fn(); |
|
|
|
|
|
|
|
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', () => { |
|
|
|
|
|
@ -7,6 +7,10 @@ function filterKeys(keys: string[], dataKeys: Set<string>) { |
|
|
|
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 }>( |
|
|
|
leftDataSource: T[], |
|
|
|
rightDataSource: T[], |
|
|
@ -44,7 +48,7 @@ export default function useSelection<T extends { key: string }>( |
|
|
|
React.useEffect(() => { |
|
|
|
setSourceSelectedKeys(filterKeys(sourceSelectedKeys, leftKeys)); |
|
|
|
setTargetSelectedKeys(filterKeys(targetSelectedKeys, rightKeys)); |
|
|
|
}, [leftKeys, rightKeys]); |
|
|
|
}, [flattenKeys(leftKeys), flattenKeys(rightKeys)]); |
|
|
|
|
|
|
|
return [ |
|
|
|
// Keys
|
|
|
|
|
|
@ -37,6 +37,7 @@ const DEPRECIATED_VERSION = { |
|
|
|
'https://github.com/ant-design/cssinjs/pull/108', |
|
|
|
'https://github.com/ant-design/ant-design/pull/41993', |
|
|
|
], |
|
|
|
'5.6.2': ['https://github.com/ant-design/ant-design/issues/43113'], |
|
|
|
}; |
|
|
|
|
|
|
|
function matchDeprecated(version) { |
|
|
|