Skip to content

Commit 41a1f85

Browse files
tangjinzhoutangjinzhou
committed
add vc-tree demo
1 parent 25631cf commit 41a1f85

File tree

9 files changed

+232
-47
lines changed

9 files changed

+232
-47
lines changed

‎components/tabs/tabs.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
import Tabs from '../vc-tabs/src/Tabs'
33
import isFlexSupported from '../_util/isFlexSupported'
4-
import { hasProp, getComponentFromProp, getComponentName, isEmptyElement, getSlotOptions } from '../_util/props-util'
4+
import { hasProp, getComponentFromProp, isEmptyElement, getSlotOptions } from '../_util/props-util'
55
import warning from '../_util/warning'
66
export default {
77
name: 'ATabs',

‎components/vc-tree/demo/contextmenu.less‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@contextmenuPrefixCls: rc-tree-contextmenu;
2+
.@{contextmenuPrefixCls} {
3+
position: absolute;
4+
left: -9999px;
5+
top: -9999px;
6+
z-index: 1070;
7+
display: block;
8+
background-color: #fff;
9+
10+
&-hidden {
11+
display: none;
12+
}
13+
14+
&-inner {
15+
border: 1px solid #ddd;
16+
padding: 10px 20px;
17+
}
18+
}

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

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<script>
2+
/* eslint no-console:0 */
3+
import Tree, { TreeNode } from '../index'
4+
import '../assets/index.less'
5+
import './contextmenu.less'
6+
7+
export default {
8+
data () {
9+
return {
10+
selectedKeys: ['0-1', '0-1-1'],
11+
}
12+
},
13+
methods: {
14+
onSelect (selectedKeys) {
15+
this.selectedKeys = selectedKeys
16+
},
17+
onRightClick (info) {
18+
console.log('right click', info)
19+
this.selectedKeys = [info.node.eventKey]
20+
},
21+
onMouseEnter (info) {
22+
console.log('enter', info)
23+
},
24+
onMouseLeave (info) {
25+
console.log('leave', info)
26+
},
27+
},
28+
29+
render () {
30+
return (
31+
<div>
32+
<h2>right click contextmenu</h2>
33+
<Tree
34+
onRightClick={this.onRightClick}
35+
onSelect={this.onSelect}
36+
selectedKeys={this.selectedKeys}
37+
multiple
38+
defaultExpandAll
39+
showLine
40+
showIcon={false}
41+
>
42+
<TreeNode title='parent 1' key='0-1'>
43+
<TreeNode title='parent 1-0' key='0-1-1'>
44+
<TreeNode title='leaf0' isLeaf />
45+
<TreeNode title='leaf1' isLeaf />
46+
<TreeNode title='leaf2' isLeaf />
47+
</TreeNode>
48+
<TreeNode title='parent 1-1'>
49+
<TreeNode title='leaf' isLeaf />
50+
</TreeNode>
51+
</TreeNode>
52+
</Tree>
53+
<h2>hover popup contextmenu</h2>
54+
<Tree
55+
onMouseenter={this.onMouseEnter} onMouseleave={this.onMouseLeave}
56+
onSelect={this.onSelect}
57+
multiple defaultExpandAll showLine
58+
>
59+
<TreeNode title='parent 1' key='0-1'>
60+
<TreeNode title='parent 1-0' key='0-1-1'>
61+
<TreeNode title='leaf' isLeaf />
62+
<TreeNode title='leaf' />
63+
</TreeNode>
64+
<TreeNode title='parent 1-1'>
65+
<TreeNode title='leaf' />
66+
</TreeNode>
67+
</TreeNode>
68+
</Tree>
69+
</div>
70+
)
71+
},
72+
}
73+
74+
</script>
75+

‎components/vc-tree/demo/draggable.less‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
.draggable-demo{
3+
padding: 0 20px;
4+
.draggable-container {
5+
margin: 10px 30px;
6+
width: 200px;
7+
height: 200px;
8+
overflow: auto;
9+
border: 1px solid #ccc;
10+
}
11+
}

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

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<script>
2+
/* eslint no-console:0 */
3+
import './draggable.less'
4+
import Tree, { TreeNode } from '../index'
5+
import '../assets/index.less'
6+
import { gData } from './util'
7+
import BaseMixin from '../../_util/BaseMixin'
8+
9+
export default {
10+
mixins: [BaseMixin],
11+
data () {
12+
return {
13+
gData,
14+
autoExpandParent: true,
15+
expandedKeys: ['0-0-key', '0-0-0-key', '0-0-0-0-key'],
16+
}
17+
},
18+
methods: {
19+
onDragStart (info) {
20+
console.log('start', info)
21+
},
22+
onDragEnter (info) {
23+
console.log('enter', info)
24+
this.setState({
25+
expandedKeys: info.expandedKeys,
26+
})
27+
},
28+
onDrop (info) {
29+
console.log('drop', info)
30+
const dropKey = info.node.eventKey
31+
const dragKey = info.dragNode.eventKey
32+
const dropPos = info.node.pos.split('-')
33+
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
34+
// const dragNodesKeys = info.dragNodesKeys;
35+
const loop = (data, key, callback) => {
36+
data.forEach((item, index, arr) => {
37+
if (item.key === key) {
38+
return callback(item, index, arr)
39+
}
40+
if (item.children) {
41+
return loop(item.children, key, callback)
42+
}
43+
})
44+
}
45+
const data = [...this.gData]
46+
let dragObj
47+
loop(data, dragKey, (item, index, arr) => {
48+
arr.splice(index, 1)
49+
dragObj = item
50+
})
51+
if (info.dropToGap) {
52+
let ar
53+
let i
54+
loop(data, dropKey, (item, index, arr) => {
55+
ar = arr
56+
i = index
57+
})
58+
if (dropPosition === -1) {
59+
ar.splice(i, 0, dragObj)
60+
} else {
61+
ar.splice(i + 1, 0, dragObj)
62+
}
63+
} else {
64+
loop(data, dropKey, (item) => {
65+
item.children = item.children || []
66+
// where to insert 示例添加到尾部，可以是随意位置
67+
item.children.push(dragObj)
68+
})
69+
}
70+
this.setState({
71+
gData: data,
72+
})
73+
},
74+
onExpand (expandedKeys) {
75+
console.log('onExpand', arguments)
76+
this.setState({
77+
expandedKeys,
78+
autoExpandParent: false,
79+
})
80+
},
81+
},
82+
83+
render () {
84+
const loop = data => {
85+
return data.map((item) => {
86+
if (item.children && item.children.length) {
87+
return <TreeNode key={item.key} title={item.title}>{loop(item.children)}</TreeNode>
88+
}
89+
return <TreeNode key={item.key} title={item.title} />
90+
})
91+
}
92+
return (<div class='draggable-demo'>
93+
<h2>draggable</h2>
94+
<p>drag a node into another node</p>
95+
<div class='draggable-container'>
96+
<Tree
97+
expandedKeys={this.expandedKeys}
98+
onExpand={this.onExpand} autoExpandParent={this.autoExpandParent}
99+
draggable
100+
onDragstart={this.onDragStart}
101+
onDragenter={this.onDragEnter}
102+
onDrop={this.onDrop}
103+
>
104+
{loop(this.gData)}
105+
</Tree>
106+
</div>
107+
</div>)
108+
},
109+
}
110+
111+
</script>

‎components/vc-tree/src/Tree.jsx‎

Lines changed: 13 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import PropTypes from '../../_util/vue-types'
22
import classNames from 'classnames'
33
import warning from 'warning'
4-
import { initDefaultProps, getOptionProps } from '../../_util/props-util'
4+
import { initDefaultProps, getOptionProps, getSlots } from '../../_util/props-util'
55
import { cloneElement } from '../../_util/vnode'
66
import BaseMixin from '../../_util/BaseMixin'
77
import {
@@ -162,9 +162,10 @@ const Tree = {
162162
}
163163
return {
164164
...state,
165-
...(this.getSyncProps(props) || {}),
165+
...this.getSyncProps(props),
166166
dragOverNodeKey: '',
167167
dropPosition: null,
168+
dragNodesKeys: [],
168169
}
169170
},
170171
provide () {
@@ -203,8 +204,8 @@ const Tree = {
203204
methods: {
204205
onNodeDragStart (event, node) {
205206
const { sExpandedKeys } = this
206-
const { eventKey, children } = node.props
207-
207+
const { eventKey } = node
208+
const children = getSlots(node).default
208209
this.dragNode = node
209210

210211
this.setState({
@@ -223,13 +224,13 @@ const Tree = {
223224
*/
224225
onNodeDragEnter (event, node) {
225226
const { sExpandedKeys } = this
226-
const { pos, eventKey } = node.props
227+
const { pos, eventKey } = node
227228

228229
const dropPosition = calcDropPosition(event, node)
229230

230231
// Skip if drag node is self
231232
if (
232-
this.dragNode.props.eventKey === eventKey &&
233+
this.dragNode.eventKey === eventKey &&
233234
dropPosition === 0
234235
) {
235236
this.setState({
@@ -268,7 +269,7 @@ const Tree = {
268269
}, 0)
269270
},
270271
onNodeDragOver (event, node) {
271-
const { eventKey } = node.props
272+
const { eventKey } = node
272273

273274
// Update drag position
274275
if (this.dragNode && eventKey === this.dragOverNodeKey) {
@@ -297,7 +298,7 @@ const Tree = {
297298
onNodeDrop (event, node) {
298299
const { dragNodesKeys, dropPosition } = this
299300

300-
const { eventKey, pos } = node.props
301+
const { eventKey, pos } = node
301302

302303
this.setState({
303304
dragOverNodeKey: '',
@@ -509,46 +510,21 @@ const Tree = {
509510
/**
510511
* Sync state with props if needed
511512
*/
512-
getSyncProps (props = {}, prevProps) {
513-
let needSync = false
513+
getSyncProps (props = {}) {
514514
const newState = {}
515-
const myPrevProps = prevProps || {}
516515
const children = this.$slots.default
517-
function checkSync (name) {
518-
if (props[name] !== myPrevProps[name]) {
519-
needSync = true
520-
return true
521-
}
522-
return false
523-
}
524-
525-
// Children change will affect check box status.
526-
// And no need to check when prev props not provided
527-
if (prevProps && checkSync('children')) {
528-
const { checkedKeys = [], halfCheckedKeys = [] } =
529-
calcCheckedKeys(props.checkedKeys || this.sCheckedKeys, props, children) || {}
530-
newState.sCheckedKeys = checkedKeys
531-
newState.sHalfCheckedKeys = halfCheckedKeys
532-
}
533-
534-
// Re-calculate when autoExpandParent or expandedKeys changed
535-
if (prevProps && (checkSync('autoExpandParent') || checkSync('expandedKeys'))) {
536-
newState.sExpandedKeys = props.autoExpandParent
537-
? calcExpandedKeys(props.expandedKeys, props, children) : props.expandedKeys
538-
}
539-
540-
if (checkSync('selectedKeys')) {
516+
if (props.selectedKeys !== undefined) {
541517
newState.sSelectedKeys = calcSelectedKeys(props.selectedKeys, props, children)
542518
}
543519

544-
if (checkSync('checkedKeys')) {
520+
if (props.checkedKeys !== undefined) {
545521
const { checkedKeys = [], halfCheckedKeys = [] } =
546522
calcCheckedKeys(props.checkedKeys, props, children) || {}
547523
newState.sCheckedKeys = checkedKeys
548524
newState.sHalfCheckedKeys = halfCheckedKeys
549525
}
550526

551-
return needSync ? newState : null
527+
return newState
552528
},
553529

554530
/**

‎components/vc-tree/src/TreeNode.jsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -291,11 +291,6 @@ const TreeNode = {
291291
}
292292
},
293293

294-
// Drag usage
295-
setSelectHandle (node) {
296-
this.selectHandle = node
297-
},
298-
299294
getNodeChildren () {
300295
const { $slots: { default: children }} = this
301296
const originList = filterEmpty(children)
@@ -497,10 +492,9 @@ const TreeNode = {
497492
)}
498493
draggable={(!disabled && draggable) || undefined}
499494
aria-grabbed={(!disabled && draggable) || undefined}
500-
501495
onMouseenter={this.onMouseEnter}
502496
onMouseleave={this.onMouseLeave}
503-
onContexmenu={this.onContextMenu}
497+
onContextmenu={this.onContextMenu}
504498
onClick={this.onSelectorClick}
505499
onDragstart={this.onDragStart}
506500
>

‎components/vc-tree/src/util.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ export function getDragNodesKeys (treeNodes, node) {
176176

177177
export function calcDropPosition (event, treeNode) {
178178
const { clientY } = event
179-
const { top, bottom, height } = treeNode.selectHandle.getBoundingClientRect()
179+
const { top, bottom, height } = treeNode.$refs.selectHandle.getBoundingClientRect()
180180
const des = Math.max(height * DRAG_SIDE_RANGE, DRAG_MIN_GAP)
181181

182182
if (clientY <= top + des) {

‎site/routes.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Layout from './components/layout.vue'
33
const AsyncTestComp = () => {
44
const d = window.location.hash.replace('#', '')
55
return {
6-
component: import(`../components/vc-upload/demo/${d}`),
6+
component: import(`../components/vc-tree/demo/${d}`),
77
}
88
}
99

0 commit comments

Comments
 (0)