2021-09-25 08:51:32 +00:00
|
|
|
|
import type { ExtractPropTypes, PropType } from 'vue';
|
2021-10-07 05:27:43 +00:00
|
|
|
|
import { nextTick, onUpdated, ref, watch, defineComponent, computed } from 'vue';
|
2020-09-02 14:44:16 +00:00
|
|
|
|
import debounce from 'lodash-es/debounce';
|
2020-03-28 07:50:01 +00:00
|
|
|
|
import FolderOpenOutlined from '@ant-design/icons-vue/FolderOpenOutlined';
|
2020-04-06 03:18:26 +00:00
|
|
|
|
import FolderOutlined from '@ant-design/icons-vue/FolderOutlined';
|
2020-03-28 07:50:01 +00:00
|
|
|
|
import FileOutlined from '@ant-design/icons-vue/FileOutlined';
|
2020-08-31 08:53:19 +00:00
|
|
|
|
import classNames from '../_util/classNames';
|
2021-09-25 08:51:32 +00:00
|
|
|
|
import type { AntdTreeNodeAttribute, TreeProps } from './Tree';
|
|
|
|
|
import Tree, { treeProps } from './Tree';
|
2020-10-22 06:25:02 +00:00
|
|
|
|
import initDefaultProps from '../_util/props-util/initDefaultProps';
|
2021-10-07 05:27:43 +00:00
|
|
|
|
import {
|
|
|
|
|
convertDataToEntities,
|
|
|
|
|
convertTreeToData,
|
|
|
|
|
fillFieldNames,
|
|
|
|
|
} from '../vc-tree/utils/treeUtil';
|
2021-09-25 08:51:32 +00:00
|
|
|
|
import type { DataNode, EventDataNode, Key } from '../vc-tree/interface';
|
|
|
|
|
import { conductExpandParent } from '../vc-tree/util';
|
|
|
|
|
import { calcRangeKeys, convertDirectoryKeysToNodes } from './utils/dictUtil';
|
|
|
|
|
import useConfigInject from '../_util/hooks/useConfigInject';
|
|
|
|
|
import { filterEmpty } from '../_util/props-util';
|
2018-09-26 14:57:01 +00:00
|
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
|
export type ExpandAction = false | 'click' | 'doubleclick' | 'dblclick';
|
2018-09-26 14:57:01 +00:00
|
|
|
|
|
2022-03-26 14:52:54 +00:00
|
|
|
|
export const directoryTreeProps = () => ({
|
2021-09-25 08:51:32 +00:00
|
|
|
|
...treeProps(),
|
|
|
|
|
expandAction: { type: [Boolean, String] as PropType<ExpandAction> },
|
2022-03-26 14:52:54 +00:00
|
|
|
|
});
|
2021-09-25 08:51:32 +00:00
|
|
|
|
|
2022-03-26 14:52:54 +00:00
|
|
|
|
export type DirectoryTreeProps = Partial<ExtractPropTypes<ReturnType<typeof directoryTreeProps>>>;
|
2020-10-22 06:25:02 +00:00
|
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
|
function getIcon(props: AntdTreeNodeAttribute) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
const { isLeaf, expanded } = props;
|
2018-09-26 14:57:01 +00:00
|
|
|
|
if (isLeaf) {
|
2020-03-28 07:50:01 +00:00
|
|
|
|
return <FileOutlined />;
|
2018-09-26 14:57:01 +00:00
|
|
|
|
}
|
2020-04-06 03:18:26 +00:00
|
|
|
|
return expanded ? <FolderOpenOutlined /> : <FolderOutlined />;
|
2018-09-26 14:57:01 +00:00
|
|
|
|
}
|
|
|
|
|
|
2020-10-22 06:25:02 +00:00
|
|
|
|
export default defineComponent({
|
2018-09-26 14:57:01 +00:00
|
|
|
|
name: 'ADirectoryTree',
|
2020-07-16 10:31:20 +00:00
|
|
|
|
inheritAttrs: false,
|
2022-03-26 14:52:54 +00:00
|
|
|
|
props: initDefaultProps(directoryTreeProps(), {
|
2021-09-25 08:51:32 +00:00
|
|
|
|
showIcon: true,
|
|
|
|
|
expandAction: 'click',
|
|
|
|
|
}),
|
|
|
|
|
slots: ['icon', 'title', 'switcherIcon', 'titleRender'],
|
2022-03-26 14:52:54 +00:00
|
|
|
|
// emits: [
|
|
|
|
|
// 'update:selectedKeys',
|
|
|
|
|
// 'update:checkedKeys',
|
|
|
|
|
// 'update:expandedKeys',
|
|
|
|
|
// 'expand',
|
|
|
|
|
// 'select',
|
|
|
|
|
// 'check',
|
|
|
|
|
// 'doubleclick',
|
|
|
|
|
// 'dblclick',
|
|
|
|
|
// 'click',
|
|
|
|
|
// ],
|
2021-10-29 08:47:25 +00:00
|
|
|
|
setup(props, { attrs, slots, emit, expose }) {
|
2021-09-25 08:51:32 +00:00
|
|
|
|
// convertTreeToData 兼容 a-tree-node 历史写法,未来a-tree-node移除后,删除相关代码,不要再render中调用 treeData,否则死循环
|
|
|
|
|
const treeData = ref<DataNode[]>(
|
|
|
|
|
props.treeData || convertTreeToData(filterEmpty(slots.default?.())),
|
|
|
|
|
);
|
2021-10-29 08:47:25 +00:00
|
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
|
watch(
|
|
|
|
|
() => props.treeData,
|
|
|
|
|
() => {
|
|
|
|
|
treeData.value = props.treeData;
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
onUpdated(() => {
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
if (props.treeData === undefined && slots.default) {
|
|
|
|
|
treeData.value = convertTreeToData(filterEmpty(slots.default?.()));
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
// Shift click usage
|
|
|
|
|
const lastSelectedKey = ref<Key>();
|
|
|
|
|
|
|
|
|
|
const cachedSelectedKeys = ref<Key[]>();
|
|
|
|
|
|
|
|
|
|
const treeRef = ref();
|
2021-10-29 08:47:25 +00:00
|
|
|
|
expose({
|
|
|
|
|
selectedKeys: computed(() => treeRef.value?.selectedKeys),
|
|
|
|
|
checkedKeys: computed(() => treeRef.value?.checkedKeys),
|
|
|
|
|
halfCheckedKeys: computed(() => treeRef.value?.halfCheckedKeys),
|
|
|
|
|
loadedKeys: computed(() => treeRef.value?.loadedKeys),
|
|
|
|
|
loadingKeys: computed(() => treeRef.value?.loadingKeys),
|
|
|
|
|
expandedKeys: computed(() => treeRef.value?.expandedKeys),
|
|
|
|
|
});
|
2021-09-25 08:51:32 +00:00
|
|
|
|
const getInitExpandedKeys = () => {
|
|
|
|
|
const { keyEntities } = convertDataToEntities(treeData.value);
|
|
|
|
|
|
|
|
|
|
let initExpandedKeys: any;
|
|
|
|
|
|
|
|
|
|
// Expanded keys
|
|
|
|
|
if (props.defaultExpandAll) {
|
|
|
|
|
initExpandedKeys = Object.keys(keyEntities);
|
|
|
|
|
} else if (props.defaultExpandParent) {
|
|
|
|
|
initExpandedKeys = conductExpandParent(
|
2022-03-12 01:56:32 +00:00
|
|
|
|
props.expandedKeys || props.defaultExpandedKeys || [],
|
2021-09-25 08:51:32 +00:00
|
|
|
|
keyEntities,
|
|
|
|
|
);
|
2020-03-07 11:45:13 +00:00
|
|
|
|
} else {
|
2021-09-25 08:51:32 +00:00
|
|
|
|
initExpandedKeys = props.expandedKeys || props.defaultExpandedKeys;
|
2020-03-07 11:45:13 +00:00
|
|
|
|
}
|
2021-09-25 08:51:32 +00:00
|
|
|
|
return initExpandedKeys;
|
2019-01-12 03:33:27 +00:00
|
|
|
|
};
|
2018-09-26 14:57:01 +00:00
|
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
|
const selectedKeys = ref(props.selectedKeys || props.defaultSelectedKeys || []);
|
|
|
|
|
|
|
|
|
|
const expandedKeys = ref<Key[]>(getInitExpandedKeys());
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
() => props.selectedKeys,
|
|
|
|
|
() => {
|
|
|
|
|
if (props.selectedKeys !== undefined) {
|
|
|
|
|
selectedKeys.value = props.selectedKeys;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{ immediate: true },
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
() => props.expandedKeys,
|
|
|
|
|
() => {
|
|
|
|
|
if (props.expandedKeys !== undefined) {
|
|
|
|
|
expandedKeys.value = props.expandedKeys;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{ immediate: true },
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const expandFolderNode = (event: MouseEvent, node: any) => {
|
|
|
|
|
const { isLeaf } = node;
|
|
|
|
|
|
|
|
|
|
if (isLeaf || event.shiftKey || event.metaKey || event.ctrlKey) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// Call internal rc-tree expand function
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/12567
|
|
|
|
|
treeRef.value!.onNodeExpand(event as any, node);
|
|
|
|
|
};
|
|
|
|
|
const onDebounceExpand = debounce(expandFolderNode, 200, {
|
|
|
|
|
leading: true,
|
|
|
|
|
});
|
|
|
|
|
const onExpand = (
|
|
|
|
|
keys: Key[],
|
|
|
|
|
info: {
|
|
|
|
|
node: EventDataNode;
|
|
|
|
|
expanded: boolean;
|
|
|
|
|
nativeEvent: MouseEvent;
|
|
|
|
|
},
|
|
|
|
|
) => {
|
|
|
|
|
if (props.expandedKeys === undefined) {
|
|
|
|
|
expandedKeys.value = keys;
|
|
|
|
|
}
|
|
|
|
|
// Call origin function
|
|
|
|
|
emit('update:expandedKeys', keys);
|
|
|
|
|
emit('expand', keys, info);
|
|
|
|
|
};
|
2018-09-26 14:57:01 +00:00
|
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
|
const onClick = (event: MouseEvent, node: EventDataNode) => {
|
|
|
|
|
const { expandAction } = props;
|
2018-09-26 14:57:01 +00:00
|
|
|
|
|
|
|
|
|
// Expand the tree
|
|
|
|
|
if (expandAction === 'click') {
|
2021-09-25 08:51:32 +00:00
|
|
|
|
onDebounceExpand(event, node);
|
2018-09-26 14:57:01 +00:00
|
|
|
|
}
|
2021-09-25 08:51:32 +00:00
|
|
|
|
emit('click', event, node);
|
|
|
|
|
};
|
2018-09-26 14:57:01 +00:00
|
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
|
const onDoubleClick = (event: MouseEvent, node: EventDataNode) => {
|
|
|
|
|
const { expandAction } = props;
|
2018-09-26 14:57:01 +00:00
|
|
|
|
// Expand the tree
|
2019-11-20 07:49:31 +00:00
|
|
|
|
if (expandAction === 'dblclick' || expandAction === 'doubleclick') {
|
2021-09-25 08:51:32 +00:00
|
|
|
|
onDebounceExpand(event, node);
|
2018-09-26 14:57:01 +00:00
|
|
|
|
}
|
|
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
|
emit('doubleclick', event, node);
|
|
|
|
|
emit('dblclick', event, node);
|
|
|
|
|
};
|
2021-10-07 05:27:43 +00:00
|
|
|
|
const fieldNames = computed(() => fillFieldNames(props.fieldNames));
|
2021-09-25 08:51:32 +00:00
|
|
|
|
const onSelect = (
|
|
|
|
|
keys: Key[],
|
|
|
|
|
event: {
|
|
|
|
|
event: 'select';
|
|
|
|
|
selected: boolean;
|
|
|
|
|
node: any;
|
|
|
|
|
selectedNodes: DataNode[];
|
|
|
|
|
nativeEvent: MouseEvent;
|
|
|
|
|
},
|
|
|
|
|
) => {
|
|
|
|
|
const { multiple } = props;
|
2019-01-12 03:33:27 +00:00
|
|
|
|
const { node, nativeEvent } = event;
|
2021-10-07 05:27:43 +00:00
|
|
|
|
const key = node[fieldNames.value.key];
|
2021-09-25 08:51:32 +00:00
|
|
|
|
// const newState: DirectoryTreeState = {};
|
2020-03-07 11:45:13 +00:00
|
|
|
|
|
|
|
|
|
// We need wrap this event since some value is not same
|
2021-09-25 08:51:32 +00:00
|
|
|
|
const newEvent: any = {
|
2020-03-07 11:45:13 +00:00
|
|
|
|
...event,
|
|
|
|
|
selected: true, // Directory selected always true
|
|
|
|
|
};
|
|
|
|
|
|
2018-09-26 14:57:01 +00:00
|
|
|
|
// Windows / Mac single pick
|
2022-03-12 01:56:32 +00:00
|
|
|
|
const ctrlPick: boolean = nativeEvent?.ctrlKey || nativeEvent?.metaKey;
|
|
|
|
|
const shiftPick: boolean = nativeEvent?.shiftKey;
|
2018-09-26 14:57:01 +00:00
|
|
|
|
|
|
|
|
|
// Generate new selected keys
|
2021-09-25 08:51:32 +00:00
|
|
|
|
let newSelectedKeys: Key[];
|
2018-09-26 14:57:01 +00:00
|
|
|
|
if (multiple && ctrlPick) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
// Control click
|
|
|
|
|
newSelectedKeys = keys;
|
2021-09-25 08:51:32 +00:00
|
|
|
|
lastSelectedKey.value = key;
|
|
|
|
|
cachedSelectedKeys.value = newSelectedKeys;
|
2021-10-07 05:27:43 +00:00
|
|
|
|
newEvent.selectedNodes = convertDirectoryKeysToNodes(
|
|
|
|
|
treeData.value,
|
|
|
|
|
newSelectedKeys,
|
|
|
|
|
fieldNames.value,
|
|
|
|
|
);
|
2018-09-26 14:57:01 +00:00
|
|
|
|
} else if (multiple && shiftPick) {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
// Shift click
|
|
|
|
|
newSelectedKeys = Array.from(
|
|
|
|
|
new Set([
|
2021-09-25 08:51:32 +00:00
|
|
|
|
...(cachedSelectedKeys.value || []),
|
|
|
|
|
...calcRangeKeys({
|
|
|
|
|
treeData: treeData.value,
|
|
|
|
|
expandedKeys: expandedKeys.value,
|
|
|
|
|
startKey: key,
|
|
|
|
|
endKey: lastSelectedKey.value,
|
2021-10-07 05:27:43 +00:00
|
|
|
|
fieldNames: fieldNames.value,
|
2021-09-25 08:51:32 +00:00
|
|
|
|
}),
|
2019-01-12 03:33:27 +00:00
|
|
|
|
]),
|
|
|
|
|
);
|
2021-10-07 05:27:43 +00:00
|
|
|
|
newEvent.selectedNodes = convertDirectoryKeysToNodes(
|
|
|
|
|
treeData.value,
|
|
|
|
|
newSelectedKeys,
|
|
|
|
|
fieldNames.value,
|
|
|
|
|
);
|
2018-09-26 14:57:01 +00:00
|
|
|
|
} else {
|
2019-01-12 03:33:27 +00:00
|
|
|
|
// Single click
|
2021-10-07 05:27:43 +00:00
|
|
|
|
newSelectedKeys = keys;
|
2021-09-25 08:51:32 +00:00
|
|
|
|
lastSelectedKey.value = key;
|
|
|
|
|
cachedSelectedKeys.value = newSelectedKeys;
|
2021-10-07 05:27:43 +00:00
|
|
|
|
newEvent.selectedNodes = convertDirectoryKeysToNodes(
|
|
|
|
|
treeData.value,
|
|
|
|
|
newSelectedKeys,
|
|
|
|
|
fieldNames.value,
|
|
|
|
|
);
|
2018-09-26 14:57:01 +00:00
|
|
|
|
}
|
|
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
|
emit('update:selectedKeys', newSelectedKeys);
|
|
|
|
|
emit('select', newSelectedKeys, newEvent);
|
|
|
|
|
if (props.selectedKeys === undefined) {
|
|
|
|
|
selectedKeys.value = newSelectedKeys;
|
2018-09-26 14:57:01 +00:00
|
|
|
|
}
|
2021-09-25 08:51:32 +00:00
|
|
|
|
};
|
2018-09-26 14:57:01 +00:00
|
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
|
const onCheck: TreeProps['onCheck'] = (checkedObjOrKeys, eventObj) => {
|
|
|
|
|
emit('update:checkedKeys', checkedObjOrKeys);
|
|
|
|
|
emit('check', checkedObjOrKeys, eventObj);
|
|
|
|
|
};
|
2018-09-26 14:57:01 +00:00
|
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
|
const { prefixCls, direction } = useConfigInject('tree', props);
|
2018-09-26 14:57:01 +00:00
|
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
|
return () => {
|
|
|
|
|
const connectClassName = classNames(
|
|
|
|
|
`${prefixCls.value}-directory`,
|
|
|
|
|
{
|
|
|
|
|
[`${prefixCls.value}-directory-rtl`]: direction.value === 'rtl',
|
|
|
|
|
},
|
|
|
|
|
attrs.class,
|
|
|
|
|
);
|
|
|
|
|
const { icon = slots.icon, blockNode = true, ...otherProps } = props;
|
|
|
|
|
return (
|
|
|
|
|
<Tree
|
|
|
|
|
{...attrs}
|
|
|
|
|
icon={icon || getIcon}
|
|
|
|
|
ref={treeRef}
|
|
|
|
|
blockNode={blockNode}
|
|
|
|
|
{...otherProps}
|
|
|
|
|
prefixCls={prefixCls.value}
|
|
|
|
|
class={connectClassName}
|
|
|
|
|
expandedKeys={expandedKeys.value}
|
|
|
|
|
selectedKeys={selectedKeys.value}
|
|
|
|
|
onSelect={onSelect}
|
|
|
|
|
onClick={onClick}
|
|
|
|
|
onDblclick={onDoubleClick}
|
|
|
|
|
onExpand={onExpand}
|
|
|
|
|
onCheck={onCheck}
|
|
|
|
|
v-slots={slots}
|
|
|
|
|
/>
|
2019-12-21 10:37:33 +00:00
|
|
|
|
);
|
2019-01-12 03:33:27 +00:00
|
|
|
|
};
|
2018-09-26 14:57:01 +00:00
|
|
|
|
},
|
2020-10-22 06:25:02 +00:00
|
|
|
|
});
|