Skip to content

Commit 8f732fc

Browse files
tangjinzhoutangjinzhou
committed
feat: transfer support custom children
1 parent e097546 commit 8f732fc

File tree

15 files changed

+1020
-292
lines changed

15 files changed

+1020
-292
lines changed

‎build/config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
22
dev: {
3-
componentName: 'tabs', // dev components
3+
componentName: 'transfer', // dev components
44
},
55
};

‎components/_util/getTransitionProps.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import animate from './css-animation';
22
const noop = () => {};
33
const getTransitionProps = (transitionName, opt = {}) => {
4-
const { beforeEnter, enter, afterEnter, leave, afterLeave, appear = true, tag } = opt;
4+
const { beforeEnter, enter, afterEnter, leave, afterLeave, appear = true, tag, nativeOn } = opt;
55
const transitionProps = {
66
props: {
77
appear,
@@ -22,6 +22,7 @@ const getTransitionProps = (transitionName, opt = {}) => {
2222
}),
2323
afterLeave: afterLeave || noop,
2424
},
25+
nativeOn,
2526
};
2627
// transition-group
2728
if (tag) {

‎components/transfer/item.jsx‎ renamed to ‎components/transfer/ListItem.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Checkbox from '../checkbox';
66
function noop() {}
77

88
export default {
9-
name: 'Item',
9+
name: 'ListItem',
1010
props: {
1111
renderedText: PropTypes.any,
1212
renderedEl: PropTypes.any,
@@ -42,7 +42,7 @@ export default {
4242
}
4343
>
4444
<Checkbox checked={checked} disabled={disabled || item.disabled} />
45-
<span>{renderedEl}</span>
45+
<span class={`${prefixCls}-content-item-text`}>{renderedEl}</span>
4646
</li>
4747
);
4848
let children = null;

‎components/transfer/__tests__/__snapshots__/demo.test.js.snap‎

Lines changed: 263 additions & 18 deletions
Large diffs are not rendered by default.

‎components/transfer/__tests__/__snapshots__/index.test.js.snap‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,12 @@ exports[`Transfer should render correctly 1`] = `
44
<div class="ant-transfer">
55
<div class="ant-transfer-list">
66
<div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" checked="checked" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-header-selected"><span>1/2 items</span><span class="ant-transfer-list-header-title"></span></span></div>
7-
<div class="ant-transfer-list-body"><span tag="ul" class="ant-transfer-list-content"><li class="ant-transfer-list-content-item"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" checked="checked" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span></span></li>
8-
<li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span></span></li>
9-
</span></div>
7+
<div class="ant-transfer-list-body">
8+
<ul class="ant-transfer-list-content">
9+
<li class="ant-transfer-list-content-item"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" checked="checked" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-content-item-text"></span></li>
10+
<li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-content-item-text"></span></li>
11+
</ul>
12+
</div>
1013
</div>
1114
<div class="ant-transfer-operation"><button type="button" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"><i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
1215
<path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
@@ -15,7 +18,11 @@ exports[`Transfer should render correctly 1`] = `
1518
</svg></i></button></div>
1619
<div class="ant-transfer-list">
1720
<div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-header-selected"><span>1 item</span><span class="ant-transfer-list-header-title"></span></span></div>
18-
<div class="ant-transfer-list-body"><span tag="ul" class="ant-transfer-list-content"><li class="ant-transfer-list-content-item"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span></span></li></span></div>
21+
<div class="ant-transfer-list-body">
22+
<ul class="ant-transfer-list-content">
23+
<li class="ant-transfer-list-content-item"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-content-item-text"></span></li>
24+
</ul>
25+
</div>
1926
</div>
2027
</div>
2128
`;
@@ -24,7 +31,11 @@ exports[`Transfer should show sorted targetkey 1`] = `
2431
<div class="ant-transfer">
2532
<div class="ant-transfer-list">
2633
<div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-header-selected"><span>1 item</span><span class="ant-transfer-list-header-title"></span></span></div>
27-
<div class="ant-transfer-list-body"><span tag="ul" class="ant-transfer-list-content"><li title="a" class="ant-transfer-list-content-item"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span>a</span></li></span></div>
34+
<div class="ant-transfer-list-body">
35+
<ul class="ant-transfer-list-content">
36+
<li title="a" class="ant-transfer-list-content-item"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-content-item-text">a</span></li>
37+
</ul>
38+
</div>
2839
</div>
2940
<div class="ant-transfer-operation"><button disabled="disabled" type="button" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"><i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
3041
<path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
@@ -33,9 +44,12 @@ exports[`Transfer should show sorted targetkey 1`] = `
3344
</svg></i></button></div>
3445
<div class="ant-transfer-list">
3546
<div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-header-selected"><span>2 items</span><span class="ant-transfer-list-header-title"></span></span></div>
36-
<div class="ant-transfer-list-body"><span tag="ul" class="ant-transfer-list-content"><li title="c" class="ant-transfer-list-content-item"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span>c</span></li>
37-
<li title="b" class="ant-transfer-list-content-item"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span>b</span></li>
38-
</span></div>
47+
<div class="ant-transfer-list-body">
48+
<ul class="ant-transfer-list-content">
49+
<li title="c" class="ant-transfer-list-content-item"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-content-item-text">c</span></li>
50+
<li title="b" class="ant-transfer-list-content-item"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-content-item-text">b</span></li>
51+
</ul>
52+
</div>
3953
</div>
4054
</div>
4155
`;

‎components/transfer/__tests__/__snapshots__/list.test.js.snap‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@
33
exports[`List should render correctly 1`] = `
44
<div class="ant-transfer-list">
55
<div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-header-selected"><span>1/3 </span><span class="ant-transfer-list-header-title"></span></span></div>
6-
<div class="ant-transfer-list-body"><span tag="ul" class="ant-transfer-list-content"><li class="ant-transfer-list-content-item"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" checked="checked" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span></span></li>
7-
<li class="ant-transfer-list-content-item"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span></span></li>
8-
<li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span></span></li>
9-
</span></div>
6+
<div class="ant-transfer-list-body">
7+
<ul class="ant-transfer-list-content">
8+
<li class="ant-transfer-list-content-item"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" checked="checked" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-content-item-text"></span></li>
9+
<li class="ant-transfer-list-content-item"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-content-item-text"></span></li>
10+
<li class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span></label><span class="ant-transfer-list-content-item-text"></span></li>
11+
</ul>
12+
</div>
1013
</div>
1114
`;

‎components/transfer/__tests__/search.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ describe('Search', () => {
108108
input.trigger('input');
109109

110110
expect(errorSpy.mock.calls[0][0]).toMatch(
111-
'Warning: `searchChange` in Transfer is deprecated. Please use `search` instead.',
111+
'Warning: [antdv: Transfer] `searchChange` in Transfer is deprecated. Please use `search` instead.',
112112
);
113113
expect(onSearchChange.mock.calls[0][0]).toEqual('left');
114114
expect(onSearchChange.mock.calls[0][1].target.value).toEqual('a');

‎components/transfer/demo/index.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Basic from './basic.md';
33
import Search from './search.md';
44
import Advanced from './advanced.md';
55
import CustomItem from './custom-item.md';
6+
import TableTransfer from './table-transfer';
67
import CN from '../index.zh-CN.md';
78
import US from '../index.en-US.md';
89
@@ -44,10 +45,13 @@ export default {
4445
return (
4546
<div>
4647
<md cn={md.cn} us={md.us} />
47-
<Basic />
48-
<Search />
49-
<Advanced />
50-
<CustomItem />
48+
<demo-sort cols={1}>
49+
<Basic />
50+
<Search />
51+
<Advanced />
52+
<CustomItem />
53+
<TableTransfer />
54+
</demo-sort>
5155
<api>
5256
<template slot="cn">
5357
<CN />

‎components/transfer/demo/table-transfer.md‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<cn>
2+
#### 表格穿梭框
3+
使用 Table 组件作为自定义渲染列表。
4+
</cn>
5+
6+
<us>
7+
#### Table Transfer
8+
Customize render list with Table component.
9+
</us>
10+
11+
```tpl
12+
<template>
13+
<div>
14+
<a-transfer
15+
:dataSource="mockData"
16+
:targetKeys="targetKeys"
17+
:disabled="disabled"
18+
:showSearch="showSearch"
19+
@change="onChange"
20+
:filterOption="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
21+
:leftColumns="leftColumns"
22+
:rightColumns="rightColumns"
23+
:showSelectAll="false"
24+
>
25+
<template
26+
slot="children"
27+
slot-scope="{
28+
props: {
29+
direction,
30+
filteredItems,
31+
selectedKeys,
32+
disabled: listDisabled
33+
}, on: {
34+
itemSelectAll,
35+
itemSelect,
36+
}
37+
}"
38+
>
39+
<a-table
40+
:rowSelection="getRowSelection({disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect})"
41+
:columns="direction === 'left' ? leftColumns : rightColumns"
42+
:dataSource="filteredItems"
43+
size="small"
44+
:style="{ pointerEvents: listDisabled ? 'none' : null }"
45+
:customRow="({ key, disabled: itemDisabled }) => ({
46+
on: {
47+
click: () => {
48+
if (itemDisabled || listDisabled) return;
49+
itemSelect(key, !selectedKeys.includes(key));
50+
}
51+
}
52+
})"
53+
/>
54+
</template>
55+
</a-transfer>
56+
<a-switch
57+
unCheckedChildren="disabled"
58+
checkedChildren="disabled"
59+
:checked="disabled"
60+
@change="triggerDisable"
61+
style="margin-top: 16px"
62+
/>
63+
<a-switch
64+
unCheckedChildren="showSearch"
65+
checkedChildren="showSearch"
66+
:checked="showSearch"
67+
@change="triggerShowSearch"
68+
style="margin-top: 16px"
69+
/>
70+
</div>
71+
</template>
72+
<script>
73+
import Vue from 'vue';
74+
import difference from 'lodash/difference';
75+
import { Table } from 'ant-design-vue';
76+
import 'ant-design-vue/table/style';
77+
Vue.use(Table);
78+
const mockData = [];
79+
for (let i = 0; i < 20; i++) {
80+
mockData.push({
81+
key: i.toString(),
82+
title: `content${i + 1}`,
83+
description: `description of content${i + 1}`,
84+
disabled: i % 4 === 0,
85+
});
86+
}
87+
88+
const originTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);
89+
90+
const leftTableColumns = [
91+
{
92+
dataIndex: 'title',
93+
title: 'Name',
94+
},
95+
{
96+
dataIndex: 'tag',
97+
title: 'Tag',
98+
},
99+
{
100+
dataIndex: 'description',
101+
title: 'Description',
102+
},
103+
];
104+
const rightTableColumns = [
105+
{
106+
dataIndex: 'title',
107+
title: 'Name',
108+
},
109+
];
110+
111+
export default {
112+
data() {
113+
return {
114+
mockData,
115+
targetKeys: originTargetKeys,
116+
disabled: false,
117+
showSearch: false,
118+
leftColumns: leftTableColumns,
119+
rightColumns: rightTableColumns,
120+
};
121+
},
122+
methods: {
123+
onChange(nextTargetKeys) {
124+
this.targetKeys = nextTargetKeys;
125+
},
126+
127+
triggerDisable(disabled) {
128+
this.disabled = disabled;
129+
},
130+
131+
triggerShowSearch(showSearch) {
132+
this.showSearch = showSearch;
133+
},
134+
getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
135+
return {
136+
getCheckboxProps: item => ({ props: { disabled: disabled || item.disabled } }),
137+
onSelectAll(selected, selectedRows) {
138+
const treeSelectedKeys = selectedRows
139+
.filter(item => !item.disabled)
140+
.map(({ key }) => key);
141+
const diffKeys = selected
142+
? difference(treeSelectedKeys, selectedKeys)
143+
: difference(selectedKeys, treeSelectedKeys);
144+
itemSelectAll(diffKeys, selected);
145+
},
146+
onSelect({ key }, selected) {
147+
itemSelect(key, selected);
148+
},
149+
selectedRowKeys: selectedKeys,
150+
};
151+
},
152+
},
153+
};
154+
</script>
155+
```

0 commit comments

Comments
 (0)