mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 18:09:22 +08:00
14a1e6bd51
* feat: tsconfig enable strict * feat: add no-explicit-any * feat: strict * feat: as THEME * feat: 优化 keys 类型写法 * feat: demo remove any * feat: as number * feat: this any * feat: add eslint * feat: cascader * feat: props any * feat: remove any * feat: remove any * feat: any 提示错误 * feat: remove any * feat: add eslint * feat: 允许 T = any 存在 * feat: color funciton * feat: 恢复 lint * feat: merge master * feat: as ReactElement * feat: type
76 lines
1.8 KiB
TypeScript
76 lines
1.8 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Button, Transfer } from 'antd';
|
|
import type { TransferProps } from 'antd';
|
|
|
|
interface RecordType {
|
|
key: string;
|
|
title: string;
|
|
description: string;
|
|
chosen: boolean;
|
|
}
|
|
|
|
const App: React.FC = () => {
|
|
const [mockData, setMockData] = useState<RecordType[]>([]);
|
|
const [targetKeys, setTargetKeys] = useState<TransferProps['targetKeys']>([]);
|
|
|
|
const getMock = () => {
|
|
const tempTargetKeys = [];
|
|
const tempMockData = [];
|
|
for (let i = 0; i < 20; i++) {
|
|
const data = {
|
|
key: i.toString(),
|
|
title: `content${i + 1}`,
|
|
description: `description of content${i + 1}`,
|
|
chosen: i % 2 === 0,
|
|
};
|
|
if (data.chosen) {
|
|
tempTargetKeys.push(data.key);
|
|
}
|
|
tempMockData.push(data);
|
|
}
|
|
setMockData(tempMockData);
|
|
setTargetKeys(tempTargetKeys);
|
|
};
|
|
|
|
useEffect(() => {
|
|
getMock();
|
|
}, []);
|
|
|
|
const handleChange: TransferProps['onChange'] = (newTargetKeys) => {
|
|
setTargetKeys(newTargetKeys);
|
|
};
|
|
|
|
const renderFooter: TransferProps['footer'] = (_, info) => {
|
|
if (info?.direction === 'left') {
|
|
return (
|
|
<Button size="small" style={{ float: 'left', margin: 5 }} onClick={getMock}>
|
|
Left button reload
|
|
</Button>
|
|
);
|
|
}
|
|
return (
|
|
<Button size="small" style={{ float: 'right', margin: 5 }} onClick={getMock}>
|
|
Right button reload
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Transfer
|
|
dataSource={mockData}
|
|
showSearch
|
|
listStyle={{
|
|
width: 250,
|
|
height: 300,
|
|
}}
|
|
operations={['to right', 'to left']}
|
|
targetKeys={targetKeys}
|
|
onChange={handleChange}
|
|
render={(item) => `${item.title}-${item.description}`}
|
|
footer={renderFooter}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default App;
|