Skip to content

Commit e78acf7

Browse files
tangjinzhoutangjinzhou
committed
feat: add tree-select
1 parent f5e10aa commit e78acf7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+4633
-8
lines changed

‎components/_util/props-util.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,16 @@ const getComponentFromProp = (instance, prop) => {
117117
}
118118
}
119119

120+
const getAllProps = (ele) => {
121+
let data = ele.data || {}
122+
let componentOptions = ele.componentOptions || {}
123+
if (ele.$vnode) {
124+
data = ele.$vnode.data || {}
125+
componentOptions = ele.$vnode.componentOptions || {}
126+
}
127+
return { ...data.props, ...data.attrs, ...componentOptions.propsData }
128+
}
129+
120130
const getPropsData = (ele) => {
121131
let componentOptions = ele.componentOptions
122132
if (ele.$vnode) {
@@ -247,5 +257,6 @@ export {
247257
isValidElement,
248258
camelize,
249259
getSlots,
260+
getAllProps,
250261
}
251262
export default hasProp

‎components/auto-complete/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { getComponentFromProp, getOptionProps, filterEmpty, isValidElement } fro
2121
// }
2222

2323
const AutoCompleteProps = {
24-
...AbstractSelectProps,
24+
...AbstractSelectProps(),
2525
value: SelectValue,
2626
defaultValue: SelectValue,
2727
dataSource: PropTypes.array,

‎components/index.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ import { default as Transfer } from './transfer'
102102

103103
import { default as Tree } from './tree'
104104

105-
// import { default as TreeSelect } from './tree-select'
105+
import { default as TreeSelect } from './tree-select'
106106

107107
import { default as Tabs } from './tabs'
108108

@@ -196,6 +196,8 @@ const components = [
196196
Transfer,
197197
Tree,
198198
Tree.TreeNode,
199+
TreeSelect,
200+
TreeSelect.TreeNode,
199201
Tabs,
200202
Tabs.TabPane,
201203
Tag,
@@ -269,6 +271,7 @@ export {
269271
Table,
270272
Transfer,
271273
Tree,
274+
TreeSelect,
272275
Tabs,
273276
Tag,
274277
TimePicker,

‎components/select/index.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver'
55
import defaultLocale from '../locale-provider/default'
66
import { getComponentFromProp, getOptionProps, filterEmpty } from '../_util/props-util'
77

8-
const AbstractSelectProps = {
8+
const AbstractSelectProps = () => ({
99
prefixCls: PropTypes.string,
1010
size: PropTypes.oneOf(['small', 'large', 'default']),
1111
notFoundContent: PropTypes.any,
@@ -28,7 +28,7 @@ const AbstractSelectProps = {
2828
autoFocus: PropTypes.bool,
2929
backfill: PropTypes.bool,
3030
showArrow: PropTypes.bool,
31-
}
31+
})
3232
const Value = PropTypes.shape({
3333
key: PropTypes.string,
3434
}).loose
@@ -45,7 +45,7 @@ const SelectValue = PropTypes.oneOfType([
4545
])
4646

4747
const SelectProps = {
48-
...AbstractSelectProps,
48+
...AbstractSelectProps(),
4949
value: SelectValue,
5050
defaultValue: SelectValue,
5151
mode: PropTypes.oneOf(['default', 'multiple', 'tags', 'combobox']),

‎components/style.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,4 @@ import './layout/style'
4646
import './form/style'
4747
import './anchor/style'
4848
import './list/style'
49+
import './tree-select/style'

‎components/tree-select/__tests__/__snapshots__/demo.test.js.snap

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`renders ./components/tree-select/demo/basic.md correctly 1`] = `
4+
<span class="ant-select ant-select-enabled ant-select-allow-clear ant-select ant-select-enabled ant-select-allow-clear" style="width: 300px;"><span role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection
5+
ant-select-selection--single"><span class="ant-select-selection__rendered"><span class="ant-select-selection__placeholder">Please select</span></span><span class="ant-select-arrow" style="outline: none;"><b></b></span></span>
6+
</span>
7+
`;
8+
9+
exports[`renders ./components/tree-select/demo/checkable.md correctly 1`] = `
10+
<span class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width: 300px;"><span role="combobox" aria-autocomplete="list" aria-haspopup="true" class="ant-select-selection
11+
ant-select-selection--multiple"><div class="ant-select-selection__rendered"><li title="Node1" unselectable="unselectable" class="ant-select-selection__choice"><span class="ant-select-selection__choice__remove"></span><span class="ant-select-selection__choice__content">Node1</span></li>
12+
<li
13+
class="ant-select-search ant-select-search--inline"><span class="ant-select-search__field__wrap"><input role="textbox" class="ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></span>
14+
</li>
15+
</div><span class="ant-select-search__field__placeholder" style="display: none;">Please select</span></span>
16+
</span>
17+
`;
18+
19+
exports[`renders ./components/tree-select/demo/multiple.md correctly 1`] = `
20+
<span class="ant-select ant-select-enabled ant-select-allow-clear ant-select ant-select-enabled ant-select-allow-clear" style="width: 300px;"><span role="combobox" aria-autocomplete="list" aria-haspopup="true" class="ant-select-selection
21+
ant-select-selection--multiple"><div class="ant-select-selection__rendered"><li class="ant-select-search ant-select-search--inline"><span class="ant-select-search__field__wrap"><input role="textbox" class="ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></span>
22+
</li>
23+
</div><span class="ant-select-search__field__placeholder" style="display: block;">Please select</span></span>
24+
</span>
25+
`;
26+
27+
exports[`renders ./components/tree-select/demo/treeData.md correctly 1`] = `
28+
<span class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width: 300px;"><span role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection
29+
ant-select-selection--single"><span class="ant-select-selection__rendered"><span class="ant-select-selection__placeholder">Please select</span></span><span class="ant-select-arrow" style="outline: none;"><b></b></span></span>
30+
</span>
31+
`;

‎components/tree-select/__tests__/demo.test.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import demoTest from '../../../tests/shared/demoTest'
2+
3+
demoTest('tree-select')

‎components/tree-select/__tests__/index.test.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import TreeSelect from '..'
2+
import focusTest from '../../../tests/shared/focusTest'
3+
4+
describe('TreeSelect', () => {
5+
focusTest(TreeSelect)
6+
})

‎components/tree-select/demo/basic.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<cn>
2+
#### 基本用法
3+
最简单的用法。
4+
</cn>
5+
6+
<us>
7+
#### Basic
8+
The most basic usage.
9+
</us>
10+
11+
```html
12+
<template>
13+
<a-tree-select
14+
showSearch
15+
style="width: 300px"
16+
:value="value"
17+
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
18+
placeholder='Please select'
19+
allowClear
20+
treeDefaultExpandAll
21+
@change="onChange"
22+
>
23+
<a-tree-select-node value='parent 1' title='parent 1' key='0-1'>
24+
<a-tree-select-node value='parent 1-0' title='parent 1-0' key='0-1-1'>
25+
<a-tree-select-node value='leaf1' title='my leaf' key='random' />
26+
<a-tree-select-node value='leaf2' title='your leaf' key='random1' />
27+
</a-tree-select-node>
28+
<a-tree-select-node value='parent 1-1' title='parent 1-1' key='random2'>
29+
<a-tree-select-node value='sss' key='random3'>
30+
<b style="color: #08c" slot="title">sss</b>
31+
</a-tree-select-node>
32+
</a-tree-select-node>
33+
</a-tree-select-node>
34+
</a-tree-select>
35+
</template>
36+
37+
<script>
38+
39+
export default {
40+
data () {
41+
return {
42+
value: undefined,
43+
}
44+
},
45+
methods: {
46+
onChange (value) {
47+
console.log(arguments)
48+
this.value = value
49+
},
50+
},
51+
}
52+
</script>
53+
```

‎components/tree-select/demo/checkable.md

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<cn>
2+
#### 可勾选
3+
使用勾选框实现多选功能。
4+
</cn>
5+
6+
<us>
7+
#### Checkable
8+
Multiple and checkable.
9+
</us>
10+
11+
```html
12+
<template>
13+
<a-tree-select
14+
style="width: 300px"
15+
:treeData="treeData"
16+
:value="value"
17+
@change="onChange"
18+
treeCheckable
19+
:showCheckedStrategy="SHOW_PARENT"
20+
searchPlaceholder='Please select'
21+
treeNodeFilterProp='label'
22+
/>
23+
</template>
24+
25+
<script>
26+
import { TreeSelect } from 'vue-antd-ui'
27+
const SHOW_PARENT = TreeSelect.SHOW_PARENT
28+
29+
const treeData = [{
30+
label: 'Node1',
31+
value: '0-0',
32+
key: '0-0',
33+
children: [{
34+
label: 'Child Node1',
35+
value: '0-0-0',
36+
key: '0-0-0',
37+
}],
38+
}, {
39+
label: 'Node2',
40+
value: '0-1',
41+
key: '0-1',
42+
children: [{
43+
label: 'Child Node3',
44+
value: '0-1-0',
45+
key: '0-1-0',
46+
disabled: true,
47+
}, {
48+
label: 'Child Node4',
49+
value: '0-1-1',
50+
key: '0-1-1',
51+
}, {
52+
label: 'Child Node5',
53+
value: '0-1-2',
54+
key: '0-1-2',
55+
}],
56+
}]
57+
export default {
58+
data () {
59+
return {
60+
value: ['0-0-0'],
61+
treeData,
62+
SHOW_PARENT,
63+
}
64+
},
65+
methods: {
66+
onChange (value) {
67+
console.log('onChange ', value, arguments)
68+
this.value = value
69+
},
70+
},
71+
}
72+
</script>
73+
```

0 commit comments

Comments
 (0)