refactor: tree to ts

components/tree/DirectoryTree.tsx

@@ -1,4 +1,4 @@
-import { inject } from 'vue';
+import { defineComponent, inject } from 'vue';
 import omit from 'omit.js';
 import debounce from 'lodash-es/debounce';
 import FolderOpenOutlined from '@ant-design/icons-vue/FolderOpenOutlined';
@@ -15,7 +15,8 @@ import {
   getFullKeyListByTreeData,
 } from './util';
 import BaseMixin from '../_util/BaseMixin';
-import { initDefaultProps, getOptionProps, getComponent, getSlot } from '../_util/props-util';
+import { getOptionProps, getComponent, getSlot } from '../_util/props-util';
+import initDefaultProps from '../_util/props-util/initDefaultProps';
 import { defaultConfigProvider } from '../config-provider';
 
 // export type ExpandAction = false | 'click' | 'dblclick'; export interface
@@ -23,6 +24,11 @@ import { defaultConfigProvider } from '../config-provider';
 // export interface DirectoryTreeState {   expandedKeys?: string[];
 // selectedKeys?: string[]; }
 
+export interface DirectoryTreeState {
+  _expandedKeys?: string[];
+  _selectedKeys?: string[];
+}
+
 function getIcon(props) {
   const { isLeaf, expanded } = props;
   if (isLeaf) {
@@ -31,14 +37,10 @@ function getIcon(props) {
   return expanded ? <FolderOpenOutlined /> : <FolderOutlined />;
 }
 
-export default {
+export default defineComponent({
   name: 'ADirectoryTree',
   mixins: [BaseMixin],
   inheritAttrs: false,
-  // model: {
-  //   prop: 'checkedKeys',
-  //   event: 'check',
-  // },
   props: initDefaultProps(
     {
       ...TreeProps(),
@@ -51,6 +53,11 @@ export default {
   ),
   setup() {
     return {
+      children: null,
+      onDebounceExpand: null,
+      tree: null,
+      lastSelectedKey: [],
+      cachedSelectedKeys: [],
       configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
@@ -59,7 +66,7 @@ export default {
     const { defaultExpandAll, defaultExpandParent, expandedKeys, defaultExpandedKeys } = props;
     const children = getSlot(this);
     const { keyEntities } = convertTreeToEntities(children);
-    const state = {};
+    const state: DirectoryTreeState = {};
     // Selected keys
     state._selectedKeys = props.selectedKeys || props.defaultSelectedKeys || [];
 
@@ -75,15 +82,15 @@ export default {
     } else {
       state._expandedKeys = expandedKeys || defaultExpandedKeys;
     }
-
-    this.onDebounceExpand = debounce(this.expandFolderNode, 200, { leading: true });
-    this.children = null;
     return {
       _selectedKeys: [],
       _expandedKeys: [],
       ...state,
     };
   },
+  created() {
+    this.onDebounceExpand = debounce(this.expandFolderNode, 200, { leading: true });
+  },
   watch: {
     expandedKeys(val) {
       this.setState({ _expandedKeys: val });
@@ -130,7 +137,7 @@ export default {
       const { node, nativeEvent } = event;
       const { eventKey = '' } = node;
 
-      const newState = {};
+      const newState: DirectoryTreeState = {};
 
       // We need wrap this event since some value is not same
       const newEvent = {
@@ -235,4 +242,4 @@ export default {
     };
     return <Tree {...treeProps}>{this.children}</Tree>;
   },
-};
+});

components/tree/Tree.tsx

@@ -1,4 +1,4 @@
-import { inject } from 'vue';
+import { defineComponent, inject } from 'vue';
 import classNames from '../_util/classNames';
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
 import FileOutlined from '@ant-design/icons-vue/FileOutlined';
@@ -8,7 +8,8 @@ import PlusSquareOutlined from '@ant-design/icons-vue/PlusSquareOutlined';
 import VcTree from '../vc-tree';
 import animation from '../_util/openAnimation';
 import PropTypes from '../_util/vue-types';
-import { initDefaultProps, getOptionProps, getComponent, getSlot } from '../_util/props-util';
+import { getOptionProps, getComponent, getSlot } from '../_util/props-util';
+import initDefaultProps from '../_util/props-util/initDefaultProps';
 import { cloneElement } from '../_util/vnode';
 import { defaultConfigProvider } from '../config-provider';
 
@@ -102,7 +103,7 @@ function TreeProps() {
 
 export { TreeProps };
 
-export default {
+export default defineComponent({
   name: 'ATree',
   inheritAttrs: false,
   props: initDefaultProps(TreeProps(), {
@@ -116,12 +117,13 @@ export default {
   }),
   setup() {
     return {
+      tree: null,
       configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   TreeNode,
   methods: {
-    renderSwitcherIcon(prefixCls, switcherIcon, { isLeaf, loading, expanded }) {
+    renderSwitcherIcon(prefixCls: string, switcherIcon, { isLeaf, loading, expanded }) {
       const { showLine } = this.$props;
       if (loading) {
         return <LoadingOutlined class={`${prefixCls}-switcher-loading-icon`} />;
@@ -184,7 +186,7 @@ export default {
       this.$emit('update:expandedKeys', expandedKeys);
       this.$emit('expand', expandedKeys, eventObj);
     },
-    handleSelect(selectedKeys, eventObj) {
+    handleSelect(selectedKeys: string[], eventObj) {
       this.$emit('update:selectedKeys', selectedKeys);
       this.$emit('select', selectedKeys, eventObj);
     },
@@ -216,10 +218,10 @@ export default {
       onCheck: this.handleCheck,
       onExpand: this.handleExpand,
       onSelect: this.handleSelect,
-    };
+    } as any;
     if (treeData) {
       vcTreeProps.treeData = treeData;
     }
     return <VcTree {...vcTreeProps} __propsSymbol__={[]} />;
   },
-};
+});

components/tree/index.tsx

@@ -1,10 +1,11 @@
+import { App } from 'vue';
 import Tree from './Tree';
 import DirectoryTree from './DirectoryTree';
 
 Tree.TreeNode.name = 'ATreeNode';
 Tree.DirectoryTree = DirectoryTree;
 /* istanbul ignore next */
-Tree.install = function(app) {
+Tree.install = function(app: App) {
   app.component(Tree.name, Tree);
   app.component(Tree.TreeNode.name, Tree.TreeNode);
   app.component(DirectoryTree.name, DirectoryTree);

components/tree/util.ts

@@ -1,11 +1,11 @@
 import { getNodeChildren, convertTreeToEntities } from '../vc-tree/src/util';
 import { getSlot } from '../_util/props-util';
 
-const Record = {
-  None: 'node',
-  Start: 'start',
-  End: 'end',
-};
+enum Record {
+  None,
+  Start,
+  End,
+}
 
 // TODO: Move this logic into `rc-tree`
 function traverseNodesKey(rootChildren, callback) {
@@ -88,7 +88,7 @@ export function convertDirectoryKeysToNodes(rootChildren, keys) {
   return nodes;
 }
 
-export function getFullKeyListByTreeData(treeData, replaceFields = {}) {
+export function getFullKeyListByTreeData(treeData: any, replaceFields: any = {}) {
   let keys = [];
   const { key = 'key', children = 'children' } = replaceFields(treeData || []).forEach(item => {
     keys.push(item[key]);