Skip to content

Commit 659aff5

Browse files
tangjinzhoutangjinzhou
committed
add vc-tree
1 parent dc5482f commit 659aff5

File tree

8 files changed

+516
-75
lines changed

8 files changed

+516
-75
lines changed

‎components/vc-tree/demo/animation.vue‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<script>
2+
/* eslint no-console:0 */
3+
import Tree, { TreeNode } from '../index'
4+
import '../assets/index.less'
5+
import cssAnimation from 'css-animation'
6+
7+
function animate (node, show, done) {
8+
let height = node.offsetHeight
9+
return cssAnimation(node, 'collapse', {
10+
start () {
11+
if (!show) {
12+
node.style.height = `${node.offsetHeight}px`
13+
} else {
14+
height = node.offsetHeight
15+
node.style.height = 0
16+
}
17+
},
18+
active () {
19+
node.style.height = `${show ? height : 0}px`
20+
},
21+
end () {
22+
node.style.height = ''
23+
done()
24+
},
25+
})
26+
}
27+
28+
const animation = {
29+
enter (node, done) {
30+
return animate(node, true, done)
31+
},
32+
leave (node, done) {
33+
return animate(node, false, done)
34+
},
35+
}
36+
export default {
37+
render () {
38+
return (
39+
<div>
40+
<h2>expanded</h2>
41+
<Tree
42+
defaultExpandAll={false}
43+
defaultExpandedKeys={['p1']}
44+
openAnimation={{ on: animation, props: { appear: true }}}
45+
>
46+
<TreeNode title='parent 1' key='p1'>
47+
<TreeNode key='p10' title='leaf'/>
48+
<TreeNode title='parent 1-1' key='p11'>
49+
<TreeNode title='parent 2-1' key='p21'>
50+
<TreeNode title='leaf'/>
51+
<TreeNode title='leaf'/>
52+
</TreeNode>
53+
<TreeNode key='p22' title='leaf'/>
54+
</TreeNode>
55+
</TreeNode>
56+
</Tree>
57+
</div>
58+
)
59+
},
60+
}
61+
62+
</script>
63+
<style>
64+
.collapse {
65+
overflow: hidden;
66+
display: block;
67+
}
68+
69+
.collapse-active {
70+
transition: height 0.3s ease-out;
71+
}
72+
</style>

‎components/vc-tree/demo/basic-controlled.vue‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
<script>
2+
/* eslint no-console:0 */
3+
import Tree, { TreeNode } from '../index'
4+
import '../assets/index.less'
5+
import { gData,
6+
/* filterParentPosition, getFilterExpandedKeys,*/ getRadioSelectKeys } from './util'
7+
import '../../vc-dialog/assets/index.less'
8+
import Modal from '../../vc-dialog'
9+
import BaseMixin from '../../_util/BaseMixin'
10+
11+
export default {
12+
mixins: [BaseMixin],
13+
data () {
14+
return {
15+
// expandedKeys: getFilterExpandedKeys(gData, ['0-0-0-key']),
16+
expandedKeys: ['0-0-0-key'],
17+
autoExpandParent: true,
18+
// checkedKeys: ['0-0-0-0-key', '0-0-1-0-key', '0-1-0-0-key'],
19+
checkedKeys: ['0-0-0-key'],
20+
checkStrictlyKeys: { checked: ['0-0-1-key'], halfChecked: [] },
21+
selectedKeys: [],
22+
treeData: [],
23+
visible: false,
24+
multiple: true,
25+
}
26+
},
27+
methods: {
28+
onExpand (expandedKeys) {
29+
console.log('onExpand', arguments)
30+
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
31+
// or, you can remove all expanded chilren keys.
32+
this.setState({
33+
expandedKeys,
34+
autoExpandParent: false,
35+
})
36+
},
37+
onCheck (checkedKeys) {
38+
this.setState({
39+
checkedKeys,
40+
})
41+
},
42+
onCheckStrictly (checkedKeys, /* extra*/) {
43+
console.log(arguments)
44+
// const { checkedNodesPositions } = extra;
45+
// const pps = filterParentPosition(checkedNodesPositions.map(i => i.pos));
46+
// console.log(checkedNodesPositions.filter(i => pps.indexOf(i.pos) > -1).map(i => i.node.key));
47+
const cks = {
48+
checked: checkedKeys.checked || checkedKeys,
49+
halfChecked: [`0-0-${parseInt(Math.random() * 3, 10)}-key`],
50+
}
51+
this.setState({
52+
// checkedKeys,
53+
checkStrictlyKeys: cks,
54+
// checkStrictlyKeys: checkedKeys,
55+
})
56+
},
57+
onSelect (selectedKeys, info) {
58+
console.log('onSelect', selectedKeys, info)
59+
this.setState({
60+
selectedKeys,
61+
})
62+
},
63+
onRbSelect (selectedKeys, info) {
64+
let _selectedKeys = selectedKeys
65+
if (info.selected) {
66+
_selectedKeys = getRadioSelectKeys(gData, selectedKeys, info.node.props.eventKey)
67+
}
68+
this.setState({
69+
selectedKeys: _selectedKeys,
70+
})
71+
},
72+
onClose () {
73+
this.setState({
74+
visible: false,
75+
})
76+
},
77+
handleOk () {
78+
this.setState({
79+
visible: false,
80+
})
81+
},
82+
showModal () {
83+
this.setState({
84+
expandedKeys: ['0-0-0-key', '0-0-1-key'],
85+
checkedKeys: ['0-0-0-key'],
86+
visible: true,
87+
})
88+
// simulate Ajax
89+
setTimeout(() => {
90+
this.setState({
91+
treeData: [...gData],
92+
})
93+
}, 2000)
94+
},
95+
triggerChecked () {
96+
this.setState({
97+
checkedKeys: [`0-0-${parseInt(Math.random() * 3, 10)}-key`],
98+
})
99+
},
100+
},
101+
102+
render () {
103+
const loop = data => {
104+
return data.map((item) => {
105+
if (item.children) {
106+
return (
107+
<TreeNode
108+
key={item.key} title={item.title}
109+
disableCheckbox={item.key === '0-0-0-key'}
110+
>
111+
{loop(item.children)}
112+
</TreeNode>
113+
)
114+
}
115+
return <TreeNode key={item.key} title={item.title} />
116+
})
117+
}
118+
// console.log(getRadioSelectKeys(gData, this.selectedKeys));
119+
return (<div style={{ padding: '0 20px' }}>
120+
<h2>dialog</h2>
121+
<button class='btn btn-primary' onClick={this.showModal}>show dialog</button>
122+
<Modal
123+
title='TestDemo' visible={this.visible}
124+
onOk={this.handleOk} onClose={this.onClose}
125+
>
126+
{this.treeData.length ? (
127+
<Tree
128+
checkable class='dialog-tree'
129+
onExpand={this.onExpand} expandedKeys={this.expandedKeys}
130+
autoExpandParent={this.autoExpandParent}
131+
onCheck={this.onCheck} checkedKeys={this.checkedKeys}
132+
>
133+
{loop(this.treeData)}
134+
</Tree>
135+
) : 'loading...'}
136+
</Modal>
137+
138+
<h2>controlled</h2>
139+
<Tree
140+
checkable
141+
onExpand={this.onExpand} expandedKeys={this.expandedKeys}
142+
autoExpandParent={this.autoExpandParent}
143+
onCheck={this.onCheck} checkedKeys={this.checkedKeys}
144+
onSelect={this.onSelect} selectedKeys={this.selectedKeys}
145+
>
146+
{loop(gData)}
147+
</Tree>
148+
<button onClick={this.triggerChecked}>trigger checked</button>
149+
150+
<h2>checkStrictly</h2>
151+
<Tree
152+
checkable multiple={this.multiple} defaultExpandAll
153+
onExpand={this.onExpand} expandedKeys={this.expandedKeys}
154+
onCheck={this.onCheckStrictly}
155+
checkedKeys={this.checkStrictlyKeys}
156+
157+
>
158+
{loop(gData)}
159+
</Tree>
160+
161+
<h2>radio's behavior select (in the same level)</h2>
162+
<Tree
163+
multiple defaultExpandAll
164+
onSelect={this.onRbSelect}
165+
selectedKeys={getRadioSelectKeys(gData, this.selectedKeys) }
166+
>
167+
{loop(gData)}
168+
</Tree>
169+
</div>)
170+
},
171+
}
172+
173+
</script>

‎components/vc-tree/demo/basic.jsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ export default {
1616
defaultSelectedKeys: keys,
1717
defaultCheckedKeys: keys,
1818
switchIt: true,
19-
showMore: false,
2019
}
2120
},
2221
methods: {
@@ -55,7 +54,7 @@ export default {
5554
</span>)
5655
return (<div style={{ margin: '0 20px' }}>
5756
<h2>simple</h2>
58-
{/* <Tree
57+
<Tree
5958
class='myCls' showLine checkable defaultExpandAll
6059
defaultExpandedKeys={this.defaultExpandedKeys}
6160
onExpand={this.onExpand}
@@ -77,10 +76,9 @@ export default {
7776
<TreeNode title='parent 1-2-1' key='0-0-2-1' />
7877
</TreeNode>
7978
</TreeNode>
80-
</Tree> */}
79+
</Tree>
8180

8281
<h2>Check on Click TreeNode</h2>
83-
<button onClick={this.toggleChildren}>toggle children</button>
8482
<Tree
8583
class='myCls'
8684
showLine
@@ -98,10 +96,6 @@ export default {
9896
<TreeNode title='parent 1-1-0' key='0-0-1-0' disableCheckbox />
9997
<TreeNode title='parent 1-1-1' key='0-0-1-1' />
10098
</TreeNode>
101-
{this.showMore ? <TreeNode title='parent 2-1' key='0-0-2'>
102-
<TreeNode title='parent 2-1-0' key='0-0-2-0' disableCheckbox />
103-
<TreeNode title='parent 2-1-1' key='0-0-2-1' />
104-
</TreeNode> : null}
10599
</TreeNode>
106100
</Tree>
107101
</div>)

0 commit comments

Comments
 (0)