Browse Source
* ✨ feat: migrate less to token for Transfer * ✨ feat: update * ✨ feat: update demo * ✨ feat: update snap * ✨ feat: update * ✨ feat: update * ✨ feat: update demo * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: updatepull/42819/head
黑雨
2 years ago
committed by
GitHub
GitHub
9 changed files with 6465 additions and 35 deletions
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
Component Token Debug. |
|||
|
|||
## en-US |
|||
|
|||
Component Token Debug. |
|||
@ -0,0 +1,207 @@ |
|||
import { ConfigProvider, Space, Switch, Table, Tag, Transfer } from 'antd'; |
|||
import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface'; |
|||
import type { TransferDirection, TransferItem, TransferProps } from 'antd/es/transfer'; |
|||
import difference from 'lodash/difference'; |
|||
import React, { useState } from 'react'; |
|||
|
|||
interface RecordType { |
|||
key: string; |
|||
title: string; |
|||
description: string; |
|||
disabled: boolean; |
|||
tag: string; |
|||
} |
|||
|
|||
interface DataType { |
|||
key: string; |
|||
title: string; |
|||
description: string; |
|||
disabled: boolean; |
|||
tag: string; |
|||
} |
|||
|
|||
interface TableTransferProps extends TransferProps<TransferItem> { |
|||
dataSource: DataType[]; |
|||
leftColumns: ColumnsType<DataType>; |
|||
rightColumns: ColumnsType<DataType>; |
|||
} |
|||
|
|||
// Customize Table Transfer
|
|||
const TableTransfer = ({ leftColumns, rightColumns, ...restProps }: TableTransferProps) => ( |
|||
<Transfer {...restProps}> |
|||
{({ |
|||
direction, |
|||
filteredItems, |
|||
onItemSelectAll, |
|||
onItemSelect, |
|||
selectedKeys: listSelectedKeys, |
|||
disabled: listDisabled, |
|||
}) => { |
|||
const columns = direction === 'left' ? leftColumns : rightColumns; |
|||
|
|||
const rowSelection: TableRowSelection<TransferItem> = { |
|||
getCheckboxProps: (item) => ({ disabled: listDisabled || item.disabled }), |
|||
onSelectAll(selected, selectedRows) { |
|||
const treeSelectedKeys = selectedRows |
|||
.filter((item) => !item.disabled) |
|||
.map(({ key }) => key); |
|||
const diffKeys = selected |
|||
? difference(treeSelectedKeys, listSelectedKeys) |
|||
: difference(listSelectedKeys, treeSelectedKeys); |
|||
onItemSelectAll(diffKeys as string[], selected); |
|||
}, |
|||
onSelect({ key }, selected) { |
|||
onItemSelect(key as string, selected); |
|||
}, |
|||
selectedRowKeys: listSelectedKeys, |
|||
}; |
|||
|
|||
return ( |
|||
<Table |
|||
rowSelection={rowSelection} |
|||
columns={columns} |
|||
dataSource={filteredItems} |
|||
size="small" |
|||
style={{ pointerEvents: listDisabled ? 'none' : undefined }} |
|||
onRow={({ key, disabled: itemDisabled }) => ({ |
|||
onClick: () => { |
|||
if (itemDisabled || listDisabled) return; |
|||
onItemSelect(key as string, !listSelectedKeys.includes(key as string)); |
|||
}, |
|||
})} |
|||
/> |
|||
); |
|||
}} |
|||
</Transfer> |
|||
); |
|||
|
|||
const mockTags = ['cat', 'dog', 'bird']; |
|||
|
|||
const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({ |
|||
key: i.toString(), |
|||
title: `content${i + 1}`, |
|||
description: `description of content${i + 1}`, |
|||
disabled: i % 4 === 0, |
|||
tag: mockTags[i % 3], |
|||
})); |
|||
|
|||
const leftTableColumns: ColumnsType<DataType> = [ |
|||
{ |
|||
dataIndex: 'title', |
|||
title: 'Name', |
|||
}, |
|||
{ |
|||
dataIndex: 'tag', |
|||
title: 'Tag', |
|||
render: (tag) => <Tag>{tag}</Tag>, |
|||
}, |
|||
{ |
|||
dataIndex: 'description', |
|||
title: 'Description', |
|||
}, |
|||
]; |
|||
|
|||
const rightTableColumns: ColumnsType<Pick<DataType, 'title'>> = [ |
|||
{ |
|||
dataIndex: 'title', |
|||
title: 'Name', |
|||
}, |
|||
]; |
|||
|
|||
const initialTargetKeys = mockData.filter((item) => Number(item.key) > 10).map((item) => item.key); |
|||
|
|||
const App: React.FC = () => { |
|||
const [targetKeys, setTargetKeys] = useState(initialTargetKeys); |
|||
const [selectedKeys, setSelectedKeys] = useState<string[]>([]); |
|||
|
|||
const onChange = (nextTargetKeys: string[], direction: TransferDirection, moveKeys: string[]) => { |
|||
console.log('targetKeys:', nextTargetKeys); |
|||
console.log('direction:', direction); |
|||
console.log('moveKeys:', moveKeys); |
|||
setTargetKeys(nextTargetKeys); |
|||
}; |
|||
|
|||
const onSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => { |
|||
console.log('sourceSelectedKeys:', sourceSelectedKeys); |
|||
console.log('targetSelectedKeys:', targetSelectedKeys); |
|||
setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]); |
|||
}; |
|||
|
|||
const onScroll = (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => { |
|||
console.log('direction:', direction); |
|||
console.log('target:', e.target); |
|||
}; |
|||
|
|||
const [disabled, setDisabled] = useState(false); |
|||
const [showSearch, setShowSearch] = useState(false); |
|||
|
|||
const secondOnChange = (nextTargetKeys: string[]) => { |
|||
setTargetKeys(nextTargetKeys); |
|||
}; |
|||
|
|||
const triggerDisable = (checked: boolean) => { |
|||
setDisabled(checked); |
|||
}; |
|||
|
|||
const triggerShowSearch = (checked: boolean) => { |
|||
setShowSearch(checked); |
|||
}; |
|||
|
|||
return ( |
|||
<ConfigProvider |
|||
theme={{ |
|||
components: { |
|||
Transfer: { |
|||
listWidth: 40, |
|||
listWidthLG: 50, |
|||
listHeight: 30, |
|||
itemHeight: 20, |
|||
itemPaddingBlock: 10, |
|||
headerHeight: 18, |
|||
}, |
|||
}, |
|||
}} |
|||
> |
|||
<Transfer |
|||
dataSource={mockData} |
|||
titles={['Source', 'Target']} |
|||
targetKeys={targetKeys} |
|||
selectedKeys={selectedKeys} |
|||
onChange={onChange} |
|||
onSelectChange={onSelectChange} |
|||
onScroll={onScroll} |
|||
render={(item) => item.title} |
|||
/> |
|||
<Transfer status="error" /> |
|||
<Transfer status="warning" showSearch /> |
|||
<TableTransfer |
|||
dataSource={mockData} |
|||
targetKeys={targetKeys} |
|||
disabled={disabled} |
|||
showSearch={showSearch} |
|||
onChange={secondOnChange} |
|||
filterOption={(inputValue, item) => |
|||
item.title!.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1 |
|||
} |
|||
leftColumns={leftTableColumns} |
|||
rightColumns={rightTableColumns} |
|||
/> |
|||
<Space style={{ marginTop: 16 }}> |
|||
<Switch |
|||
unCheckedChildren="disabled" |
|||
checkedChildren="disabled" |
|||
checked={disabled} |
|||
onChange={triggerDisable} |
|||
/> |
|||
<Switch |
|||
unCheckedChildren="showSearch" |
|||
checkedChildren="showSearch" |
|||
checked={showSearch} |
|||
onChange={triggerShowSearch} |
|||
/> |
|||
</Space> |
|||
</ConfigProvider> |
|||
); |
|||
}; |
|||
|
|||
export default App; |
|||
Loading…
Reference in new issue