You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
939 B
37 lines
939 B
import React, { useState } from 'react';
|
|
import { Transfer } from 'antd';
|
|
import type { SelectAllLabel } from 'antd/es/transfer';
|
|
|
|
interface RecordType {
|
|
key: string;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
const mockData: RecordType[] = Array.from({ length: 10 }).map((_, i) => ({
|
|
key: i.toString(),
|
|
title: `content${i + 1}`,
|
|
description: `description of content${i + 1}`,
|
|
}));
|
|
|
|
const oriTargetKeys = mockData.filter(item => Number(item.key) % 3 > 1).map(item => item.key);
|
|
|
|
const selectAllLabels: SelectAllLabel[] = [
|
|
'Select All',
|
|
({ selectedCount, totalCount }) => `${selectedCount}/${totalCount}`,
|
|
];
|
|
|
|
const App: React.FC = () => {
|
|
const [targetKeys, setTargetKeys] = useState(oriTargetKeys);
|
|
return (
|
|
<Transfer
|
|
dataSource={mockData}
|
|
targetKeys={targetKeys}
|
|
onChange={setTargetKeys}
|
|
render={item => item.title}
|
|
selectAllLabels={selectAllLabels}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
|