2019-01-12 11:33:27 +08:00
|
|
|
|
import warning from 'warning';
|
|
|
|
|
import { Tree as VcTree, TreeNode } from '../vc-tree';
|
|
|
|
|
import animation from '../_util/openAnimation';
|
|
|
|
|
import PropTypes from '../_util/vue-types';
|
2019-05-28 11:37:38 +08:00
|
|
|
|
import {
|
|
|
|
|
initDefaultProps,
|
|
|
|
|
getOptionProps,
|
|
|
|
|
filterEmpty,
|
|
|
|
|
getComponentFromProp,
|
|
|
|
|
getClass,
|
2020-01-19 16:58:38 +08:00
|
|
|
|
getListeners,
|
2019-05-28 11:37:38 +08:00
|
|
|
|
} from '../_util/props-util';
|
2019-04-10 13:28:07 +08:00
|
|
|
|
import { cloneElement } from '../_util/vnode';
|
|
|
|
|
import { ConfigConsumerProps } from '../config-provider';
|
2019-01-12 11:33:27 +08:00
|
|
|
|
import Icon from '../icon';
|
2018-09-26 22:57:01 +08:00
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
function TreeProps() {
|
2018-09-26 22:57:01 +08:00
|
|
|
|
return {
|
|
|
|
|
showLine: PropTypes.bool,
|
|
|
|
|
/** 是否支持多选 */
|
|
|
|
|
multiple: PropTypes.bool,
|
|
|
|
|
/** 是否自动展开父节点 */
|
|
|
|
|
autoExpandParent: PropTypes.bool,
|
|
|
|
|
/** checkable状态下节点选择完全受控(父子节点选中状态不再关联)*/
|
|
|
|
|
checkStrictly: PropTypes.bool,
|
|
|
|
|
/** 是否支持选中 */
|
|
|
|
|
checkable: PropTypes.bool,
|
|
|
|
|
/** 是否禁用树 */
|
|
|
|
|
disabled: PropTypes.bool,
|
|
|
|
|
/** 默认展开所有树节点 */
|
|
|
|
|
defaultExpandAll: PropTypes.bool,
|
|
|
|
|
/** 默认展开对应树节点 */
|
|
|
|
|
defaultExpandParent: PropTypes.bool,
|
|
|
|
|
/** 默认展开指定的树节点 */
|
2018-12-26 16:33:24 +08:00
|
|
|
|
defaultExpandedKeys: PropTypes.array,
|
2018-09-26 22:57:01 +08:00
|
|
|
|
/** (受控)展开指定的树节点 */
|
2018-12-26 16:33:24 +08:00
|
|
|
|
expandedKeys: PropTypes.array,
|
2018-09-26 22:57:01 +08:00
|
|
|
|
/** (受控)选中复选框的树节点 */
|
2019-01-12 11:33:27 +08:00
|
|
|
|
checkedKeys: PropTypes.oneOfType([
|
|
|
|
|
PropTypes.array,
|
|
|
|
|
PropTypes.shape({
|
|
|
|
|
checked: PropTypes.array,
|
|
|
|
|
halfChecked: PropTypes.array,
|
|
|
|
|
}).loose,
|
|
|
|
|
]),
|
2018-09-26 22:57:01 +08:00
|
|
|
|
/** 默认选中复选框的树节点 */
|
2018-12-26 16:33:24 +08:00
|
|
|
|
defaultCheckedKeys: PropTypes.array,
|
2018-09-26 22:57:01 +08:00
|
|
|
|
/** (受控)设置选中的树节点 */
|
2018-12-26 16:33:24 +08:00
|
|
|
|
selectedKeys: PropTypes.array,
|
2018-09-26 22:57:01 +08:00
|
|
|
|
/** 默认选中的树节点 */
|
2018-12-26 16:33:24 +08:00
|
|
|
|
defaultSelectedKeys: PropTypes.array,
|
2018-09-26 22:57:01 +08:00
|
|
|
|
selectable: PropTypes.bool,
|
|
|
|
|
/** 展开/收起节点时触发 */
|
|
|
|
|
// onExpand: (expandedKeys: string[], info: AntTreeNodeExpandedEvent) => void | PromiseLike<any>,
|
|
|
|
|
/** 点击复选框触发 */
|
|
|
|
|
// onCheck: (checkedKeys: string[] | { checked: string[]; halfChecked: string[] }, e: AntTreeNodeCheckedEvent) => void,
|
|
|
|
|
/** 点击树节点触发 */
|
|
|
|
|
// onSelect: (selectedKeys: string[], e: AntTreeNodeSelectedEvent) => void,
|
|
|
|
|
/** 单击树节点触发 */
|
|
|
|
|
// onClick: (e: React.MouseEvent<HTMLElement>, node: AntTreeNode) => void,
|
|
|
|
|
/** 双击树节点触发 */
|
|
|
|
|
// onDoubleClick: (e: React.MouseEvent<HTMLElement>, node: AntTreeNode) => void,
|
|
|
|
|
/** filter some AntTreeNodes as you need. it should return true */
|
|
|
|
|
filterAntTreeNode: PropTypes.func,
|
|
|
|
|
/** 异步加载数据 */
|
|
|
|
|
loadData: PropTypes.func,
|
2018-12-26 16:33:24 +08:00
|
|
|
|
loadedKeys: PropTypes.array,
|
2018-09-26 22:57:01 +08:00
|
|
|
|
// onLoaded: (loadedKeys: string[], info: { event: 'load', node: AntTreeNode; }) => void,
|
|
|
|
|
/** 响应右键点击 */
|
|
|
|
|
// onRightClick: (options: AntTreeNodeMouseEvent) => void,
|
|
|
|
|
/** 设置节点可拖拽(IE>8)*/
|
|
|
|
|
draggable: PropTypes.bool,
|
|
|
|
|
// /** 开始拖拽时调用 */
|
|
|
|
|
// onDragStart: (options: AntTreeNodeMouseEvent) => void,
|
|
|
|
|
// /** dragenter 触发时调用 */
|
|
|
|
|
// onDragEnter: (options: AntTreeNodeMouseEvent) => void,
|
|
|
|
|
// /** dragover 触发时调用 */
|
|
|
|
|
// onDragOver: (options: AntTreeNodeMouseEvent) => void,
|
|
|
|
|
// /** dragleave 触发时调用 */
|
|
|
|
|
// onDragLeave: (options: AntTreeNodeMouseEvent) => void,
|
|
|
|
|
// /** drop 触发时调用 */
|
|
|
|
|
// onDrop: (options: AntTreeNodeMouseEvent) => void,
|
|
|
|
|
showIcon: PropTypes.bool,
|
|
|
|
|
icon: PropTypes.func,
|
2019-04-10 13:28:07 +08:00
|
|
|
|
switcherIcon: PropTypes.any,
|
2018-09-26 22:57:01 +08:00
|
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
|
filterTreeNode: PropTypes.func,
|
|
|
|
|
openAnimation: PropTypes.any,
|
|
|
|
|
treeNodes: PropTypes.array,
|
|
|
|
|
treeData: PropTypes.array,
|
2019-11-15 15:05:38 +08:00
|
|
|
|
/**
|
|
|
|
|
* @default{title,key,children}
|
|
|
|
|
* 替换treeNode中 title,key,children字段为treeData中对应的字段
|
|
|
|
|
*/
|
|
|
|
|
replaceFields: PropTypes.object,
|
2019-01-12 11:33:27 +08:00
|
|
|
|
};
|
2018-09-26 22:57:01 +08:00
|
|
|
|
}
|
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
|
export { TreeProps };
|
2018-09-26 22:57:01 +08:00
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'ATree',
|
|
|
|
|
model: {
|
|
|
|
|
prop: 'checkedKeys',
|
|
|
|
|
event: 'check',
|
|
|
|
|
},
|
|
|
|
|
props: initDefaultProps(TreeProps(), {
|
|
|
|
|
checkable: false,
|
|
|
|
|
showIcon: false,
|
|
|
|
|
openAnimation: {
|
|
|
|
|
on: animation,
|
|
|
|
|
props: { appear: null },
|
|
|
|
|
},
|
|
|
|
|
}),
|
2019-04-10 13:28:07 +08:00
|
|
|
|
inject: {
|
2019-09-11 22:35:25 +08:00
|
|
|
|
configProvider: { default: () => ConfigConsumerProps },
|
2019-04-10 13:28:07 +08:00
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
created() {
|
2018-09-26 22:57:01 +08:00
|
|
|
|
warning(
|
|
|
|
|
!('treeNodes' in getOptionProps(this)),
|
2019-01-12 11:33:27 +08:00
|
|
|
|
'`treeNodes` is deprecated. please use treeData instead.',
|
|
|
|
|
);
|
2018-09-26 22:57:01 +08:00
|
|
|
|
},
|
|
|
|
|
TreeNode,
|
|
|
|
|
methods: {
|
2019-04-10 13:28:07 +08:00
|
|
|
|
renderSwitcherIcon(prefixCls, switcherIcon, { isLeaf, expanded, loading }) {
|
|
|
|
|
const { showLine } = this.$props;
|
2018-12-11 20:33:37 +08:00
|
|
|
|
if (loading) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
return <Icon type="loading" class={`${prefixCls}-switcher-loading-icon`} />;
|
2018-12-11 20:33:37 +08:00
|
|
|
|
}
|
|
|
|
|
if (showLine) {
|
|
|
|
|
if (isLeaf) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
return <Icon type="file" class={`${prefixCls}-switcher-line-icon`} />;
|
2018-12-11 20:33:37 +08:00
|
|
|
|
}
|
|
|
|
|
return (
|
|
|
|
|
<Icon
|
|
|
|
|
type={expanded ? 'minus-square' : 'plus-square'}
|
|
|
|
|
class={`${prefixCls}-switcher-line-icon`}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
theme="outlined"
|
2018-12-11 20:33:37 +08:00
|
|
|
|
/>
|
2019-01-12 11:33:27 +08:00
|
|
|
|
);
|
2018-12-11 20:33:37 +08:00
|
|
|
|
} else {
|
2019-04-10 13:28:07 +08:00
|
|
|
|
const switcherCls = `${prefixCls}-switcher-icon`;
|
2018-12-11 20:33:37 +08:00
|
|
|
|
if (isLeaf) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
return null;
|
2019-05-28 11:37:38 +08:00
|
|
|
|
} else if (switcherIcon) {
|
2019-04-10 13:28:07 +08:00
|
|
|
|
const switcherOriginCls = getClass(switcherIcon[0]);
|
|
|
|
|
return cloneElement(switcherIcon, {
|
|
|
|
|
class: {
|
|
|
|
|
[switcherCls]: true,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
return <Icon type="caret-down" class={`${prefixCls}-switcher-icon`} theme="filled" />;
|
2018-12-11 20:33:37 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
2019-03-18 15:10:20 +08:00
|
|
|
|
updateTreeData(treeData) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const { $slots, $scopedSlots } = this;
|
2019-11-15 15:05:38 +08:00
|
|
|
|
const defaultFields = { children: 'children', title: 'title', key: 'key' };
|
|
|
|
|
const replaceFields = { ...defaultFields, ...this.$props.replaceFields };
|
2019-01-12 11:33:27 +08:00
|
|
|
|
return treeData.map(item => {
|
2019-11-15 15:05:38 +08:00
|
|
|
|
const key = item[replaceFields.key];
|
|
|
|
|
const children = item[replaceFields.children];
|
2019-12-21 18:37:33 +08:00
|
|
|
|
const { on = {}, slots = {}, scopedSlots = {}, class: cls, style, ...restProps } = item;
|
2018-09-26 22:57:01 +08:00
|
|
|
|
const treeNodeProps = {
|
|
|
|
|
...restProps,
|
2019-01-12 11:33:27 +08:00
|
|
|
|
icon:
|
|
|
|
|
$slots[slots.icon] ||
|
2020-01-13 19:46:05 +08:00
|
|
|
|
($scopedSlots[scopedSlots.icon] && $scopedSlots[scopedSlots.icon](item)) ||
|
2019-01-12 11:33:27 +08:00
|
|
|
|
restProps.icon,
|
|
|
|
|
title:
|
|
|
|
|
$slots[slots.title] ||
|
|
|
|
|
($scopedSlots[scopedSlots.title] && $scopedSlots[scopedSlots.title](item)) ||
|
2019-11-15 15:05:38 +08:00
|
|
|
|
restProps[replaceFields.title],
|
2018-09-26 22:57:01 +08:00
|
|
|
|
dataRef: item,
|
|
|
|
|
on,
|
|
|
|
|
key,
|
|
|
|
|
class: cls,
|
|
|
|
|
style,
|
2019-01-12 11:33:27 +08:00
|
|
|
|
};
|
2018-09-26 22:57:01 +08:00
|
|
|
|
if (children) {
|
2019-03-18 15:10:20 +08:00
|
|
|
|
return { ...treeNodeProps, children: this.updateTreeData(children) };
|
2018-09-26 22:57:01 +08:00
|
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
return treeNodeProps;
|
|
|
|
|
});
|
2018-09-26 22:57:01 +08:00
|
|
|
|
},
|
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
render() {
|
|
|
|
|
const props = getOptionProps(this);
|
2019-04-10 13:28:07 +08:00
|
|
|
|
const { prefixCls: customizePrefixCls, showIcon, treeNodes } = props;
|
2019-09-11 22:35:25 +08:00
|
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
2019-04-10 13:28:07 +08:00
|
|
|
|
const prefixCls = getPrefixCls('tree', customizePrefixCls);
|
|
|
|
|
const switcherIcon = getComponentFromProp(this, 'switcherIcon');
|
2019-01-12 11:33:27 +08:00
|
|
|
|
const checkable = props.checkable;
|
|
|
|
|
let treeData = props.treeData || treeNodes;
|
2018-09-26 22:57:01 +08:00
|
|
|
|
if (treeData) {
|
2019-03-18 15:10:20 +08:00
|
|
|
|
treeData = this.updateTreeData(treeData);
|
2018-09-26 22:57:01 +08:00
|
|
|
|
}
|
|
|
|
|
const vcTreeProps = {
|
|
|
|
|
props: {
|
|
|
|
|
...props,
|
2019-04-10 13:28:07 +08:00
|
|
|
|
prefixCls,
|
2018-09-26 22:57:01 +08:00
|
|
|
|
checkable: checkable ? <span class={`${prefixCls}-checkbox-inner`} /> : checkable,
|
2018-12-25 12:00:39 +08:00
|
|
|
|
children: filterEmpty(this.$slots.default || []),
|
2018-09-26 22:57:01 +08:00
|
|
|
|
__propsSymbol__: Symbol(),
|
2019-05-28 11:37:38 +08:00
|
|
|
|
switcherIcon: nodeProps => this.renderSwitcherIcon(prefixCls, switcherIcon, nodeProps),
|
2018-09-26 22:57:01 +08:00
|
|
|
|
},
|
2020-01-19 16:58:38 +08:00
|
|
|
|
on: getListeners(this),
|
2018-12-11 20:33:37 +08:00
|
|
|
|
ref: 'tree',
|
2018-09-26 22:57:01 +08:00
|
|
|
|
class: !showIcon && `${prefixCls}-icon-hide`,
|
2019-01-12 11:33:27 +08:00
|
|
|
|
};
|
2018-09-26 22:57:01 +08:00
|
|
|
|
if (treeData) {
|
2019-01-12 11:33:27 +08:00
|
|
|
|
vcTreeProps.props.treeData = treeData;
|
2018-09-26 22:57:01 +08:00
|
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
|
return <VcTree {...vcTreeProps} />;
|
2018-09-26 22:57:01 +08:00
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
|
};
|