feat(comp: tree,tree-select,pro-tree): add getNode method (#910)

IDuxFE · May 19, 2022 · 3abde54 · 3abde54
1 parent fff5022
commit 3abde54
Show file tree

Hide file tree

Showing 13 changed files with 87 additions and 4 deletions.
diff --git a/packages/components/tree-select/__tests__/treeSelect.spec.ts b/packages/components/tree-select/__tests__/treeSelect.spec.ts
@@ -757,5 +757,23 @@ describe('TreeSelect', () => {
 
       expect(onUpdateExpandedKeys).toBeCalledWith(['0'])
     })
+
+    test('getNode work', async () => {
+      const onUpdateExpandedKeys = vi.fn()
+      const wrapper = TreeSelectMount({
+        props: {
+          open: true,
+          dataSource: defaultDataSource,
+          expandedKeys: ['0'],
+          'onUpdate:expandedKeys': onUpdateExpandedKeys,
+        },
+      })
+
+      expect(wrapper.vm.getNode('0')).toMatchObject(defaultDataSource[0])
+
+      expect(wrapper.vm.getNode('0-1')).toMatchObject(defaultDataSource[0].children[1])
+
+      expect(wrapper.vm.getNode('4')).toBe(undefined)
+    })
   })
 })
diff --git a/packages/components/tree-select/docs/Index.zh.md b/packages/components/tree-select/docs/Index.zh.md
@@ -110,6 +110,7 @@ order: 0
 | `expandAll` | 展开所有节点 | - | - |
 | `focus` | 获取焦点 | - | - |
 | `scrollTo` | 滚动到指定位置 | `(option?: number \| VirtualScrollToOptions) => void` | 仅 `virtual` 模式下可用 |
+| `getNode` | 获取指定节点数据 | ` (key: VKey) => TreeNode \| undefined ` | |
 
 <!--- insert less variable begin  --->
 ## 主题变量

diff --git a/packages/components/tree-select/src/TreeSelect.tsx b/packages/components/tree-select/src/TreeSelect.tsx
@@ -72,6 +72,7 @@ export default defineComponent({
       collapseAll: () => treeRef.value?.collapseAll(),
       expandAll: () => treeRef.value?.expandAll(),
       scrollTo,
+      getNode: (key: VKey) => treeRef.value?.getNode(key),
     })
 
     watch(overlayOpened, opened => {

diff --git a/packages/components/tree-select/src/types.ts b/packages/components/tree-select/src/types.ts
@@ -128,6 +128,13 @@ export interface TreeSelectBindings {
   collapseAll: () => void
   expandAll: () => void
   scrollTo: VirtualScrollToFn
+  /**
+   * get node by it's key
+   *
+   * @param key
+   * @returns node
+   */
+  getNode: (key: VKey) => TreeNode | undefined
 }
 export type TreeSelectComponent = DefineComponent<
   Omit<HTMLAttributes, keyof TreeSelectPublicProps> & TreeSelectPublicProps,

diff --git a/packages/components/tree/__tests__/tree.spec.ts b/packages/components/tree/__tests__/tree.spec.ts
@@ -365,6 +365,23 @@ describe('Tree', () => {
     expect(onUpdateExpandedKeys).toBeCalledWith(['0'])
   })
 
+  test('getNode work', async () => {
+    const onUpdateExpandedKeys = vi.fn()
+    const wrapper = TreeMount({
+      props: {
+        dataSource: simpleDataSource,
+        expandedKeys: ['0'],
+        'onUpdate:expandedKeys': onUpdateExpandedKeys,
+      },
+    })
+
+    expect(wrapper.vm.getNode('0')).toMatchObject(simpleDataSource[0])
+
+    expect(wrapper.vm.getNode('0-1')).toMatchObject(simpleDataSource[0].children[1])
+
+    expect(wrapper.vm.getNode('4')).toBe(undefined)
+  })
+
   test('v-model:selectedKeys work', async () => {
     const onUpdateSelectedKeys = vi.fn()
     const wrapper = TreeMount({

diff --git a/packages/components/tree/docs/Index.en.md b/packages/components/tree/docs/Index.en.md
@@ -29,3 +29,4 @@ order: 0
 | Name | Description | Parameter Type | Remark |
 | --- | --- | --- | --- |
 | - | - | - | - |
+| `getNode` | gets the specified node | `(key: VKey) => TreeNode \| undefined` | |
diff --git a/packages/components/tree/docs/Index.zh.md b/packages/components/tree/docs/Index.zh.md
@@ -110,6 +110,7 @@ export type TreeDropType = 'before' | 'inside' | 'after'
 | `expandAll` | 展开所有节点 | - | - |
 | `focus` | 获取焦点 | - | - |
 | `scrollTo` | 滚动到指定位置 | `(option?: number \| VirtualScrollToOptions) => void` | 仅 `virtual` 模式下可用 |
+| `getNode` | 获取指定节点数据 | ` (key: VKey) => TreeNode \| undefined ` | |
 
 <!--- insert less variable begin  --->
 ## 主题变量
@@ -136,4 +137,4 @@ export type TreeDropType = 'before' | 'inside' | 'after'
 | `@tree-node-content-label-highlight-color` | `@color-primary` | - | - |
 | `@tree-node-checkbox-margin` | `0 @spacing-xs 0 (@tree-node-content-height / 2 - @tree-icon-font-size / 2)` | - | - |
 | `@tree-expand-icon-color` | `@color-graphite` | - | - |
-<!--- insert less variable end  --->
+<!--- insert less variable end  --->
diff --git a/packages/components/tree/src/Tree.tsx b/packages/components/tree/src/Tree.tsx
@@ -14,7 +14,7 @@ import { computed, defineComponent, provide, ref } from 'vue'
 import { isNil } from 'lodash-es'
 
 import { CdkVirtualScroll } from '@idux/cdk/scroll'
-import { callEmit } from '@idux/cdk/utils'
+import { type VKey, callEmit } from '@idux/cdk/utils'
 import { ɵEmpty } from '@idux/components/_private/empty'
 import { useGlobalConfig } from '@idux/components/config'
 
@@ -132,12 +132,17 @@ export default defineComponent({
       virtualScrollRef?.value?.scrollTo(option)
     }
 
+    const getNode = (key: VKey) => {
+      return mergedNodeMap.value.get(key)?.rawNode
+    }
+
     expose({
       focus,
       blur,
       expandAll: expandableContext.expandAll,
       collapseAll: expandableContext.collapseAll,
       scrollTo,
+      getNode,
     })
 
     const handleScrolledChange = (startIndex: number, endIndex: number, visibleNodes: MergedNode[]) => {

diff --git a/packages/components/tree/src/types.ts b/packages/components/tree/src/types.ts
@@ -88,6 +88,13 @@ export interface TreeBindings {
   collapseAll: () => void
   expandAll: () => void
   scrollTo: VirtualScrollToFn
+  /**
+   * get node by it's key
+   *
+   * @param key
+   * @returns node
+   */
+  getNode: (key: VKey) => TreeNode | undefined
 }
 export type TreeComponent = DefineComponent<Omit<HTMLAttributes, keyof TreePublicProps> & TreePublicProps, TreeBindings>
 export type TreeInstance = InstanceType<DefineComponent<TreeProps, TreeBindings>>

diff --git a/packages/pro/tree/__tests__/proTree.spec.ts b/packages/pro/tree/__tests__/proTree.spec.ts
@@ -443,4 +443,20 @@ describe('ProTree', () => {
 
     expect(onUpdateExpandedKeys).toBeCalledWith(['0'])
   })
+  test('getNode work', async () => {
+    const onUpdateExpandedKeys = vi.fn()
+    const wrapper = ProTreeMount({
+      props: {
+        dataSource: defaultDataSource,
+        expandedKeys: ['0'],
+        'onUpdate:expandedKeys': onUpdateExpandedKeys,
+      },
+    })
+
+    expect(wrapper.vm.getNode('0')).toMatchObject(defaultDataSource[0])
+
+    expect(wrapper.vm.getNode('0-1')).toMatchObject(defaultDataSource[0].children[1])
+
+    expect(wrapper.vm.getNode('4')).toBe(undefined)
+  })
 })
diff --git a/packages/pro/tree/docs/Index.zh.md b/packages/pro/tree/docs/Index.zh.md
@@ -80,6 +80,7 @@ subtitle: 高级树型控件
 | --- | --- | --- | --- |
 | `collapseAll` | 收起所有节点 | - | - |
 | `expandAll` | 展开所有节点 | - | - |
+| `getNode` | 获取指定节点数据 | ` (key: VKey) => TreeNode \| undefined ` | |
 <!-- | `scrollTo` | 滚动到指定位置 | `(option?: number \| VirtualScrollToOptions) => void` | 仅 `virtual` 模式下可用 | -->
 
 <!--- insert less variable begin  --->
@@ -100,4 +101,4 @@ subtitle: 高级树型控件
 | `@pro-tree-divider-horizontal-spacing` | `@pro-tree-header-search-wrapper-horizontal-spacing` | - | - |
 | `@pro-tree-divider-vertical-spacing` | `8px` | - | - |
 | `@pro-tree-node-padding` | `0 0 0 8px` | `0 0 0 4px` | - |
-<!--- insert less variable end  --->
+<!--- insert less variable end  --->
diff --git a/packages/pro/tree/src/ProTree.tsx b/packages/pro/tree/src/ProTree.tsx
@@ -9,7 +9,7 @@ import { computed, defineComponent, normalizeClass, normalizeStyle, ref } from '
 
 import { isNil } from 'lodash-es'
 
-import { callEmit, useControlledProp } from '@idux/cdk/utils'
+import { type VKey, callEmit, useControlledProp } from '@idux/cdk/utils'
 import { ɵHeader } from '@idux/components/_private/header'
 import { ɵInput } from '@idux/components/_private/input'
 import { IxButton } from '@idux/components/button'
@@ -77,6 +77,7 @@ export default defineComponent({
     expose({
       collapseAll: () => treeRef.value?.collapseAll(),
       expandAll: () => treeRef.value?.expandAll(),
+      getNode: (key: VKey) => treeRef.value?.getNode(key),
     })
 
     return () => {

diff --git a/packages/pro/tree/src/types.ts b/packages/pro/tree/src/types.ts
@@ -89,6 +89,13 @@ export const proTreeProps = {
 export interface ProTreeBindings {
   expandAll: () => void
   collapseAll: () => void
+  /**
+   * get node by it's key
+   *
+   * @param key
+   * @returns node
+   */
+  getNode: (key: VKey) => TreeNode | undefined
 }
 
 export type ProTreeProps = ExtractInnerPropTypes<typeof proTreeProps>