2021-09-25 16:51:32 +08:00
|
|
|
/**
|
|
|
|
* Webpack has bug for import loop, which is not the same behavior as ES module.
|
|
|
|
* When util.js imports the TreeNode for tree generate will cause treeContextTypes be empty.
|
|
|
|
*/
|
|
|
|
|
2022-04-27 22:37:22 +08:00
|
|
|
import type { ComputedRef, InjectionKey, PropType, ShallowRef } from 'vue';
|
|
|
|
import { shallowRef, inject, computed, defineComponent, provide } from 'vue';
|
2021-09-25 16:51:32 +08:00
|
|
|
import type { VueNode } from '../_util/type';
|
|
|
|
import type {
|
|
|
|
IconType,
|
|
|
|
Key,
|
|
|
|
DataEntity,
|
|
|
|
EventDataNode,
|
|
|
|
DragNodeEvent,
|
|
|
|
Direction,
|
2022-04-27 22:37:22 +08:00
|
|
|
FlattenNode,
|
2021-09-25 16:51:32 +08:00
|
|
|
} from './interface';
|
|
|
|
|
2022-01-21 21:58:10 +08:00
|
|
|
import type { DraggableConfig } from './Tree';
|
|
|
|
|
2021-09-25 16:51:32 +08:00
|
|
|
export type NodeMouseEventParams = {
|
|
|
|
event: MouseEvent;
|
|
|
|
node: EventDataNode;
|
|
|
|
};
|
|
|
|
export type NodeDragEventParams = {
|
2022-01-21 21:58:10 +08:00
|
|
|
event: DragEvent;
|
2021-09-25 16:51:32 +08:00
|
|
|
node: EventDataNode;
|
|
|
|
};
|
|
|
|
|
|
|
|
export type NodeMouseEventHandler = (e: MouseEvent, node: EventDataNode) => void;
|
|
|
|
export type NodeDragEventHandler = (
|
2022-01-21 21:58:10 +08:00
|
|
|
e: DragEvent,
|
2021-09-25 16:51:32 +08:00
|
|
|
node: DragNodeEvent,
|
|
|
|
outsideTree?: boolean,
|
|
|
|
) => void;
|
|
|
|
|
|
|
|
export interface TreeContextProps {
|
|
|
|
prefixCls: string;
|
|
|
|
selectable: boolean;
|
|
|
|
showIcon: boolean;
|
|
|
|
icon: IconType;
|
|
|
|
switcherIcon: IconType;
|
2023-04-22 22:17:17 +08:00
|
|
|
draggable: DraggableConfig | false;
|
2022-01-21 21:58:10 +08:00
|
|
|
draggingNodeKey?: Key;
|
2021-09-25 16:51:32 +08:00
|
|
|
checkable: boolean;
|
|
|
|
customCheckable: () => any;
|
|
|
|
checkStrictly: boolean;
|
|
|
|
disabled: boolean;
|
2022-01-21 21:58:10 +08:00
|
|
|
keyEntities: Record<Key, DataEntity<any>>;
|
2021-09-25 16:51:32 +08:00
|
|
|
// for details see comment in Tree.state (Tree.tsx)
|
|
|
|
dropLevelOffset?: number;
|
|
|
|
dropContainerKey: Key | null;
|
|
|
|
dropTargetKey: Key | null;
|
|
|
|
dropPosition: -1 | 0 | 1 | null;
|
|
|
|
indent: number | null;
|
|
|
|
dropIndicatorRender: (props: {
|
|
|
|
dropPosition: -1 | 0 | 1;
|
|
|
|
dropLevelOffset: number;
|
|
|
|
indent: number | null;
|
|
|
|
prefixCls: string;
|
|
|
|
direction: Direction;
|
|
|
|
}) => VueNode;
|
|
|
|
dragOverNodeKey: Key | null;
|
2022-04-27 22:37:22 +08:00
|
|
|
dragging: boolean;
|
2021-09-25 16:51:32 +08:00
|
|
|
direction: Direction;
|
|
|
|
|
|
|
|
loadData: (treeNode: EventDataNode) => Promise<void>;
|
|
|
|
filterTreeNode: (treeNode: EventDataNode) => boolean;
|
|
|
|
|
|
|
|
onNodeClick: NodeMouseEventHandler;
|
|
|
|
onNodeDoubleClick: NodeMouseEventHandler;
|
|
|
|
onNodeExpand: NodeMouseEventHandler;
|
|
|
|
onNodeSelect: NodeMouseEventHandler;
|
|
|
|
onNodeCheck: (e: MouseEvent, treeNode: EventDataNode, checked: boolean) => void;
|
|
|
|
onNodeLoad: (treeNode: EventDataNode) => void;
|
|
|
|
onNodeMouseEnter: NodeMouseEventHandler;
|
|
|
|
onNodeMouseLeave: NodeMouseEventHandler;
|
|
|
|
onNodeContextMenu: NodeMouseEventHandler;
|
|
|
|
onNodeDragStart: NodeDragEventHandler;
|
|
|
|
onNodeDragEnter: NodeDragEventHandler;
|
|
|
|
onNodeDragOver: NodeDragEventHandler;
|
|
|
|
onNodeDragLeave: NodeDragEventHandler;
|
|
|
|
onNodeDragEnd: NodeDragEventHandler;
|
|
|
|
onNodeDrop: NodeDragEventHandler;
|
|
|
|
slots: {
|
2022-01-21 21:58:10 +08:00
|
|
|
title?: (data: any) => any;
|
|
|
|
titleRender?: (data: any) => any;
|
2021-11-26 22:39:25 +08:00
|
|
|
[key: string]: ((...args: any[]) => any) | undefined;
|
2021-09-25 16:51:32 +08:00
|
|
|
};
|
|
|
|
}
|
|
|
|
const TreeContextKey: InjectionKey<ComputedRef<TreeContextProps>> = Symbol('TreeContextKey');
|
|
|
|
|
|
|
|
export const TreeContext = defineComponent({
|
2022-09-26 21:33:41 +08:00
|
|
|
compatConfig: { MODE: 3 },
|
2021-09-25 16:51:32 +08:00
|
|
|
name: 'TreeContext',
|
|
|
|
props: {
|
|
|
|
value: { type: Object as PropType<TreeContextProps> },
|
|
|
|
},
|
|
|
|
setup(props, { slots }) {
|
|
|
|
provide(
|
|
|
|
TreeContextKey,
|
|
|
|
computed(() => props.value),
|
|
|
|
);
|
|
|
|
return () => slots.default?.();
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
export const useInjectTreeContext = () => {
|
|
|
|
return inject(
|
|
|
|
TreeContextKey,
|
|
|
|
computed(() => ({} as TreeContextProps)),
|
|
|
|
);
|
|
|
|
};
|
2022-04-27 22:37:22 +08:00
|
|
|
type KeysStateKeyType = {
|
|
|
|
expandedKeysSet: ComputedRef<Set<Key>>;
|
|
|
|
selectedKeysSet: ComputedRef<Set<Key>>;
|
|
|
|
loadedKeysSet: ComputedRef<Set<Key>>;
|
|
|
|
loadingKeysSet: ComputedRef<Set<Key>>;
|
|
|
|
checkedKeysSet: ComputedRef<Set<Key>>;
|
|
|
|
halfCheckedKeysSet: ComputedRef<Set<Key>>;
|
|
|
|
expandedKeys: ShallowRef<Key[]>;
|
|
|
|
selectedKeys: ShallowRef<Key[]>;
|
|
|
|
loadedKeys: ShallowRef<Key[]>;
|
|
|
|
loadingKeys: ShallowRef<Key[]>;
|
|
|
|
checkedKeys: ShallowRef<Key[]>;
|
|
|
|
halfCheckedKeys: ShallowRef<Key[]>;
|
|
|
|
flattenNodes: ShallowRef<FlattenNode[]>;
|
|
|
|
};
|
|
|
|
const KeysStateKey: InjectionKey<KeysStateKeyType> = Symbol('KeysStateKey');
|
|
|
|
export const useProvideKeysState = (state: KeysStateKeyType) => {
|
|
|
|
provide(KeysStateKey, state);
|
|
|
|
};
|
|
|
|
|
|
|
|
export const useInjectKeysState = () => {
|
|
|
|
return inject(KeysStateKey, {
|
|
|
|
expandedKeys: shallowRef<Key[]>([]),
|
|
|
|
selectedKeys: shallowRef<Key[]>([]),
|
|
|
|
loadedKeys: shallowRef<Key[]>([]),
|
|
|
|
loadingKeys: shallowRef<Key[]>([]),
|
|
|
|
checkedKeys: shallowRef<Key[]>([]),
|
|
|
|
halfCheckedKeys: shallowRef<Key[]>([]),
|
|
|
|
expandedKeysSet: computed<Set<Key>>(() => new Set()),
|
|
|
|
selectedKeysSet: computed<Set<Key>>(() => new Set()),
|
|
|
|
loadedKeysSet: computed<Set<Key>>(() => new Set()),
|
|
|
|
loadingKeysSet: computed<Set<Key>>(() => new Set()),
|
|
|
|
checkedKeysSet: computed<Set<Key>>(() => new Set()),
|
|
|
|
halfCheckedKeysSet: computed<Set<Key>>(() => new Set()),
|
|
|
|
flattenNodes: shallowRef<FlattenNode[]>([]),
|
|
|
|
});
|
|
|
|
};
|