refactor(tree): tree组件提取节点创建方法到 composition api

src/tree/hooks/useCache.ts

@@ -1,25 +1,8 @@
 import pick from 'lodash/pick';
-import { TdTreeProps } from '../type';
-
-export interface TypeTreeScope {
-  checkProps?: TdTreeProps['checkProps'];
-  disableCheck?: TdTreeProps['disableCheck'];
-  empty?: TdTreeProps['empty'];
-  icon?: TdTreeProps['icon'];
-  label?: TdTreeProps['label'];
-  line?: TdTreeProps['line'];
-  operations?: TdTreeProps['operations'];
-}
-
-export interface TypeTreeCache {
-  nodesMap: Map<string, any>;
-  mouseEvent?: Event;
-  scope: TypeTreeScope;
-  scopedSlots: any;
-}
+import { TypeTreeProps, TypeTreeCache } from '../interface';
 
 // 提供缓存对象
-export default function useCache(props: TdTreeProps) {
+export default function useCache(props: TypeTreeProps) {
   const cache: TypeTreeCache = {
     // 缓存渲染节点
     nodesMap: new Map(),

src/tree/hooks/useTreeNodes.tsx

@@ -0,0 +1,30 @@
+import { TypeTreeProps, TypeTreeState } from '../interface';
+import TreeItem from '../tree-item';
+import TreeNode from '../../_common/js/tree/tree-node';
+
+export default function useTreeNodes(props: TypeTreeProps, state: TypeTreeState) {
+  // 创建单个 tree 节点
+  const renderItem = (node: TreeNode) => {
+    const { nested, cache } = state;
+    const { expandOnClickNode } = props;
+    const { scope, scopedSlots } = cache;
+
+    const treeItem = (
+      <TreeItem
+        key={node.value}
+        node={node}
+        nested={nested}
+        treeScope={scope}
+        proxyScope={scopedSlots}
+        // onClick={this.handleClick}
+        // onChange={this.handleChange}
+        expandOnClickNode={expandOnClickNode}
+      />
+    );
+    return treeItem;
+  };
+
+  return {
+    renderItem,
+  };
+}

src/tree/hooks/useTreeStore.ts

@@ -1,14 +1,8 @@
 import pick from 'lodash/pick';
 import TreeStore from '../../_common/js/tree/tree-store';
-import { TdTreeProps } from '../type';
-import { TypeValueMode, TypeEventState, TypeTreeNodeModel } from '../interface';
+import { TypeTreeProps, TypeValueMode, TypeTreeNodeModel } from '../interface';
 
-export interface TypeUseStoreOptions {
-  onLoad?: (info: TypeEventState) => void;
-  onUpdate?: () => void;
-}
-
-export default function useTreeStore(props: TdTreeProps) {
+export default function useTreeStore(props: TypeTreeProps) {
   const {
     actived, value, valueMode, filter, keys,
   } = props;

src/tree/interface.ts

@@ -1,40 +1,42 @@
-import TreeNode from '../_common/js/tree/tree-node';
-
+import { VNode } from 'vue';
+import { ComputedRef } from '@vue/composition-api';
 import { TNode, TreeOptionData } from '../common';
-
+import TreeStore from '../_common/js/tree/tree-store';
+import TreeNode from '../_common/js/tree/tree-node';
+import { TypeTreeEventState } from '../_common/js/tree/types';
 import {
-  TdTreeProps,
-  TreeNodeModel,
-  TreeInstanceFunctions,
-  TreeNodeValue as TdTreeNodeValue,
-  TreeNodeState as TdTreeNodeState,
+  TdTreeProps, TreeNodeModel, TreeInstanceFunctions, TreeNodeValue, TreeNodeState,
 } from './type';
 
-import {
-  TypeTreeEventState,
-} from '../_common/js/tree/types';
+// 在这个文件做统一的类型梳理
+// 所有类型，接口，都用 Type 作为名称前缀
 
-export type TreeProps = TdTreeProps;
 export * from './type';
 
-export type TypeTdTreeProps = TdTreeProps;
+export type TypeVNode = VNode;
+
+export type TypeTreeProps = TdTreeProps;
+
+export type TypeTNodeState = TreeNodeValue;
 
-export type TreeNodeState = TdTreeNodeState;
+export type TypeTNodeValue = TreeNodeState;
 
-export type TreeNodeValue = TdTreeNodeValue;
+export type TypeTreeNode = TreeNode;
+
+export type TypeTreeStore = TreeStore;
 
 export type TypeValueMode = TdTreeProps['valueMode'];
 
 export type TypeTNodeProp = string | TNode<TypeTreeNodeModel>;
 
 export type TypeTreeNodeModel = TreeNodeModel<TreeOptionData>;
 
-export type TypeTargetNode = TdTreeNodeValue | TreeNode | TypeTreeNodeModel;
+export type TypeTargetNode = TreeNodeValue | TypeTreeNode | TypeTreeNodeModel;
 
 export interface TypeEventState extends TypeTreeEventState {
   mouseEvent?: MouseEvent;
   event?: Event;
-  path?: TreeNode[];
+  path?: TypeTreeNode[];
 }
 
 export interface TypeMark {
@@ -56,3 +58,28 @@ export interface TypeGetTNodeOption {
   node?: TreeNode;
   createElement?: Vue.CreateElement;
 }
+
+export interface TypeTreeScope {
+  checkProps?: TdTreeProps['checkProps'];
+  disableCheck?: TdTreeProps['disableCheck'];
+  empty?: TdTreeProps['empty'];
+  icon?: TdTreeProps['icon'];
+  label?: TdTreeProps['label'];
+  line?: TdTreeProps['line'];
+  operations?: TdTreeProps['operations'];
+}
+
+export interface TypeTreeCache {
+  nodesMap: Map<string, any>;
+  mouseEvent?: Event;
+  scope: TypeTreeScope;
+  scopedSlots: any;
+}
+
+export interface TypeTreeState {
+  store: TypeTreeStore;
+  cache: TypeTreeCache;
+  itemMaxHeight: ComputedRef<number>;
+  vScrollEnable: ComputedRef<boolean>;
+  nested: ComputedRef<boolean>;
+}