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

add vc-tree

pull/165/head
tjz 2018-03-24 17:12:22 +08:00
parent 5ea54b104a
commit bbfbc8fe4f
7 changed files with 987 additions and 857 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
components/vc-tree/demo/basic.jsx Normal file
View File

@ -0,0 +1,110 @@
/* eslint no-console:0 */
/* eslint no-alert:0 */
import PropTypes from '../../_util/vue-types'
import Tree, { TreeNode } from '../index'
import '../assets/index.less'
import './basic.less'
export default {
props: {
keys: PropTypes.array.def(['0-0-0-0']),
},
data () {
const keys = this.keys
return {
defaultExpandedKeys: keys,
defaultSelectedKeys: keys,
defaultCheckedKeys: keys,
switchIt: true,
showMore: false,
}
},
methods: {
onExpand (expandedKeys) {
console.log('onExpand', expandedKeys, arguments)
},
onSelect (selectedKeys, info) {
console.log('selected', selectedKeys, info)
this.selKey = info.node.$options.propsData.eventKey
},
onCheck (checkedKeys, info) {
console.log('onCheck', checkedKeys, info)
},
onEdit () {
setTimeout(() => {
console.log('current key: ', this.selKey)
}, 0)
},
onDel (e) {
if (!window.confirm('sure to delete?')) {
return
}
e.stopPropagation()
},
toggleChildren () {
this.showMore = !this.showMore
},
},
render () {
const customLabel = (<span class='cus-label'>
<span>operations: </span>
<span style={{ color: 'blue' }} onClick={this.onEdit}>Edit</span>&nbsp;
<label onClick={(e) => e.stopPropagation()}><input type='checkbox' /> checked</label> &nbsp;
<span style={{ color: 'red' }} onClick={this.onDel}>Delete</span>
</span>)
return (<div style={{ margin: '0 20px' }}>
<h2>simple</h2>
{/* <Tree
class='myCls' showLine checkable defaultExpandAll
defaultExpandedKeys={this.defaultExpandedKeys}
onExpand={this.onExpand}
defaultSelectedKeys={this.defaultSelectedKeys}
defaultCheckedKeys={this.defaultCheckedKeys}
onSelect={this.onSelect} onCheck={this.onCheck}
>
<TreeNode title='parent 1' key='0-0'>
<TreeNode title={customLabel} key='0-0-0'>
<TreeNode title='leaf' key='0-0-0-0' />
<TreeNode title='leaf' key='0-0-0-1' />
</TreeNode>
<TreeNode title='parent 1-1' key='0-0-1'>
<TreeNode title='parent 1-1-0' key='0-0-1-0' disableCheckbox />
<TreeNode title='parent 1-1-1' key='0-0-1-1' />
</TreeNode>
<TreeNode title='parent 1-2' key='0-0-2' disabled>
<TreeNode title='parent 1-2-0' key='0-0-2-0' disabled />
<TreeNode title='parent 1-2-1' key='0-0-2-1' />
</TreeNode>
</TreeNode>
</Tree> */}
<h2>Check on Click TreeNode</h2>
<button onClick={this.toggleChildren}>toggle children</button>
<Tree
class='myCls'
showLine
checkable
selectable={ false }
defaultExpandAll
onExpand={this.onExpand}
defaultSelectedKeys={this.defaultSelectedKeys}
defaultCheckedKeys={this.defaultCheckedKeys}
onSelect={this.onSelect}
onCheck={this.onCheck}
>
<TreeNode title='parent 1' key='0-0'>
<TreeNode title='parent 1-1' key='0-0-1'>
<TreeNode title='parent 1-1-0' key='0-0-1-0' disableCheckbox />
<TreeNode title='parent 1-1-1' key='0-0-1-1' />
</TreeNode>
{this.showMore ? <TreeNode title='parent 2-1' key='0-0-2'>
<TreeNode title='parent 2-1-0' key='0-0-2-0' disableCheckbox />
<TreeNode title='parent 2-1-1' key='0-0-2-1' />
</TreeNode> : null}
</TreeNode>
</Tree>
</div>)
},
}

6
components/vc-tree/demo/basic.less Normal file
View File

@ -0,0 +1,6 @@
.rc-tree li a.rc-tree-node-selected{
.cus-label {
background-color: white;
border: none;
}
}

296
components/vc-tree/src/Tree.jsx
View File

@ -1,7 +1,9 @@
import PropTypes from '../../_util/vue-types' import PropTypes from '../../_util/vue-types'
import classNames from 'classnames' import classNames from 'classnames'
import warning from 'warning' import warning from 'warning'
import { initDefaultProps, getOptionProps, filterEmpty } from '../../_util/props-util' import { initDefaultProps, getOptionProps } from '../../_util/props-util'
import { cloneElement } from '../../_util/vnode'
import BaseMixin from '../../_util/BaseMixin'
import { import {
traverseTreeNodes, getStrictlyValue, traverseTreeNodes, getStrictlyValue,
getFullKeyList, getPosition, getDragNodesKeys, getFullKeyList, getPosition, getDragNodesKeys,
@ -54,6 +56,8 @@ export const contextTypes = {
} }
const Tree = { const Tree = {
name: 'Tree',
mixins: [BaseMixin],
props: initDefaultProps({ props: initDefaultProps({
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
showLine: PropTypes.bool, showLine: PropTypes.bool,
@ -79,9 +83,9 @@ const Tree = {
]), ]),
defaultSelectedKeys: PropTypes.arrayOf(PropTypes.string), defaultSelectedKeys: PropTypes.arrayOf(PropTypes.string),
selectedKeys: PropTypes.arrayOf(PropTypes.string), selectedKeys: PropTypes.arrayOf(PropTypes.string),
//onExpand: PropTypes.func, // onExpand: PropTypes.func,
//onCheck: PropTypes.func, // onCheck: PropTypes.func,
//onSelect: PropTypes.func, // onSelect: PropTypes.func,
loadData: PropTypes.func, loadData: PropTypes.func,
// onMouseEnter: PropTypes.func, // onMouseEnter: PropTypes.func,
// onMouseLeave: PropTypes.func, // onMouseLeave: PropTypes.func,
@ -95,6 +99,7 @@ const Tree = {
filterTreeNode: PropTypes.func, filterTreeNode: PropTypes.func,
openTransitionName: PropTypes.string, openTransitionName: PropTypes.string,
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
children: PropTypes.any,
}, { }, {
prefixCls: 'rc-tree', prefixCls: 'rc-tree',
showLine: false, showLine: false,
@ -122,50 +127,74 @@ const Tree = {
defaultCheckedKeys, defaultCheckedKeys,
defaultSelectedKeys, defaultSelectedKeys,
} = props } = props
const children = this.$slots.default
// Sync state with props // Sync state with props
const { checkedKeys = [], halfCheckedKeys = [] } = const { checkedKeys = [], halfCheckedKeys = [] } =
calcCheckedKeys(defaultCheckedKeys, props) || {} calcCheckedKeys(defaultCheckedKeys, props, children) || {}
// Cache for check status to optimize // Cache for check status to optimize
this.checkedBatch = null this.checkedBatch = null
this.propsToStateMap = {
expandedKeys: 'sExpandedKeys',
selectedKeys: 'sSelectedKeys',
checkedKeys: 'sCheckedKeys',
halfCheckedKeys: 'sHalfCheckedKeys',
}
return { return {
sExpandedKeys: defaultExpandAll sExpandedKeys: defaultExpandAll
? getFullKeyList(this.$slots.default) ? getFullKeyList(children)
: calcExpandedKeys(defaultExpandedKeys, props), : calcExpandedKeys(defaultExpandedKeys, props, children),
sSelectedKeys: calcSelectedKeys(defaultSelectedKeys, props), sSelectedKeys: calcSelectedKeys(defaultSelectedKeys, props, children),
sCheckedKeys, sCheckedKeys: checkedKeys,
sHalfCheckedKeys, sHalfCheckedKeys: halfCheckedKeys,
...(this.getSyncProps(props) || {}), ...(this.getSyncProps(props) || {}),
dragOverNodeKey: '',
dropPosition: null,
} }
}, },
provide: { provide () {
rcTree: this, return {
vcTree: this,
}
}, },
watch: {
componentWillReceiveProps (nextProps) { children (val) {
// React 16 will not trigger update if new state is null const { checkedKeys = [], halfCheckedKeys = [] } = calcCheckedKeys(this.checkedKeys || this.sCheckedKeys, this.$props, this.$slots.default) || {}
this.setState(this.getSyncProps(nextProps, this.props)) this.sCheckedKeys = checkedKeys
this.sHalfCheckedKeys = halfCheckedKeys
},
expandedKeys (val) {
this.sExpandedKeys = calcExpandedKeys(this.expandedKeys, this.$props, this.$slots.default)
},
selectedKeys (val) {
this.sSelectedKeys = calcSelectedKeys(this.selectedKeys, this.$props, this.$slots.default)
},
checkedKeys (val) {
const { checkedKeys = [], halfCheckedKeys = [] } = calcCheckedKeys(this.checkedKeys, this.$props, this.$slots.default) || {}
this.sCheckedKeys = checkedKeys
this.sHalfCheckedKeys = halfCheckedKeys
},
}, },
// componentWillReceiveProps (nextProps) {
// // React 16 will not trigger update if new state is null
// this.setState(this.getSyncProps(nextProps, this.props))
// },
methods: {
onNodeDragStart (event, node) { onNodeDragStart (event, node) {
const { expandedKeys } = this.state const { sExpandedKeys } = this
const { onDragStart } = this.props
const { eventKey, children } = node.props const { eventKey, children } = node.props
this.dragNode = node this.dragNode = node
this.setState({ this.setState({
dragNodesKeys: getDragNodesKeys(children, node), dragNodesKeys: getDragNodesKeys(children, node),
expandedKeys: arrDel(expandedKeys, eventKey), sExpandedKeys: arrDel(sExpandedKeys, eventKey),
}) })
this.__emit('dragstart', { event, node })
if (onDragStart) {
onDragStart({ event, node })
}
}, },
/** /**
@ -175,9 +204,8 @@ const Tree = {
* Better for use mouse move event to refresh drag state. * Better for use mouse move event to refresh drag state.
* But let's just keep it to avoid event trigger logic change. * But let's just keep it to avoid event trigger logic change.
*/ */
onNodeDragEnter = (event, node) => { onNodeDragEnter (event, node) {
const { expandedKeys } = this.state const { sExpandedKeys } = this
const { onDragEnter } = this.props
const { pos, eventKey } = node.props const { pos, eventKey } = node.props
const dropPosition = calcDropPosition(event, node) const dropPosition = calcDropPosition(event, node)
@ -214,46 +242,32 @@ const Tree = {
clearTimeout(this.delayedDragEnterLogic[key]) clearTimeout(this.delayedDragEnterLogic[key])
}) })
this.delayedDragEnterLogic[pos] = setTimeout(() => { this.delayedDragEnterLogic[pos] = setTimeout(() => {
const newExpandedKeys = arrAdd(expandedKeys, eventKey) const newExpandedKeys = arrAdd(sExpandedKeys, eventKey)
this.setState({ this.setState({
expandedKeys: newExpandedKeys, sExpandedKeys: newExpandedKeys,
}) })
this.__emit('dragenter', { event, node, expandedKeys: newExpandedKeys })
if (onDragEnter) {
onDragEnter({ event, node, expandedKeys: newExpandedKeys })
}
}, 400) }, 400)
}, 0) }, 0)
}; },
onNodeDragOver = (event, node) => { onNodeDragOver (event, node) {
const { onDragOver } = this.props this.__emit('dragover', { event, node })
if (onDragOver) { },
onDragOver({ event, node }) onNodeDragLeave (event, node) {
}
};
onNodeDragLeave = (event, node) => {
const { onDragLeave } = this.props
this.setState({ this.setState({
dragOverNodeKey: '', dragOverNodeKey: '',
}) })
this.__emit('dragleave', { event, node })
if (onDragLeave) { },
onDragLeave({ event, node }) onNodeDragEnd (event, node) {
}
};
onNodeDragEnd = (event, node) => {
const { onDragEnd } = this.props
this.setState({ this.setState({
dragOverNodeKey: '', dragOverNodeKey: '',
}) })
if (onDragEnd) { this.__emit('dragend', { event, node })
onDragEnd({ event, node }) },
} onNodeDrop (event, node) {
}; const { dragNodesKeys, dropPosition } = this
onNodeDrop = (event, node) => {
const { dragNodesKeys, dropPosition } = this.state
const { onDrop } = this.props
const { eventKey, pos } = node.props const { eventKey, pos } = node.props
this.setState({ this.setState({
@ -279,18 +293,14 @@ const Tree = {
if (dropPosition !== 0) { if (dropPosition !== 0) {
dropResult.dropToGap = true dropResult.dropToGap = true
} }
this.__emit('drop', dropResult)
},
if (onDrop) { onNodeSelect (e, treeNode) {
onDrop(dropResult) const { sSelectedKeys, multiple, $slots: { default: children }} = this
} const { selected, eventKey } = getOptionProps(treeNode)
};
onNodeSelect = (e, treeNode) => {
let { selectedKeys } = this.state
const { onSelect, multiple, children } = this.props
const { selected, eventKey } = treeNode.props
const targetSelected = !selected const targetSelected = !selected
let selectedKeys = sSelectedKeys
// Update selected keys // Update selected keys
if (!targetSelected) { if (!targetSelected) {
selectedKeys = arrDel(selectedKeys, eventKey) selectedKeys = arrDel(selectedKeys, eventKey)
@ -313,22 +323,20 @@ const Tree = {
this.setUncontrolledState({ selectedKeys }) this.setUncontrolledState({ selectedKeys })
if (onSelect) {
const eventObj = { const eventObj = {
event: 'select', event: 'select',
selected: targetSelected, selected: targetSelected,
node: treeNode, node: treeNode,
selectedNodes, selectedNodes,
} }
onSelect(selectedKeys, eventObj) this.__emit('select', selectedKeys, eventObj)
} },
};
/** /**
* This will cache node check status to optimize update process. * This will cache node check status to optimize update process.
* When Tree get trigger `onCheckConductFinished` will flush all the update. * When Tree get trigger `onCheckConductFinished` will flush all the update.
*/ */
onBatchNodeCheck = (key, checked, halfChecked, startNode) => { onBatchNodeCheck (key, checked, halfChecked, startNode) {
if (startNode) { if (startNode) {
this.checkedBatch = { this.checkedBatch = {
treeNode: startNode, treeNode: startNode,
@ -349,24 +357,23 @@ const Tree = {
} }
this.checkedBatch.list.push({ key, checked, halfChecked }) this.checkedBatch.list.push({ key, checked, halfChecked })
}; },
/** /**
* When top `onCheckConductFinished` called, will execute all batch update. * When top `onCheckConductFinished` called, will execute all batch update.
* And trigger `onCheck` event. * And trigger `onCheck` event.
*/ */
onCheckConductFinished = () => { onCheckConductFinished () {
const { checkedKeys, halfCheckedKeys } = this.state const { sCheckedKeys, sHalfCheckedKeys, checkStrictly, $slots: { default: children }} = this
const { onCheck, checkStrictly, children } = this.props
// Use map to optimize update speed // Use map to optimize update speed
const checkedKeySet = {} const checkedKeySet = {}
const halfCheckedKeySet = {} const halfCheckedKeySet = {}
checkedKeys.forEach(key => { sCheckedKeys.forEach(key => {
checkedKeySet[key] = true checkedKeySet[key] = true
}) })
halfCheckedKeys.forEach(key => { sHalfCheckedKeys.forEach(key => {
halfCheckedKeySet[key] = true halfCheckedKeySet[key] = true
}) })
@ -418,19 +425,16 @@ const Tree = {
halfCheckedKeys: newHalfCheckedKeys, halfCheckedKeys: newHalfCheckedKeys,
}) })
} }
this.__emit('check', selectedObj, eventObj)
if (onCheck) {
onCheck(selectedObj, eventObj)
}
// Clean up // Clean up
this.checkedBatch = null this.checkedBatch = null
}; },
onNodeExpand = (e, treeNode) => { onNodeExpand (e, treeNode) {
let { expandedKeys } = this.state const { sExpandedKeys, loadData } = this
const { onExpand, loadData } = this.props let expandedKeys = [...sExpandedKeys]
const { eventKey, expanded } = treeNode.props const { eventKey, expanded } = getOptionProps(treeNode)
// Update selected keys // Update selected keys
const index = expandedKeys.indexOf(eventKey) const index = expandedKeys.indexOf(eventKey)
@ -447,10 +451,7 @@ const Tree = {
} }
this.setUncontrolledState({ expandedKeys }) this.setUncontrolledState({ expandedKeys })
this.__emit('expand', expandedKeys, { node: treeNode, expanded: targetExpanded })
if (onExpand) {
onExpand(expandedKeys, { node: treeNode, expanded: targetExpanded })
}
// Async Load data // Async Load data
if (targetExpanded && loadData) { if (targetExpanded && loadData) {
@ -461,38 +462,29 @@ const Tree = {
} }
return null return null
}; },
onNodeMouseEnter = (event, node) => { onNodeMouseEnter (event, node) {
const { onMouseEnter } = this.props this.__emit('mouseenter', { event, node })
if (onMouseEnter) { },
onMouseEnter({ event, node })
}
};
onNodeMouseLeave = (event, node) => { onNodeMouseLeave (event, node) {
const { onMouseLeave } = this.props this.__emit('mouseleave', { event, node })
if (onMouseLeave) { },
onMouseLeave({ event, node })
}
};
onNodeContextMenu = (event, node) => { onNodeContextMenu (event, node) {
const { onRightClick } = this.props
if (onRightClick) {
event.preventDefault() event.preventDefault()
onRightClick({ event, node }) this.__emit('rightClick', { event, node })
} },
};
/** /**
* Sync state with props if needed * Sync state with props if needed
*/ */
getSyncProps = (props = {}, prevProps) => { getSyncProps (props = {}, prevProps) {
let needSync = false let needSync = false
const newState = {} const newState = {}
const myPrevProps = prevProps || {} const myPrevProps = prevProps || {}
const children = this.$slots.default
function checkSync (name) { function checkSync (name) {
if (props[name] !== myPrevProps[name]) { if (props[name] !== myPrevProps[name]) {
needSync = true needSync = true
@ -505,106 +497,106 @@ const Tree = {
// And no need to check when prev props not provided // And no need to check when prev props not provided
if (prevProps && checkSync('children')) { if (prevProps && checkSync('children')) {
const { checkedKeys = [], halfCheckedKeys = [] } = const { checkedKeys = [], halfCheckedKeys = [] } =
calcCheckedKeys(props.checkedKeys || this.state.checkedKeys, props) || {} calcCheckedKeys(props.checkedKeys || this.sCheckedKeys, props, children) || {}
newState.checkedKeys = checkedKeys newState.sCheckedKeys = checkedKeys
newState.halfCheckedKeys = halfCheckedKeys newState.sHalfCheckedKeys = halfCheckedKeys
} }
if (checkSync('expandedKeys')) { if (checkSync('expandedKeys')) {
newState.expandedKeys = calcExpandedKeys(props.expandedKeys, props) newState.sExpandedKeys = calcExpandedKeys(props.expandedKeys, props, children)
} }
if (checkSync('selectedKeys')) { if (checkSync('selectedKeys')) {
newState.selectedKeys = calcSelectedKeys(props.selectedKeys, props) newState.sSelectedKeys = calcSelectedKeys(props.selectedKeys, props, children)
} }
if (checkSync('checkedKeys')) { if (checkSync('checkedKeys')) {
const { checkedKeys = [], halfCheckedKeys = [] } = const { checkedKeys = [], halfCheckedKeys = [] } =
calcCheckedKeys(props.checkedKeys, props) || {} calcCheckedKeys(props.checkedKeys, props, children) || {}
newState.checkedKeys = checkedKeys newState.sCheckedKeys = checkedKeys
newState.halfCheckedKeys = halfCheckedKeys newState.sHalfCheckedKeys = halfCheckedKeys
} }
return needSync ? newState : null return needSync ? newState : null
}; },
/** /**
* Only update the value which is not in props * Only update the value which is not in props
*/ */
setUncontrolledState = (state) => { setUncontrolledState (state) {
let needSync = false let needSync = false
const newState = {} const newState = {}
const props = getOptionProps(this)
Object.keys(state).forEach(name => { Object.keys(state).forEach(name => {
if (name in this.props) return if (name in props) return
needSync = true needSync = true
newState[name] = state[name] const key = this.propsToStateMap[name]
newState[key] = state[name]
}) })
this.setState(needSync ? newState : null) this.setState(needSync ? newState : null)
}; },
isKeyChecked = (key) => { isKeyChecked (key) {
const { checkedKeys = [] } = this.state const { sCheckedKeys = [] } = this
return checkedKeys.indexOf(key) !== -1 return sCheckedKeys.indexOf(key) !== -1
}; },
/** /**
* [Legacy] Original logic use `key` as tracking clue. * [Legacy] Original logic use `key` as tracking clue.
* We have to use `cloneElement` to pass `key`. * We have to use `cloneElement` to pass `key`.
*/ */
renderTreeNode = (child, index, level = 0) => { renderTreeNode (child, index, level = 0) {
const { const {
expandedKeys = [], selectedKeys = [], halfCheckedKeys = [], sExpandedKeys = [], sSelectedKeys = [], sHalfCheckedKeys = [],
dragOverNodeKey, dropPosition, dragOverNodeKey, dropPosition,
} = this.state } = this
const {} = this.props
const pos = getPosition(level, index) const pos = getPosition(level, index)
const key = child.key || pos const key = child.key || pos
return React.cloneElement(child, { return cloneElement(child, {
props: {
eventKey: key, eventKey: key,
expanded: expandedKeys.indexOf(key) !== -1, expanded: sExpandedKeys.indexOf(key) !== -1,
selected: selectedKeys.indexOf(key) !== -1, selected: sSelectedKeys.indexOf(key) !== -1,
checked: this.isKeyChecked(key), checked: this.isKeyChecked(key),
halfChecked: halfCheckedKeys.indexOf(key) !== -1, halfChecked: sHalfCheckedKeys.indexOf(key) !== -1,
pos, pos,
// [Legacy] Drag props // [Legacy] Drag props
dragOver: dragOverNodeKey === key && dropPosition === 0, dragOver: dragOverNodeKey === key && dropPosition === 0,
dragOverGapTop: dragOverNodeKey === key && dropPosition === -1, dragOverGapTop: dragOverNodeKey === key && dropPosition === -1,
dragOverGapBottom: dragOverNodeKey === key && dropPosition === 1, dragOverGapBottom: dragOverNodeKey === key && dropPosition === 1,
},
}) })
}; },
},
render () { render () {
const { const {
prefixCls, className, focusable, prefixCls, focusable,
showLine, showLine,
children, $slots: { default: children = [] },
} = this.props } = this
const domProps = {} const domProps = {}
// [Legacy] Commit: 0117f0c9db0e2956e92cb208f51a42387dfcb3d1
if (focusable) {
domProps.tabIndex = '0'
domProps.onKeyDown = this.onKeyDown
}
return ( return (
<ul <ul
{...domProps} {...domProps}
className={classNames(prefixCls, className, { class={classNames(prefixCls, {
[`${prefixCls}-show-line`]: showLine, [`${prefixCls}-show-line`]: showLine,
})} })}
role='tree-node' role='tree-node'
unselectable='on' unselectable='on'
tabIndex={focusable ? '0' : null}
onKeydown={focusable ? this.onKeydown : () => {}}
> >
{React.Children.map(children, this.renderTreeNode, this)} {children.map(this.renderTreeNode)}
</ul> </ul>
) )
} },
} }
export default Tree export default Tree

116
components/vc-tree/src/TreeNode.jsx
View File

@ -4,6 +4,8 @@ import warning from 'warning'
import { contextTypes } from './Tree' import { contextTypes } from './Tree'
import { getPosition, getNodeChildren, isCheckDisabled, traverseTreeNodes } from './util' import { getPosition, getNodeChildren, isCheckDisabled, traverseTreeNodes } from './util'
import { initDefaultProps, getOptionProps, filterEmpty } from '../../_util/props-util' import { initDefaultProps, getOptionProps, filterEmpty } from '../../_util/props-util'
import BaseMixin from '../../_util/BaseMixin'
import getTransitionProps from '../../_util/getTransitionProps'
const ICON_OPEN = 'open' const ICON_OPEN = 'open'
const ICON_CLOSE = 'close' const ICON_CLOSE = 'close'
@ -19,12 +21,14 @@ let onlyTreeNodeWarned = false // Only accept TreeNode
export const nodeContextTypes = { export const nodeContextTypes = {
...contextTypes, ...contextTypes,
rcTreeNode: PropTypes.shape({ vcTreeNode: PropTypes.shape({
onUpCheckConduct: PropTypes.func, onUpCheckConduct: PropTypes.func,
}), }),
} }
const TreeNode = { const TreeNode = {
name: 'TreeNode',
mixins: [BaseMixin],
props: initDefaultProps({ props: initDefaultProps({
eventKey: PropTypes.string, // Pass by parent `cloneElement` eventKey: PropTypes.string, // Pass by parent `cloneElement`
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
@ -37,7 +41,7 @@ const TreeNode = {
selected: PropTypes.bool, selected: PropTypes.bool,
checked: PropTypes.bool, checked: PropTypes.bool,
halfChecked: PropTypes.bool, halfChecked: PropTypes.bool,
title: PropTypes.node, title: PropTypes.any,
pos: PropTypes.string, pos: PropTypes.string,
dragOver: PropTypes.bool, dragOver: PropTypes.bool,
dragOverGapTop: PropTypes.bool, dragOverGapTop: PropTypes.bool,
@ -60,31 +64,33 @@ const TreeNode = {
} }
}, },
inject: { inject: {
context: { default: {}}, vcTree: { default: {}},
}, },
provide: { provide () {
...this.context, return {
rcTreeNode: this, vcTree: this.vcTree,
vcTreeNode: this,
}
}, },
// Isomorphic needn't load data in server side // Isomorphic needn't load data in server side
mounted () { mounted () {
this.$nextTick(() => {
this.syncLoadData(this.$props) this.syncLoadData(this.$props)
}) },
}, watch: {
expanded (val) {
componentWillReceiveProps (nextProps) { this.syncLoadData({ expanded: val })
this.syncLoadData(nextProps) },
}, },
methods: {
onUpCheckConduct (treeNode, nodeChecked, nodeHalfChecked) { onUpCheckConduct (treeNode, nodeChecked, nodeHalfChecked) {
const { pos: nodePos } = getOptionProps(treeNode) const { pos: nodePos } = getOptionProps(treeNode)
const { eventKey, pos, checked, halfChecked } = this const { eventKey, pos, checked, halfChecked } = this
const { const {
rcTree: { checkStrictly, isKeyChecked, onBatchNodeCheck, onCheckConductFinished }, vcTree: { checkStrictly, isKeyChecked, onBatchNodeCheck, onCheckConductFinished },
rcTreeNode: { onUpCheckConduct } = {}, vcTreeNode: { onUpCheckConduct } = {},
} = this.context } = this
// Stop conduct when current node is disabled // Stop conduct when current node is disabled
if (isCheckDisabled(this)) { if (isCheckDisabled(this)) {
@ -103,7 +109,6 @@ const TreeNode = {
if (nodePos === childPos || isCheckDisabled(node)) { if (nodePos === childPos || isCheckDisabled(node)) {
return return
} }
if (isKeyChecked(node.key || childPos)) { if (isKeyChecked(node.key || childPos)) {
checkedCount += 1 checkedCount += 1
} }
@ -138,7 +143,7 @@ const TreeNode = {
onDownCheckConduct (nodeChecked) { onDownCheckConduct (nodeChecked) {
const { $slots } = this const { $slots } = this
const children = $slots.default || [] const children = $slots.default || []
const { rcTree: { checkStrictly, isKeyChecked, onBatchNodeCheck }} = this.context const { vcTree: { checkStrictly, isKeyChecked, onBatchNodeCheck }} = this
if (checkStrictly) return if (checkStrictly) return
traverseTreeNodes(children, ({ node, key }) => { traverseTreeNodes(children, ({ node, key }) => {
@ -161,7 +166,7 @@ const TreeNode = {
onSelect (e) { onSelect (e) {
if (this.isDisabled()) return if (this.isDisabled()) return
const { rcTree: { onNodeSelect }} = this.context const { vcTree: { onNodeSelect }} = this
e.preventDefault() e.preventDefault()
onNodeSelect(e, this) onNodeSelect(e, this)
}, },
@ -171,9 +176,9 @@ const TreeNode = {
const { disableCheckbox, checked, eventKey } = this const { disableCheckbox, checked, eventKey } = this
const { const {
rcTree: { checkable, onBatchNodeCheck, onCheckConductFinished }, vcTree: { checkable, onBatchNodeCheck, onCheckConductFinished },
rcTreeNode: { onUpCheckConduct } = {}, vcTreeNode: { onUpCheckConduct } = {},
} = this.context } = this
if (!checkable || disableCheckbox) return if (!checkable || disableCheckbox) return
@ -193,22 +198,22 @@ const TreeNode = {
}, },
onMouseEnter (e) { onMouseEnter (e) {
const { rcTree: { onNodeMouseEnter }} = this.context const { vcTree: { onNodeMouseEnter }} = this
onNodeMouseEnter(e, this) onNodeMouseEnter(e, this)
}, },
onMouseLeave (e) { onMouseLeave (e) {
const { rcTree: { onNodeMouseLeave }} = this.context const { vcTree: { onNodeMouseLeave }} = this
onNodeMouseLeave(e, this) onNodeMouseLeave(e, this)
}, },
onContextMenu (e) { onContextMenu (e) {
const { rcTree: { onNodeContextMenu }} = this.context const { vcTree: { onNodeContextMenu }} = this
onNodeContextMenu(e, this) onNodeContextMenu(e, this)
}, },
onDragStart (e) { onDragStart (e) {
const { rcTree: { onNodeDragStart }} = this.context const { vcTree: { onNodeDragStart }} = this
e.stopPropagation() e.stopPropagation()
this.setState({ this.setState({
@ -226,7 +231,7 @@ const TreeNode = {
}, },
onDragEnter (e) { onDragEnter (e) {
const { rcTree: { onNodeDragEnter }} = this.context const { vcTree: { onNodeDragEnter }} = this
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
@ -234,7 +239,7 @@ const TreeNode = {
}, },
onDragOver (e) { onDragOver (e) {
const { rcTree: { onNodeDragOver }} = this.context const { vcTree: { onNodeDragOver }} = this
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
@ -242,14 +247,14 @@ const TreeNode = {
}, },
onDragLeave (e) { onDragLeave (e) {
const { rcTree: { onNodeDragLeave }} = this.context const { vcTree: { onNodeDragLeave }} = this
e.stopPropagation() e.stopPropagation()
onNodeDragLeave(e, this) onNodeDragLeave(e, this)
}, },
onDragEnd (e) { onDragEnd (e) {
const { rcTree: { onNodeDragEnd }} = this.context const { vcTree: { onNodeDragEnd }} = this
e.stopPropagation() e.stopPropagation()
this.setState({ this.setState({
@ -259,7 +264,7 @@ const TreeNode = {
}, },
onDrop (e) { onDrop (e) {
const { rcTree: { onNodeDrop }} = this.context const { vcTree: { onNodeDrop }} = this
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
@ -271,7 +276,7 @@ const TreeNode = {
// Disabled item still can be switch // Disabled item still can be switch
onExpand (e) { onExpand (e) {
const { rcTree: { onNodeExpand }} = this.context const { vcTree: { onNodeExpand }} = this
const callbackPromise = onNodeExpand(e, this) const callbackPromise = onNodeExpand(e, this)
// Promise like // Promise like
@ -307,16 +312,16 @@ const TreeNode = {
getNodeState () { getNodeState () {
const { expanded } = this const { expanded } = this
if (this.isLeaf()) { if (this.isLeaf2()) {
return null return null
} }
return expanded ? ICON_OPEN : ICON_CLOSE return expanded ? ICON_OPEN : ICON_CLOSE
}, },
isLeaf () { isLeaf2 () {
const { isLeaf, loadStatus } = this const { isLeaf, loadStatus } = this
const { rcTree: { loadData }} = this.context const { vcTree: { loadData }} = this
const hasChildren = this.getNodeChildren().length !== 0 const hasChildren = this.getNodeChildren().length !== 0
@ -329,7 +334,7 @@ const TreeNode = {
isDisabled () { isDisabled () {
const { disabled } = this const { disabled } = this
const { rcTree: { disabled: treeDisabled }} = this.context const { vcTree: { disabled: treeDisabled }} = this
// Follow the logic of Selectable // Follow the logic of Selectable
if (disabled === false) { if (disabled === false) {
@ -341,7 +346,7 @@ const TreeNode = {
isSelectable () { isSelectable () {
const { selectable } = this const { selectable } = this
const { rcTree: { selectable: treeSelectable }} = this.context const { vcTree: { selectable: treeSelectable }} = this
// Ignore when selectable is undefined or null // Ignore when selectable is undefined or null
if (typeof selectable === 'boolean') { if (typeof selectable === 'boolean') {
@ -355,9 +360,9 @@ const TreeNode = {
syncLoadData (props) { syncLoadData (props) {
const { loadStatus } = this const { loadStatus } = this
const { expanded } = props const { expanded } = props
const { rcTree: { loadData }} = this.context const { vcTree: { loadData }} = this
if (loadData && loadStatus === LOAD_STATUS_NONE && expanded && !this.isLeaf()) { if (loadData && loadStatus === LOAD_STATUS_NONE && expanded && !this.isLeaf2()) {
this.setState({ loadStatus: LOAD_STATUS_LOADING }) this.setState({ loadStatus: LOAD_STATUS_LOADING })
loadData(this).then(() => { loadData(this).then(() => {
@ -371,9 +376,9 @@ const TreeNode = {
// Switcher // Switcher
renderSwitcher () { renderSwitcher () {
const { expanded } = this const { expanded } = this
const { rcTree: { prefixCls }} = this.context const { vcTree: { prefixCls }} = this
if (this.isLeaf()) { if (this.isLeaf2()) {
return <span class={`${prefixCls}-switcher ${prefixCls}-switcher-noop`} /> return <span class={`${prefixCls}-switcher ${prefixCls}-switcher-noop`} />
} }
@ -391,7 +396,7 @@ const TreeNode = {
// Checkbox // Checkbox
renderCheckbox () { renderCheckbox () {
const { checked, halfChecked, disableCheckbox } = this const { checked, halfChecked, disableCheckbox } = this
const { rcTree: { prefixCls, checkable }} = this.context const { vcTree: { prefixCls, checkable }} = this
const disabled = this.isDisabled() const disabled = this.isDisabled()
if (!checkable) return null if (!checkable) return null
@ -416,7 +421,7 @@ const TreeNode = {
renderIcon () { renderIcon () {
const { loadStatus } = this const { loadStatus } = this
const { rcTree: { prefixCls }} = this.context const { vcTree: { prefixCls }} = this
return ( return (
<span <span
@ -432,7 +437,7 @@ const TreeNode = {
// Icon + Title // Icon + Title
renderSelector () { renderSelector () {
const { title, selected, icon, loadStatus, dragNodeHighlight } = this const { title, selected, icon, loadStatus, dragNodeHighlight } = this
const { rcTree: { prefixCls, showIcon, draggable, loadData }} = this.context const { vcTree: { prefixCls, showIcon, draggable, loadData }} = this
const disabled = this.isDisabled() const disabled = this.isDisabled()
const wrapClass = `${prefixCls}-node-content-wrapper` const wrapClass = `${prefixCls}-node-content-wrapper`
@ -486,11 +491,11 @@ const TreeNode = {
// Children list wrapped with `Animation` // Children list wrapped with `Animation`
renderChildren () { renderChildren () {
const { expanded, pos } = this const { expanded, pos } = this
const { rcTree: { const { vcTree: {
prefixCls, prefixCls,
openTransitionName, openAnimation, openTransitionName, openAnimation,
renderTreeNode, renderTreeNode,
}} = this.context }} = this
// [Legacy] Animation control // [Legacy] Animation control
const renderFirst = this.renderFirst const renderFirst = this.renderFirst
@ -500,13 +505,13 @@ const TreeNode = {
transitionAppear = false transitionAppear = false
} }
const animProps = {} let animProps = {}
if (openTransitionName) { if (openTransitionName) {
animProps.transitionName = openTransitionName animProps = getTransitionProps(openTransitionName, { appear: transitionAppear })
} else if (typeof openAnimation === 'object') { } else if (typeof openAnimation === 'object') {
animProps.animation = { ...openAnimation } animProps = { ...openAnimation }
if (!transitionAppear) { if (!transitionAppear) {
delete animProps.animation.appear delete animProps.props.appear
} }
} }
@ -521,6 +526,7 @@ const TreeNode = {
if (expanded) { if (expanded) {
$children = ( $children = (
<ul <ul
v-show={expanded}
class={classNames( class={classNames(
`${prefixCls}-child-tree`, `${prefixCls}-child-tree`,
expanded && `${prefixCls}-child-tree-open`, expanded && `${prefixCls}-child-tree-open`,
@ -535,25 +541,23 @@ const TreeNode = {
} }
return ( return (
<Animate <transition
{...animProps} {...animProps}
showProp='data-expanded'
transitionAppear={transitionAppear}
component=''
> >
{$children} {$children}
</Animate> </transition>
) )
}, },
},
render () { render () {
const { const {
dragOver, dragOverGapTop, dragOverGapBottom, dragOver, dragOverGapTop, dragOverGapBottom,
} = this } = this
const { rcTree: { const { vcTree: {
prefixCls, prefixCls,
filterTreeNode, filterTreeNode,
}} = this.context }} = this
const disabled = this.isDisabled() const disabled = this.isDisabled()
return ( return (

21
components/vc-tree/src/index.js
View File

@ -1,6 +1,25 @@
import { getOptionProps } from '../../_util/props-util'
import Tree from './Tree' import Tree from './Tree'
import TreeNode from './TreeNode' import TreeNode from './TreeNode'
Tree.TreeNode = TreeNode Tree.TreeNode = TreeNode
//
const NewTree = {
TreeNode: TreeNode,
props: Tree.props,
render () {
const { $listeners, $slots } = this
const treeProps = {
props: {
...getOptionProps(this),
children: $slots.default,
},
on: $listeners,
}
return (
<Tree {...treeProps}>{$slots.default}</Tree>
)
},
}
export { TreeNode } export { TreeNode }
export default Tree export default NewTree

27
components/vc-tree/src/util.js
View File

@ -1,6 +1,6 @@
/* eslint no-loop-func: 0*/ /* eslint no-loop-func: 0*/
import { Children } from 'react'
import warning from 'warning' import warning from 'warning'
import { getSlotOptions, getOptionProps } from '../../_util/props-util'
export function arrDel (list, value) { export function arrDel (list, value) {
const clone = list.slice() const clone = list.slice()
@ -48,14 +48,13 @@ export function getPosition (level, index) {
return `${level}-${index}` return `${level}-${index}`
} }
export function getNodeChildren (children) { export function getNodeChildren (children = []) {
const childList = Array.isArray(children) ? children : [children] return children
return childList .filter(child => getSlotOptions(child).isTreeNode)
.filter(child => child && child.type && child.type.isTreeNode)
} }
export function isCheckDisabled (node) { export function isCheckDisabled (node) {
const { disabled, disableCheckbox } = node.props || {} const { disabled, disableCheckbox } = getOptionProps(node) || {}
return !!(disabled || disableCheckbox) return !!(disabled || disableCheckbox)
} }
@ -66,7 +65,7 @@ export function traverseTreeNodes (treeNodes, subTreeData, callback) {
} }
function processNode (node, index, parent) { function processNode (node, index, parent) {
const children = node ? node.props.children : treeNodes const children = node ? node.componentOptions.children : treeNodes
const pos = node ? getPosition(parent.pos, index) : 0 const pos = node ? getPosition(parent.pos, index) : 0
// Filter children // Filter children
@ -86,7 +85,7 @@ export function traverseTreeNodes (treeNodes, subTreeData, callback) {
if (subTreeData) { if (subTreeData) {
// Statistic children // Statistic children
const subNodes = [] const subNodes = []
Children.forEach(childList, (subNode, subIndex) => { childList.forEach((subNode, subIndex) => {
// Provide limit snapshot // Provide limit snapshot
const subPos = getPosition(pos, index) const subPos = getPosition(pos, index)
subNodes.push({ subNodes.push({
@ -106,7 +105,7 @@ export function traverseTreeNodes (treeNodes, subTreeData, callback) {
} }
// Process children node // Process children node
Children.forEach(childList, (subNode, subIndex) => { childList.forEach((subNode, subIndex) => {
processNode(subNode, subIndex, { node, pos }) processNode(subNode, subIndex, { node, pos })
}) })
} }
@ -182,7 +181,7 @@ export function getNodesStatistic (treeNodes) {
} }
export function getDragNodesKeys (treeNodes, node) { export function getDragNodesKeys (treeNodes, node) {
const { eventKey, pos } = node.props const { eventKey, pos } = getOptionProps(node)
const dragNodesKeys = [] const dragNodesKeys = []
traverseTreeNodes(treeNodes, ({ pos: nodePos, key }) => { traverseTreeNodes(treeNodes, ({ pos: nodePos, key }) => {
@ -214,12 +213,12 @@ export function calcDropPosition (event, treeNode) {
* @param props * @param props
* @returns [string] * @returns [string]
*/ */
export function calcExpandedKeys (keyList, props) { export function calcExpandedKeys (keyList, props, children = []) {
if (!keyList) { if (!keyList) {
return [] return []
} }
const { autoExpandParent, children } = props const { autoExpandParent } = props
// Do nothing if not auto expand parent // Do nothing if not auto expand parent
if (!autoExpandParent) { if (!autoExpandParent) {
@ -363,8 +362,8 @@ export function calcCheckStateConduct (treeNodes, checkedKeys) {
* Calculate the value of checked and halfChecked keys. * Calculate the value of checked and halfChecked keys.
* This should be only run in init or props changed. * This should be only run in init or props changed.
*/ */
export function calcCheckedKeys (keys, props) { export function calcCheckedKeys (keys, props, children = []) {
const { checkable, children, checkStrictly } = props const { checkable, checkStrictly } = props
if (!checkable || !keys) { if (!checkable || !keys) {
return null return null

2
examples/routes.js
View File

@ -3,7 +3,7 @@ const AsyncComp = () => {
const hashs = window.location.hash.split('/') const hashs = window.location.hash.split('/')
const d = hashs[hashs.length - 1] const d = hashs[hashs.length - 1]
return { return {
component: import(`../components/popconfirm/demo/${d}`), component: import(`../components/vc-tree/demo/${d}`),
} }
} }
export default [ export default [