github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: transfer change `searchChange` to `search`

pull/398/head
tangjinzhou 2019-01-07 20:58:18 +08:00
parent 948499a730
commit 41ee8ea046
14 changed files with 156 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/transfer/__tests__/__snapshots__/demo.test.js.snap
View File

@ -30,9 +30,6 @@ exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
<div class="LazyLoad" style="height: 32px;"></div>
<div class="LazyLoad" style="height: 32px;"></div>
</ul>
<div class="ant-transfer-list-body-not-found"><span>
没数据
</span></div>
</div>
<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>
</div>
@ -79,7 +76,6 @@ exports[`renders ./components/transfer/demo/basic.md correctly 1`] = `
<div class="LazyLoad" style="height: 32px;"></div>
<div class="LazyLoad" style="height: 32px;"></div>
</ul>
<div class="ant-transfer-list-body-not-found">Not Found</div>
</div>
</div>
<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`] = `
<div class="LazyLoad" style="height: 32px;"></div>
<div class="LazyLoad" style="height: 32px;"></div>
</ul>
<div class="ant-transfer-list-body-not-found">Not Found</div>
</div>
</div>
</div> <button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner">disabled</span></button>
</div> <button type="button" role="switch" class="ant-switch" style="margin-top: 16px;"><span class="ant-switch-inner">disabled</span></button>
</div>
`;
@ -132,7 +127,6 @@ exports[`renders ./components/transfer/demo/custom-item.md correctly 1`] = `
<div class="LazyLoad" style="height: 32px;"></div>
<div class="LazyLoad" style="height: 32px;"></div>
</ul>
<div class="ant-transfer-list-body-not-found">Not Found</div>
</div>
</div>
<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`] = `
<div class="LazyLoad" style="height: 32px;"></div>
<div class="LazyLoad" style="height: 32px;"></div>
</ul>
<div class="ant-transfer-list-body-not-found">Not Found</div>
</div>
</div>
<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`] = `
<div class="LazyLoad" style="height: 32px;"></div>
<div class="LazyLoad" style="height: 32px;"></div>
</ul>
<div class="ant-transfer-list-body-not-found">Not Found</div>
</div>
</div>
<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="">

16
components/transfer/__tests__/__snapshots__/index.test.js.snap
View File

@ -6,9 +6,7 @@ exports[`Transfer should render correctly 1`] = `
<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>
<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>
<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>
</span>
<div class="ant-transfer-list-body-not-found">Not Found</div>
</div>
</span></div>
</div>
<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">
<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`] = `
</svg></i></button></div>
<div class="ant-transfer-list">
<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>
<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 class="ant-transfer-list-body-not-found">Not Found</div>
</div>
<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>
</div>
</div>
`;
@ -28,9 +24,7 @@ exports[`Transfer should show sorted targetkey 1`] = `
<div class="ant-transfer">
<div class="ant-transfer-list">
<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>
<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 class="ant-transfer-list-body-not-found">Not Found</div>
</div>
<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>
</div>
<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">
<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`] = `
<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>
<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>
<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>
</span>
<div class="ant-transfer-list-body-not-found">Not Found</div>
</div>
</span></div>
</div>
</div>
`;

4
components/transfer/__tests__/__snapshots__/list.test.js.snap
View File

@ -6,8 +6,6 @@ exports[`List should render correctly 1`] = `
<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>
<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>
<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>
</span>
<div class="ant-transfer-list-body-not-found">Not Found</div>
</div>
</span></div>
</div>
`;

3
components/transfer/__tests__/__snapshots__/search.test.js.snap
View File

@ -4,7 +4,6 @@ exports[`Search should show cross icon when input value exists 1`] = `<div><inpu
exports[`Search should show cross icon when input value exists 2`] = `
<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="">
<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>
<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>
<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>
</svg></i></a></div>
`;

10
components/transfer/__tests__/index.test.js
View File

@ -222,7 +222,7 @@ describe('Transfer', () => {
Vue.nextTick(() => {
const input = wrapper.findAll('.ant-transfer-list-body-search-wrapper input').at(0)
input.element.value = 'a'
input.trigger('change')
input.trigger('input')
Vue.nextTick(() => {
expect(wrapper.findAll('.ant-transfer-list-content')
.at(0)
@ -248,7 +248,7 @@ describe('Transfer', () => {
Vue.nextTick(() => {
const input = wrapper.findAll('.ant-transfer-list-body-search-wrapper input').at(0)
input.element.value = 'content2'
input.trigger('change')
input.trigger('input')
Vue.nextTick(() => {
expect(wrapper.findAll('.ant-transfer-list')
.at(0)
@ -280,7 +280,7 @@ describe('Transfer', () => {
Vue.nextTick(() => {
const input = wrapper.findAll('.ant-transfer-list-body-search-wrapper input').at(0)
input.element.value = 'content2'
input.trigger('change')
input.trigger('input')
Vue.nextTick(() => {
wrapper.findAll('.ant-transfer-list')
.at(0)
@ -318,7 +318,7 @@ describe('Transfer', () => {
Vue.nextTick(() => {
const input = wrapper.findAll('.ant-transfer-list-body-search-wrapper input').at(0)
input.element.value = 'content2'
input.trigger('change')
input.trigger('input')
Vue.nextTick(() => {
wrapper.findAll('.ant-transfer-list')
.at(0)
@ -358,7 +358,7 @@ describe('Transfer', () => {
const input = wrapper.findAll('.ant-transfer-list-body-search-wrapper input').at(0)
input.element.value = 'a'
input.trigger('change')
input.trigger('input')
Vue.nextTick(() => {
wrapper.findAll('.ant-transfer-list')
.at(0)

91
components/transfer/__tests__/search.test.js
View File

@ -1,7 +1,19 @@
import { mount } from '@vue/test-utils'
import { asyncExpect } from '@/tests/utils'
import Search from '../search'
import Transfer from '../index'
describe('Search', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
afterEach(() => {
errorSpy.mockReset()
})
afterAll(() => {
errorSpy.mockRestore()
})
it('should show cross icon when input value exists', () => {
const props = {
propsData: {
@ -16,4 +28,83 @@ describe('Search', () => {
expect(wrapper.html()).toMatchSnapshot()
})
it('onSearch', async () => {
const dataSource = [
{
key: 'a',
title: 'a',
description: 'a',
},
{
key: 'b',
title: 'b',
description: 'b',
},
{
key: 'c',
title: 'c',
description: 'c',
},
]
const onSearch = jest.fn()
const wrapper = mount({
render () {
return <Transfer
dataSource={dataSource}
selectedKeys={[]}
targetKeys={[]}
render={item => item.title}
onSearch={onSearch}
showSearch
/>
},
}, {
sync: false,
})
await asyncExpect(() => {
const input = wrapper
.findAll('.ant-input')
.at(0)
input.element.value = 'a'
input.trigger('input')
})
await asyncExpect(() => {
expect(onSearch).toBeCalledWith('left', 'a')
})
onSearch.mockReset()
wrapper
.findAll('.ant-transfer-list-search-action')
.at(0)
.trigger('click')
expect(onSearch).toBeCalledWith('left', '')
})
it('legacy onSearchChange', () => {
const onSearchChange = jest.fn()
const wrapper = mount({
render () {
return <Transfer render={item => item.title} onSearchChange={onSearchChange} showSearch />
},
}, {
sync: false,
})
const input = wrapper
.findAll('.ant-input')
.at(0)
input.element.value = 'a'
input.trigger('input')
expect(errorSpy.mock.calls[0][0]).toMatch(
'Warning: `searchChange` in Transfer is deprecated. Please use `search` instead.',
)
expect(onSearchChange.mock.calls[0][0]).toEqual('left')
expect(onSearchChange.mock.calls[0][1].target.value).toEqual('a')
})
})

8
components/transfer/demo/basic.md
View File

@ -22,7 +22,13 @@ The most basic usage of `Transfer` involves providing the source data and target
:render="item=>item.title"
:disabled="disabled"
/>
<a-switch unCheckedChildren="disabled" checkedChildren="disabled" :checked="disabled" @change="handleDisable" />
<a-switch
unCheckedChildren="disabled"
checkedChildren="disabled"
:checked="disabled"
@change="handleDisable"
style="margin-top: 16px"
/>
</div>
</template>
<script>

26
components/transfer/demo/index.vue
View File

@ -11,15 +11,27 @@ const md = {
cn: `# 穿梭框
双栏穿梭选择框。
## 何时使用
用直观的方式在两栏中移动元素，完成选择行为。
- 需要在多个可选项中进行多选时。
- 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。
穿梭选择框用直观的方式在两栏中移动元素，完成选择行为。
选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。
其中，左边一栏为 'source'，右边一栏为 'target'，API 的设计也反映了这两个概念。。
其中，左边一栏为 \`source\`，右边一栏为 \`target\`，API 的设计也反映了这两个概念。
## 代码演示`,
us: `# Transfer
Transfer the elements between two columns in an intuitive and efficient way.
Double column transfer choice box.
## When To Use
- It is a select control essentially which can be use for selecting multiple items.
- Transfer can display more information for items and take up more space.
Transfer the elements between two columns in an intuitive and efficient way.
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.
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.
## Examples
`,
}
@ -33,17 +45,11 @@ export default {
return (
<div>
<md cn={md.cn} us={md.us}/>
<br/>
<Basic />
<br/>
<Search />
<br />
<Advanced />
<br/>
<CustomItem />
<br/>
<LargeData />
<br/>
<api>
<template slot='cn'>
<CN/>

4
components/transfer/demo/search.md
View File

@ -16,6 +16,7 @@ Transfer with a search box.
:filterOption="filterOption"
:targetKeys="targetKeys"
@change="handleChange"
@search="handleSearch"
:render="item=>item.title"
>
</a-transfer>
@ -57,6 +58,9 @@ export default {
console.log(targetKeys, direction, moveKeys);
this.targetKeys = targetKeys
},
handleSearch (dir, value) {
console.log('search:', dir, value);
},
},
}
</script>

4
components/transfer/index.en-US.md
View File

@ -9,7 +9,7 @@
| lazy | property of vc-lazy-load for lazy rendering items. Turn off it by set to `false`. | object\|boolean | `{ height: 32, offset: 32 }` |
| listStyle | A custom CSS style used for rendering the transfer columns. | object | |
| locale | i18n text including filter, empty text, item unit, etc | object | `{ itemUnit: 'item', itemsUnit: 'items', notFoundContent: 'The list is empty', searchPlaceholder: 'Search here' }` |
| operations | A set of operations that are sorted from bottom to top. | string\[] | ['>', '<'] |
| operations | A set of operations that are sorted from top to bottom. | string\[] | ['>', '<'] |
| render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a element and `value` is for title | Function(record) | |
| selectedKeys | A set of keys of selected items. | string\[] | \[] |
| showSearch | If included, a search box is shown on each column. | boolean | false |
@ -21,7 +21,7 @@
| --- | --- | --- |
| change | A callback function that is executed when the transfer between columns is complete. | (targetKeys, direction, moveKeys): void | |
| scroll | A callback function which is executed when scroll options list | (direction, event): void | |
| searchChange | A callback function which is executed when search field are changed | (direction: 'left'\|'right', event: Event): void | - |
| search | A callback function which is executed when search field are changed | (direction: 'left'\|'right', value: string): void | - |
| selectChange | A callback function which is executed when selected items are changed. | (sourceSelectedKeys, targetSelectedKeys): void | |
## Warning

11
components/transfer/index.jsx
View File

@ -6,6 +6,7 @@ import List from './list'
import Operation from './operation'
import LocaleReceiver from '../locale-provider/LocaleReceiver'
import defaultLocale from '../locale-provider/default'
import warning from '../_util/warning'
export const TransferDirection = 'left' | 'right'
@ -225,11 +226,16 @@ const Transfer = {
},
handleFilter (direction, e) {
const value = e.target.value
this.setState({
// add filter
[`${direction}Filter`]: e.target.value,
[`${direction}Filter`]: value,
})
this.$emit('searchChange', direction, e)
if (this.$listeners.searchChange) {
warning(false, '`searchChange` in Transfer is deprecated. Please use `search` instead.')
this.$emit('searchChange', direction, e)
}
this.$emit('search', direction, value)
},
handleLeftFilter (e) {
@ -243,6 +249,7 @@ const Transfer = {
this.setState({
[`${direction}Filter`]: '',
})
this.$emit('search', direction, '')
},
handleLeftClear () {

4
components/transfer/index.zh-CN.md
View File

@ -9,7 +9,7 @@
| lazy | Transfer 使用了 [vc-lazy-load]优化性能，这里可以设置相关参数。设为 `false` 可以关闭懒加载。 | object\|boolean | `{ height: 32, offset: 32 }` |
| listStyle | 两个穿梭框的自定义样式 | object | |
| locale | 各种语言 | object | `{ itemUnit: '项', itemsUnit: '项', notFoundContent: '列表为空', searchPlaceholder: '请输入搜索内容' }` |
| operations | 操作文案集合，顺序从下至上 | string\[] | ['>', '<'] |
| operations | 操作文案集合，顺序从上至下 | string\[] | ['>', '<'] |
| render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 element。或者返回一个普通对象，其中 `label` 字段为 element，`value` 字段为 title | Function(record) | |
| selectedKeys | 设置哪些项应该被选中 | string\[] | \[] |
| showSearch | 是否显示搜索框 | boolean | false |
@ -21,7 +21,7 @@
| --- | --- | --- |
| change | 选项在两栏之间转移时的回调函数 | (targetKeys, direction, moveKeys): void | |
| scroll | 选项列表滚动时的回调函数 | (direction, event): void | |
| searchChange | 搜索框内容时改变时的回调函数 | (direction: 'left'\|'right', event: Event): void | - |
| search | 搜索框内容时改变时的回调函数 | (direction: 'left'\|'right', value: string): void | - |
| selectChange | 选中项发生改变时的回调函数 | (sourceSelectedKeys, targetSelectedKeys): void | |
## 注意

30
components/transfer/list.jsx
View File

@ -9,10 +9,6 @@ import Item from './item'
import triggerEvent from '../_util/triggerEvent'
import addEventListener from '../_util/Dom/addEventListener'
function isIEorEDGE () {
return document.documentMode || /Edge/.test(navigator.userAgent)
}
function noop () {
}
@ -87,7 +83,6 @@ export default {
beforeDestroy () {
clearTimeout(this.timer)
clearTimeout(this.triggerScrollTimer)
clearTimeout(this.fixIERepaintTimer)
if (this.scrollEvent) {
this.scrollEvent.remove()
}
@ -135,11 +130,9 @@ export default {
triggerEvent(listNode, 'scroll')
}
}, 0)
this.fixIERepaint()
},
_handleClear (e) {
this.handleClear(e)
this.fixIERepaint()
},
matchFilter (text, item) {
const { filter, filterOption } = this.$props
@ -157,20 +150,6 @@ export default {
renderedEl: isRenderResultPlain ? renderResult.label : renderResult,
}
},
// Fix IE/Edge repaint
// https://github.com/ant-design/ant-design/issues/9697
// https://stackoverflow.com/q/27947912/3040605
fixIERepaint () {
if (!isIEorEDGE()) {
return
}
this.fixIERepaintTimer = window.setTimeout(() => {
if (this.$refs.notFoundNode) {
this.$refs.notFoundNode.className = this.$refs.notFoundNode.className
}
}, 0)
},
filterNull (arr) {
return arr.filter((item) => {
return item !== null
@ -235,6 +214,7 @@ export default {
handleClear={this.handleClear}
placeholder={searchPlaceholder}
value={filter}
disabled={disabled}
/>
</div>
) : null
@ -242,6 +222,10 @@ export default {
const transitionProps = getTransitionProps(transitionName, {
leave: noop,
})
const searchNotFound = showItems.every(item => item === null) && (
<div class={`${prefixCls}-body-not-found`}>{notFoundContent}</div>
)
const listBody = bodyDom || (
<div
class={classNames(showSearch ? `${prefixCls}-body ${prefixCls}-body-with-search` : `${prefixCls}-body`)}
@ -255,9 +239,7 @@ export default {
>
{showItems}
</transition-group>
<div class={`${prefixCls}-body-not-found`} ref='notFoundNode'>
{notFoundContent}
</div>
{searchNotFound}
</div>
)

11
components/transfer/search.jsx
View File

@ -8,6 +8,7 @@ export const TransferSearchProps = {
placeholder: PropTypes.string,
value: PropTypes.any,
handleClear: PropTypes.func,
disabled: PropTypes.bool,
}
export default {
@ -21,16 +22,17 @@ export default {
},
handleClear2 (e) {
e.preventDefault()
if (this.handleClear) {
this.handleClear(e)
const { handleClear, disabled } = this.$props
if (!disabled && handleClear) {
handleClear(e)
}
},
},
render () {
const { placeholder, value, prefixCls } = getOptionProps(this)
const { placeholder, value, prefixCls, disabled } = getOptionProps(this)
const icon = (value && value.length > 0) ? (
<a href='#' class={`${prefixCls}-action`} onClick={this.handleClear2}>
<Icon type='close-circle' />
<Icon type='close-circle' theme='filled'/>
</a>
) : (
<span class={`${prefixCls}-action`}><Icon type='search' /></span>
@ -44,6 +46,7 @@ export default {
value={value}
ref='input'
onChange={this.handleChange}
disabled={disabled}
/>
{icon}
</div>