feat(comp: tree-select): add expandAll and collapseAll methods (#895)

BREAKING CHANGE: setExpandAll was deprecated, please use collapseAll and
expandAll instead.

packages/components/locales/src/langs/en-US.ts

@@ -102,6 +102,10 @@ const enUS: Locale = {
     selected: 'Selected',
     searchPlaceholder: ['Key words', 'Key words'],
   },
+  treeSelect: {
+    expandAll: 'Expand all',
+    collapseAll: 'Collapse all',
+  },
   upload: {
     uploading: 'Uploading...',
     error: 'Upload error',

packages/components/locales/src/langs/zh-CN.ts

@@ -102,6 +102,10 @@ const zhCN: Locale = {
     selected: '已选',
     searchPlaceholder: ['搜索关键字', '搜索关键字'],
   },
+  treeSelect: {
+    expandAll: '展开全部',
+    collapseAll: '收起全部',
+  },
   upload: {
     uploading: '正在上传...',
     error: '上传失败',

packages/components/locales/src/types.ts

@@ -109,6 +109,11 @@ export interface TransferLocale {
   searchPlaceholder: [string, string]
 }
 
+export interface TreeSelectLocale {
+  expandAll: string
+  collapseAll: string
+}
+
 export interface UploadLocale {
   uploading: string
   error: string
@@ -133,6 +138,7 @@ export interface Locale {
   timePicker: TimePickerLocale
   timeRangePicker: TimeRangePickerLocale
   transfer: TransferLocale
+  treeSelect: TreeSelectLocale
   upload: UploadLocale
 }
 

packages/components/tree-select/__tests__/treeSelect.spec.ts

@@ -738,5 +738,24 @@ describe('TreeSelect', () => {
 
       expect(wrapper.findAll('.ix-selector-item-label')[1].text()).toBe('1')
     })
+
+    test('expandAll and collapseAll work', async () => {
+      const onUpdateExpandedKeys = vi.fn()
+      const wrapper = TreeSelectMount({
+        props: {
+          open: true,
+          expandedKeys: ['0'],
+          'onUpdate:expandedKeys': onUpdateExpandedKeys,
+        },
+      })
+
+      await wrapper.vm.collapseAll()
+
+      expect(onUpdateExpandedKeys).toBeCalledWith([])
+
+      await wrapper.vm.expandAll()
+
+      expect(onUpdateExpandedKeys).toBeCalledWith(['0'])
+    })
   })
 })

packages/components/tree-select/docs/Index.zh.md

@@ -106,9 +106,10 @@ order: 0
 | 名称 | 说明 | 参数类型 | 备注 |
 | --- | --- | --- | --- |
 | `blur` | 失去焦点 | - | - |
+| `collapseAll` | 收起所有节点 | - | - |
+| `expandAll` | 展开所有节点 | - | - |
 | `focus` | 获取焦点 | - | - |
 | `scrollTo` | 滚动到指定位置 | `(option?: number \| VirtualScrollToOptions) => void` | 仅 `virtual` 模式下可用 |
-| `setExpandAll` | 控制树节点是否全部展开 | `(isAll: boolean) => void` | - |
 
 <!--- insert less variable begin  --->
 ## 主题变量

packages/components/tree-select/src/TreeSelect.tsx

@@ -8,7 +8,7 @@
 import { computed, defineComponent, normalizeClass, provide, ref, watch } from 'vue'
 
 import { type VirtualScrollToFn } from '@idux/cdk/scroll'
-import { type VKey, callEmit, useControlledProp, useState } from '@idux/cdk/utils'
+import { type VKey, useControlledProp, useState } from '@idux/cdk/utils'
 import { ɵOverlay } from '@idux/components/_private/overlay'
 import { ɵSelector, type ɵSelectorInstance } from '@idux/components/_private/selector'
 import { useGlobalConfig } from '@idux/components/config'
@@ -21,7 +21,7 @@ import { useGetNodeKey } from './composables/useGetNodeKey'
 import { useSelectedState } from './composables/useSelectedState'
 import Content from './content/Content'
 import { treeSelectToken } from './token'
-import { type TreeSelectNode, treeSelectProps } from './types'
+import { treeSelectProps } from './types'
 
 const defaultOffset: [number, number] = [0, 8]
 
@@ -31,6 +31,7 @@ export default defineComponent({
   props: treeSelectProps,
   setup(props, { attrs, expose, slots }) {
     const common = useGlobalConfig('common')
+    const locale = useGlobalConfig('locale')
     const mergedPrefixCls = computed(() => `${common.prefixCls}-tree-select`)
     const config = useGlobalConfig('treeSelect')
     const mergedChildrenKey = computed(() => props.childrenKey ?? config.childrenKey)
@@ -64,22 +65,14 @@ export default defineComponent({
     const scrollTo: VirtualScrollToFn = options => {
       treeRef.value?.scrollTo(options)
     }
-    const setExpandAll = (isAll: boolean) => {
-      const _expendedKeys: VKey[] = []
-      const _expendedNodes: TreeSelectNode[] = []
-      if (isAll) {
-        mergedNodeMap.value.forEach(node => {
-          if (!node.isLeaf) {
-            _expendedKeys.push(node.key)
-            _expendedNodes.push(node.rawData)
-          }
-        })
-      }
-      callEmit(props.onExpandedChange, _expendedKeys, _expendedNodes)
-      setExpandedKeys(_expendedKeys)
-    }
 
-    expose({ focus, blur, scrollTo, setExpandAll })
+    expose({
+      focus,
+      blur,
+      collapseAll: () => treeRef.value?.collapseAll(),
+      expandAll: () => treeRef.value?.expandAll(),
+      scrollTo,
+    })
 
     watch(overlayOpened, opened => {
       opened && focus()
@@ -110,6 +103,7 @@ export default defineComponent({
       props,
       slots,
       config,
+      locale,
       mergedPrefixCls,
       mergedChildrenKey,
       mergedGetKey,
@@ -121,7 +115,6 @@ export default defineComponent({
       treeRef,
       accessor,
       setExpandedKeys,
-      setExpandAll,
       overlayOpened,
       setOverlayOpened,
       handleNodeClick,

packages/components/tree-select/src/content/Content.tsx

@@ -28,6 +28,7 @@ export default defineComponent({
       config,
       props,
       slots: treeSelectSlots,
+      locale,
       mergedPrefixCls,
       mergedChildrenKey,
       mergedGetKey,
@@ -38,7 +39,6 @@ export default defineComponent({
       treeRef,
       expandedKeys,
       setExpandedKeys,
-      setExpandAll,
       selectedValue,
       changeSelected,
       handleNodeClick,
@@ -89,7 +89,7 @@ export default defineComponent({
 
     const handleExpandAll = (evt: Event) => {
       const currStatus = expandAllBtnStatus.value
-      setExpandAll(!currStatus)
+      currStatus ? treeRef.value?.expandAll() : treeRef.value?.collapseAll()
       expandAllBtnStatus.value = !currStatus
       evt.stopPropagation()
     }
@@ -224,6 +224,7 @@ export default defineComponent({
           <div class={`${prefixCls}-overlay-search-wrapper`}>
             <IxButton
               size="md"
+              title={expandAllBtnStatus.value ? locale.treeSelect.expandAll : locale.treeSelect.collapseAll}
               icon={expandAllBtnStatus.value ? 'tree-expand' : 'tree-unexpand'}
               onClick={handleExpandAll}
             />

packages/components/tree-select/src/token.ts

@@ -13,13 +13,15 @@ import type { TreeSelectNode, TreeSelectProps } from './types'
 import type { ValueAccessor } from '@idux/cdk/forms'
 import type { VKey } from '@idux/cdk/utils'
 import type { TreeSelectConfig } from '@idux/components/config'
+import type { Locale } from '@idux/components/locales'
 import type { TreeInstance } from '@idux/components/tree'
 import type { ComputedRef, InjectionKey, Ref, Slots } from 'vue'
 
 export interface TreeSelectContext {
   props: TreeSelectProps
   slots: Slots
   config: TreeSelectConfig
+  locale: Locale
   mergedPrefixCls: ComputedRef<string>
   accessor: ValueAccessor
   mergedChildrenKey: ComputedRef<string>
@@ -31,7 +33,6 @@ export interface TreeSelectContext {
   setInputValue: (value: string) => void
   treeRef: Ref<TreeInstance | undefined>
   setExpandedKeys: (keys: VKey[]) => void
-  setExpandAll: (isAll: boolean) => void
   overlayOpened: ComputedRef<boolean>
   setOverlayOpened: (open: boolean) => void
   handleNodeClick: () => void

packages/components/tree-select/src/types.ts

@@ -125,8 +125,9 @@ export type TreeSelectPublicProps = Omit<
 export interface TreeSelectBindings {
   focus: (options?: FocusOptions) => void
   blur: () => void
+  collapseAll: () => void
+  expandAll: () => void
   scrollTo: VirtualScrollToFn
-  setExpandAll: (isAll: boolean) => void
 }
 export type TreeSelectComponent = DefineComponent<
   Omit<HTMLAttributes, keyof TreeSelectPublicProps> & TreeSelectPublicProps,

packages/pro/tree/src/ProTree.tsx

@@ -73,10 +73,10 @@ export default defineComponent({
     }
 
     expose({
-      blur: treeRef.value?.blur,
-      collapseAll: treeRef.value?.collapseAll,
-      expandAll: treeRef.value?.expandAll,
-      focus: treeRef.value?.focus,
+      blur: () => treeRef.value?.blur(),
+      collapseAll: () => treeRef.value?.collapseAll(),
+      expandAll: () => treeRef.value?.expandAll(),
+      focus: () => treeRef.value?.focus(),
     })
 
     return () => {