Skip to content

Commit 41ee8ea

Browse files
tangjinzhoutangjinzhou
committed
feat: transfer change searchChange to search 
1 parent 948499a commit 41ee8ea

File tree

14 files changed

+156
-76
lines changed

14 files changed

+156
-76
lines changed

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

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,6 @@ exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
3030
<div class="LazyLoad" style="height: 32px;"></div>
3131
<div class="LazyLoad" style="height: 32px;"></div>
3232
</ul>
33-
<div class="ant-transfer-list-body-not-found"><span>
34-
没数据
35-
</span></div>
3633
</div>
3734
<div class="ant-transfer-list-footer"><button type="button" class="ant-btn ant-btn-default ant-btn-sm" style="float: right; margin: 5px;"><span>reload</span></button></div>
3835
</div>
@@ -79,7 +76,6 @@ exports[`renders ./components/transfer/demo/basic.md correctly 1`] = `
7976
<div class="LazyLoad" style="height: 32px;"></div>
8077
<div class="LazyLoad" style="height: 32px;"></div>
8178
</ul>
82-
<div class="ant-transfer-list-body-not-found">Not Found</div>
8379
</div>
8480
</div>
8581
<div class="ant-transfer-operation"><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
@@ -98,10 +94,9 @@ exports[`renders ./components/transfer/demo/basic.md correctly 1`] = `
9894
<div class="LazyLoad" style="height: 32px;"></div>
9995
<div class="LazyLoad" style="height: 32px;"></div>
10096
</ul>
101-
<div class="ant-transfer-list-body-not-found">Not Found</div>
10297
</div>
10398
</div>
104-
</div> <button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner">disabled</span></button>
99+
</div> <button type="button" role="switch" class="ant-switch" style="margin-top: 16px;"><span class="ant-switch-inner">disabled</span></button>
105100
</div>
106101
`;
107102
@@ -132,7 +127,6 @@ exports[`renders ./components/transfer/demo/custom-item.md correctly 1`] = `
132127
<div class="LazyLoad" style="height: 32px;"></div>
133128
<div class="LazyLoad" style="height: 32px;"></div>
134129
</ul>
135-
<div class="ant-transfer-list-body-not-found">Not Found</div>
136130
</div>
137131
</div>
138132
<div class="ant-transfer-operation"><button disabled="disabled" type="button" class="ant-btn ant-btn-primary ant-btn-sm"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
@@ -2160,7 +2154,6 @@ exports[`renders ./components/transfer/demo/large-data.md correctly 1`] = `
21602154
<div class="LazyLoad" style="height: 32px;"></div>
21612155
<div class="LazyLoad" style="height: 32px;"></div>
21622156
</ul>
2163-
<div class="ant-transfer-list-body-not-found">Not Found</div>
21642157
</div>
21652158
</div>
21662159
<div class="ant-transfer-operation"><button disabled="disabled" type="button" class="ant-btn ant-btn-primary ant-btn-sm"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
@@ -2211,7 +2204,6 @@ exports[`renders ./components/transfer/demo/search.md correctly 1`] = `
22112204
<div class="LazyLoad" style="height: 32px;"></div>
22122205
<div class="LazyLoad" style="height: 32px;"></div>
22132206
</ul>
2214-
<div class="ant-transfer-list-body-not-found">Not Found</div>
22152207
</div>
22162208
</div>
22172209
<div class="ant-transfer-operation"><button disabled="disabled" type="button" class="ant-btn ant-btn-primary ant-btn-sm"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">

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

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@ exports[`Transfer should render correctly 1`] = `
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>
77
<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>
88
<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>
10-
<div class="ant-transfer-list-body-not-found">Not Found</div>
11-
</div>
9+
</span></div>
1210
</div>
1311
<div class="ant-transfer-operation"><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
1412
<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>
@@ -17,9 +15,7 @@ exports[`Transfer should render correctly 1`] = `
1715
</svg></i></button></div>
1816
<div class="ant-transfer-list">
1917
<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>
20-
<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>
21-
<div class="ant-transfer-list-body-not-found">Not Found</div>
22-
</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>
2319
</div>
2420
</div>
2521
`;
@@ -28,9 +24,7 @@ exports[`Transfer should show sorted targetkey 1`] = `
2824
<div class="ant-transfer">
2925
<div class="ant-transfer-list">
3026
<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>
31-
<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>
32-
<div class="ant-transfer-list-body-not-found">Not Found</div>
33-
</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>
3428
</div>
3529
<div class="ant-transfer-operation"><button disabled="disabled" type="button" class="ant-btn ant-btn-primary ant-btn-sm"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
3630
<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>
@@ -41,9 +35,7 @@ exports[`Transfer should show sorted targetkey 1`] = `
4135
<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>
4236
<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>
4337
<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>
44-
</span>
45-
<div class="ant-transfer-list-body-not-found">Not Found</div>
46-
</div>
38+
</span></div>
4739
</div>
4840
</div>
4941
`;

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ exports[`List should render correctly 1`] = `
66
<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>
77
<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>
88
<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>
10-
<div class="ant-transfer-list-body-not-found">Not Found</div>
11-
</div>
9+
</span></div>
1210
</div>
1311
`;

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ exports[`Search should show cross icon when input value exists 1`] = `<div><inpu
44
55
exports[`Search should show cross icon when input value exists 2`] = `
66
<div><input placeholder="" type="text" class="ant-input"><a href="#" class="undefined-action"><i class="anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
7-
<path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 0 0-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path>
8-
<path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
7+
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
98
</svg></i></a></div>
109
`;

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ describe('Transfer', () => {
222222
Vue.nextTick(() => {
223223
const input = wrapper.findAll('.ant-transfer-list-body-search-wrapper input').at(0)
224224
input.element.value = 'a'
225-
input.trigger('change')
225+
input.trigger('input')
226226
Vue.nextTick(() => {
227227
expect(wrapper.findAll('.ant-transfer-list-content')
228228
.at(0)
@@ -248,7 +248,7 @@ describe('Transfer', () => {
248248
Vue.nextTick(() => {
249249
const input = wrapper.findAll('.ant-transfer-list-body-search-wrapper input').at(0)
250250
input.element.value = 'content2'
251-
input.trigger('change')
251+
input.trigger('input')
252252
Vue.nextTick(() => {
253253
expect(wrapper.findAll('.ant-transfer-list')
254254
.at(0)
@@ -280,7 +280,7 @@ describe('Transfer', () => {
280280
Vue.nextTick(() => {
281281
const input = wrapper.findAll('.ant-transfer-list-body-search-wrapper input').at(0)
282282
input.element.value = 'content2'
283-
input.trigger('change')
283+
input.trigger('input')
284284
Vue.nextTick(() => {
285285
wrapper.findAll('.ant-transfer-list')
286286
.at(0)
@@ -318,7 +318,7 @@ describe('Transfer', () => {
318318
Vue.nextTick(() => {
319319
const input = wrapper.findAll('.ant-transfer-list-body-search-wrapper input').at(0)
320320
input.element.value = 'content2'
321-
input.trigger('change')
321+
input.trigger('input')
322322
Vue.nextTick(() => {
323323
wrapper.findAll('.ant-transfer-list')
324324
.at(0)
@@ -358,7 +358,7 @@ describe('Transfer', () => {
358358

359359
const input = wrapper.findAll('.ant-transfer-list-body-search-wrapper input').at(0)
360360
input.element.value = 'a'
361-
input.trigger('change')
361+
input.trigger('input')
362362
Vue.nextTick(() => {
363363
wrapper.findAll('.ant-transfer-list')
364364
.at(0)

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
11
import { mount } from '@vue/test-utils'
2+
import { asyncExpect } from '@/tests/utils'
23
import Search from '../search'
4+
import Transfer from '../index'
35

46
describe('Search', () => {
7+
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
8+
9+
afterEach(() => {
10+
errorSpy.mockReset()
11+
})
12+
13+
afterAll(() => {
14+
errorSpy.mockRestore()
15+
})
16+
517
it('should show cross icon when input value exists', () => {
618
const props = {
719
propsData: {
@@ -16,4 +28,83 @@ describe('Search', () => {
1628

1729
expect(wrapper.html()).toMatchSnapshot()
1830
})
31+
32+
it('onSearch', async () => {
33+
const dataSource = [
34+
{
35+
key: 'a',
36+
title: 'a',
37+
description: 'a',
38+
},
39+
{
40+
key: 'b',
41+
title: 'b',
42+
description: 'b',
43+
},
44+
{
45+
key: 'c',
46+
title: 'c',
47+
description: 'c',
48+
},
49+
]
50+
51+
const onSearch = jest.fn()
52+
const wrapper = mount({
53+
render () {
54+
return <Transfer
55+
dataSource={dataSource}
56+
selectedKeys={[]}
57+
targetKeys={[]}
58+
render={item => item.title}
59+
onSearch={onSearch}
60+
showSearch
61+
/>
62+
},
63+
}, {
64+
sync: false,
65+
})
66+
await asyncExpect(() => {
67+
const input = wrapper
68+
.findAll('.ant-input')
69+
.at(0)
70+
input.element.value = 'a'
71+
input.trigger('input')
72+
})
73+
74+
await asyncExpect(() => {
75+
expect(onSearch).toBeCalledWith('left', 'a')
76+
})
77+
78+
onSearch.mockReset()
79+
80+
wrapper
81+
.findAll('.ant-transfer-list-search-action')
82+
.at(0)
83+
.trigger('click')
84+
expect(onSearch).toBeCalledWith('left', '')
85+
})
86+
87+
it('legacy onSearchChange', () => {
88+
const onSearchChange = jest.fn()
89+
90+
const wrapper = mount({
91+
render () {
92+
return <Transfer render={item => item.title} onSearchChange={onSearchChange} showSearch />
93+
},
94+
}, {
95+
sync: false,
96+
})
97+
98+
const input = wrapper
99+
.findAll('.ant-input')
100+
.at(0)
101+
input.element.value = 'a'
102+
input.trigger('input')
103+
104+
expect(errorSpy.mock.calls[0][0]).toMatch(
105+
'Warning: `searchChange` in Transfer is deprecated. Please use `search` instead.',
106+
)
107+
expect(onSearchChange.mock.calls[0][0]).toEqual('left')
108+
expect(onSearchChange.mock.calls[0][1].target.value).toEqual('a')
109+
})
19110
})

‎components/transfer/demo/basic.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,13 @@ The most basic usage of `Transfer` involves providing the source data and target
2222
:render="item=>item.title"
2323
:disabled="disabled"
2424
/>
25-
<a-switch unCheckedChildren="disabled" checkedChildren="disabled" :checked="disabled" @change="handleDisable" />
25+
<a-switch
26+
unCheckedChildren="disabled"
27+
checkedChildren="disabled"
28+
:checked="disabled"
29+
@change="handleDisable"
30+
style="margin-top: 16px"
31+
/>
2632
</div>
2733
</template>
2834
<script>

‎components/transfer/demo/index.vue‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,27 @@ const md = {
1111
cn: `# 穿梭框
1212
双栏穿梭选择框。
1313
## 何时使用
14-
用直观的方式在两栏中移动元素，完成选择行为。
14+
15+
- 需要在多个可选项中进行多选时。
16+
- 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。
17+
18+
穿梭选择框用直观的方式在两栏中移动元素，完成选择行为。
1519
1620
选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。
17-
其中，左边一栏为 'source'，右边一栏为 'target'，API 的设计也反映了这两个概念。。
21+
其中，左边一栏为 \`source\`，右边一栏为 \`target\`，API 的设计也反映了这两个概念。
1822
## 代码演示`,
1923
us: `# Transfer
20-
Transfer the elements between two columns in an intuitive and efficient way.
24+
Double column transfer choice box.
25+
26+
## When To Use
27+
28+
- It is a select control essentially which can be use for selecting multiple items.
29+
- Transfer can display more information for items and take up more space.
30+
31+
Transfer the elements between two columns in an intuitive and efficient way.
32+
33+
One or more elements can be selected from either column, one click on the proper \`direction\` button, and the transfer is done. The left column is considered the \`source\` and the right column is considered the \`target\`. As you can see in the API description, these names are reflected in.
2134
22-
One or more elements can be selected from either column, one click on the proper 'direction' button, and the transfer is done. The left column is considered the 'source' and the right column is considered the 'target'. As you can see in the API description, these names are reflected in.
2335
## Examples
2436
`,
2537
}
@@ -33,17 +45,11 @@ export default {
3345
return (
3446
<div>
3547
<md cn={md.cn} us={md.us}/>
36-
<br/>
3748
<Basic />
38-
<br/>
3949
<Search />
40-
<br />
4150
<Advanced />
42-
<br/>
4351
<CustomItem />
44-
<br/>
4552
<LargeData />
46-
<br/>
4753
<api>
4854
<template slot='cn'>
4955
<CN/>

‎components/transfer/demo/search.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ Transfer with a search box.
1616
:filterOption="filterOption"
1717
:targetKeys="targetKeys"
1818
@change="handleChange"
19+
@search="handleSearch"
1920
:render="item=>item.title"
2021
>
2122
</a-transfer>
@@ -57,6 +58,9 @@ export default {
5758
console.log(targetKeys, direction, moveKeys);
5859
this.targetKeys = targetKeys
5960
},
61+
handleSearch (dir, value) {
62+
console.log('search:', dir, value);
63+
},
6064
},
6165
}
6266
</script>

0 commit comments

Comments
 (0)