feat(pro:transfer): add tree transfer cascadeStrategy support (#1155)

IDuxFE · Sep 27, 2022 · 470bf8d · 470bf8d
1 parent fba1a5d
commit 470bf8d
Show file tree

Hide file tree

Showing 27 changed files with 351 additions and 166 deletions.
diff --git a/packages/components/transfer/src/composables/useTransferData.ts b/packages/components/transfer/src/composables/useTransferData.ts
@@ -30,8 +30,7 @@ export interface TransferDataContext<T extends TransferData = TransferData> {
   paginatedTargetData: ComputedRef<T[]>
   targetKeys: ComputedRef<VKey[]>
   targetKeySet: ComputedRef<Set<VKey>>
-  append: (keys: VKey[]) => void
-  remove: (keys: VKey[]) => void
+  changeTargetKeys: (removedKeys: VKey[], appendedKeys: VKey[]) => void
   clear: () => void
 
   getKey: ComputedRef<GetKeyFn>
@@ -122,11 +121,16 @@ export function useTransferData<T extends TransferData = TransferData>(
     getPaginatedData(filteredTargetData.value, transferPaginationContext.targetPagination.value),
   )
 
-  const append = (keys: VKey[]) => {
-    _append(keys, targetKeySet.value, getKey.value, handleChange)
-  }
-  const remove = (keys: VKey[]) => {
-    _remove(keys, targetKeySet.value, getKey.value, handleChange)
+  const changeTargetKeys = (removedKeys: VKey[], appendedKeys: VKey[]) => {
+    let newKeys = targetKeys.value
+    if (removedKeys.length > 0) {
+      newKeys = _remove(removedKeys, newKeys, getKey.value)
+    }
+    if (appendedKeys.length > 0) {
+      newKeys = _append(appendedKeys, newKeys, getKey.value)
+    }
+
+    handleChange(newKeys)
   }
 
   const clear = () => {
@@ -161,8 +165,7 @@ export function useTransferData<T extends TransferData = TransferData>(
     paginatedTargetData,
     targetKeys,
     targetKeySet,
-    append,
-    remove,
+    changeTargetKeys,
     clear,
 
     getKey,

diff --git a/packages/components/transfer/src/composables/useTransferDataStrategies.ts b/packages/components/transfer/src/composables/useTransferDataStrategies.ts
@@ -74,27 +74,23 @@ function createDefaultStrategies<T extends TransferData = TransferData>(
 
       return data.filter(item => searchFn(item, searchValue))
     },
-    append: (keys, selectedKeySet, _, handleChange) => {
+    append: (keys, selectedKeySet) => {
       const newKeys = new Set(selectedKeySet)
 
       keys.forEach(key => {
         newKeys.add(key)
       })
 
-      if (newKeys.size !== selectedKeySet.size) {
-        handleChange(Array.from(newKeys))
-      }
+      return Array.from(newKeys)
     },
-    remove: (keys, selectedKeySet, _, handleChange) => {
+    remove: (keys, selectedKeySet) => {
       const newKeys = new Set(selectedKeySet)
 
       keys.forEach(key => {
         newKeys.delete(key)
       })
 
-      if (newKeys.size !== selectedKeySet.size) {
-        handleChange(Array.from(newKeys))
-      }
+      return Array.from(newKeys)
     },
   }
 }

diff --git a/packages/components/transfer/src/composables/useTransferOperations.ts b/packages/components/transfer/src/composables/useTransferOperations.ts
@@ -29,8 +29,16 @@ export function useTransferOperations<T extends TransferData = TransferData>(
   transferDataContext: TransferDataContext<T>,
   transferSelectStateContext: TransferSelectStateContext,
 ): TransferOperationsContext {
-  const { dataKeyMap, sourceData, targetData, disabledSourceKeys, disabledTargetKeys, append, remove, clear, getKey } =
-    transferDataContext
+  const {
+    dataKeyMap,
+    sourceData,
+    targetData,
+    disabledSourceKeys,
+    disabledTargetKeys,
+    changeTargetKeys,
+    clear,
+    getKey,
+  } = transferDataContext
   const { sourceSelectedKeys, targetSelectedKeys } = transferSelectStateContext
 
   const appendDisabled = computed(() => props.disabled || sourceSelectedKeys.value.length <= 0)
@@ -47,23 +55,32 @@ export function useTransferOperations<T extends TransferData = TransferData>(
       return
     }
 
-    append((keys ?? Array.from(sourceSelectedKeys.value)).filter(key => !disabledSourceKeys.value.has(key)))
+    changeTargetKeys(
+      [],
+      (keys ?? Array.from(sourceSelectedKeys.value)).filter(key => !disabledSourceKeys.value.has(key)),
+    )
   }
 
   const triggerRemove = (keys?: VKey[]) => {
     if ((!keys && removeDisabled.value) || (keys && props.disabled)) {
       return
     }
 
-    remove((keys ?? Array.from(targetSelectedKeys.value)).filter(key => !disabledTargetKeys.value.has(key)))
+    changeTargetKeys(
+      (keys ?? Array.from(targetSelectedKeys.value)).filter(key => !disabledTargetKeys.value.has(key)),
+      [],
+    )
   }
 
   const triggerAppendAll = () => {
     if (appendAllDisabled.value) {
       return
     }
 
-    append(Array.from(dataKeyMap.value.keys()).filter(key => !disabledSourceKeys.value.has(key)))
+    changeTargetKeys(
+      [],
+      Array.from(dataKeyMap.value.keys()).filter(key => !disabledSourceKeys.value.has(key)),
+    )
   }
 
   const triggerClear = () => {

diff --git a/packages/components/transfer/src/composables/useTransferSelectState.ts b/packages/components/transfer/src/composables/useTransferSelectState.ts
@@ -44,8 +44,15 @@ export function useTransferSelectState(
   const sourceSelectedKeySet = computed(() => new Set(sourceSelectedKeys.value))
   const targetSelectedKeySet = computed(() => new Set(targetSelectedKeys.value))
 
-  const { dataKeyMap, sourceDataKeys, targetDataKeys, disabledKeys, disabledSourceKeys, disabledTargetKeys } =
-    transferDataContext
+  const {
+    dataKeyMap,
+    sourceDataKeys,
+    targetDataKeys,
+    targetKeySet,
+    disabledKeys,
+    disabledSourceKeys,
+    disabledTargetKeys,
+  } = transferDataContext
 
   const sourceDataCount = computed(() =>
     props.mode === 'immediate' ? dataKeyMap.value.size : sourceDataKeys.value.size,
@@ -72,7 +79,7 @@ export function useTransferSelectState(
   })
 
   watch(
-    [sourceCheckableDataCount, dataKeyMap, disabledKeys, targetDataKeys],
+    [sourceCheckableDataCount, dataKeyMap, disabledKeys, targetKeySet],
     (_, [, , , prevSelectedKeys]) => {
       const tempKeys = new Set(sourceSelectedKeys.value)
 
@@ -82,19 +89,19 @@ export function useTransferSelectState(
           return
         }
 
-        if (props.mode === 'default' && targetDataKeys.value.has(key)) {
+        if (props.mode === 'default' && targetKeySet.value.has(key)) {
           tempKeys.delete(key)
         }
       })
 
       if (props.mode === 'immediate') {
-        targetDataKeys.value.forEach(key => {
+        targetKeySet.value.forEach(key => {
           if (dataKeyMap.value.has(key)) {
             tempKeys.add(key)
           }
         })
         prevSelectedKeys?.forEach(key => {
-          if (!targetDataKeys.value.has(key)) {
+          if (!targetKeySet.value.has(key)) {
             tempKeys.delete(key)
           }
         })
@@ -208,7 +215,7 @@ function transferBySelectionChange(
   currentCheckedKeys: Set<VKey>,
   transferDataContext: TransferDataContext,
 ) {
-  const { append, remove } = transferDataContext
+  const { changeTargetKeys } = transferDataContext
   const appendedKeys: VKey[] = []
   const removedKeys: VKey[] = []
 
@@ -224,11 +231,5 @@ function transferBySelectionChange(
     }
   }
 
-  if (appendedKeys.length > 0) {
-    append(appendedKeys)
-  }
-
-  if (removedKeys.length > 0) {
-    remove(removedKeys)
-  }
+  changeTargetKeys(removedKeys, appendedKeys)
 }
diff --git a/packages/components/transfer/src/types.ts b/packages/components/transfer/src/types.ts
@@ -31,8 +31,8 @@ export interface TransferDataStrategiesConfig<T extends TransferData = TransferD
     getKey: GetKeyFn,
   ) => SeparatedData<T>
   dataFilter?: (data: T[], searchValue: string, searchFn: (item: T, searchValue: string) => boolean) => T[]
-  append?: (keys: K[], selectedKeySet: Set<K>, getKey: GetKeyFn, handleChange: (keys: K[]) => void) => void
-  remove?: (keys: K[], selectedKeySet: Set<K>, getKey: GetKeyFn, handleChange: (keys: K[]) => void) => void
+  append?: (keys: K[], selectedKeys: K[], getKey: GetKeyFn) => K[]
+  remove?: (keys: K[], selectedKeys: K[], getKey: GetKeyFn) => K[]
 }
 export type TransferDataStrategies<T extends TransferData = TransferData> = Required<TransferDataStrategiesConfig<T>>
 
@@ -59,10 +59,10 @@ export interface TransferBindings<T extends TransferData = TransferData> {
 
   pagination: ComputedRef<PaginationProps | undefined>
 
-  triggerAppend: <K = VKey>(keys: K[]) => void
-  triggerRemove: <K = VKey>(keys: K[]) => void
+  triggerAppend: (keys: VKey[]) => void
+  triggerRemove: (keys: VKey[]) => void
   getKey: ComputedRef<GetKeyFn>
-  handleSelectChange: <K = Set<VKey> | VKey[]>(keys: K) => void
+  handleSelectChange: (keys: Set<VKey> | VKey[]) => void
   selectAll: (selected?: boolean) => void
 
   searchValue: ComputedRef<string>

diff --git a/packages/pro/transfer/demo/BasicTree.md b/packages/pro/transfer/demo/BasicTree.md
@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 10
 title:
   zh: 基本树穿梭框
   en: Basic tree transfer

diff --git a/packages/pro/transfer/demo/FlattenTree.md b/packages/pro/transfer/demo/FlattenTree.md
@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 60
 title:
   zh: 平展已选树
   en: Flatten target tree

diff --git a/packages/pro/transfer/demo/TableCustomLabel.md b/packages/pro/transfer/demo/TableCustomLabel.md
@@ -2,7 +2,7 @@
 title:
   zh: 表格穿梭框自定义表格列渲染
   en: Customize Table Transfer Column Render
-order: 11
+order: 110
 ---
 
 ## zh

diff --git a/packages/pro/transfer/demo/TableOneWay.md b/packages/pro/transfer/demo/TableOneWay.md
@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 40
 title:
   zh: 单向表格穿梭框
   en: One-wayed tree transfer

diff --git a/packages/pro/transfer/demo/TablePagination.md b/packages/pro/transfer/demo/TablePagination.md
@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 20
 title:
   zh: 表格穿梭框分页
   en: Table transfer pagination

diff --git a/packages/pro/transfer/demo/TableRemote.md b/packages/pro/transfer/demo/TableRemote.md
@@ -1,5 +1,5 @@
 ---
-order: 9
+order: 90
 title:
   zh: 表格穿梭框远程数据加载
   en: Table transfer remote data

diff --git a/packages/pro/transfer/demo/TableVirtual.md b/packages/pro/transfer/demo/TableVirtual.md
@@ -1,5 +1,5 @@
 ---
-order: 7
+order: 70
 title:
   zh: 表格穿梭框虚拟滚动
   en: Table transfer virtual scroll

diff --git a/packages/pro/transfer/demo/TreeCustomLabel.md b/packages/pro/transfer/demo/TreeCustomLabel.md
@@ -1,5 +1,5 @@
 ---
-order: 12
+order: 120
 title:
   zh: 树穿梭框自定义标签渲染
   en: Customize Tree Transfer Label Render

diff --git a/packages/pro/transfer/demo/TreeLoadChildren.md b/packages/pro/transfer/demo/TreeLoadChildren.md
@@ -1,5 +1,5 @@
 ---
-order: 11
+order: 110
 title:
   zh: 树节点异步加载
   en: Tree Load Children

diff --git a/packages/pro/transfer/demo/TreeOneWay.md b/packages/pro/transfer/demo/TreeOneWay.md
@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 50
 title:
   zh: 单向树穿梭框
   en: One-wayed tree transfer

diff --git a/packages/pro/transfer/demo/TreePagination.md b/packages/pro/transfer/demo/TreePagination.md
@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 30
 title:
   zh: 树穿梭框分页
   en: Tree transfer pagination

diff --git a/packages/pro/transfer/demo/TreeRemote.md b/packages/pro/transfer/demo/TreeRemote.md
@@ -1,5 +1,5 @@
 ---
-order: 10
+order: 100
 title:
   zh: 树穿梭框远程数据加载
   en: Tree transfer remote data

diff --git a/packages/pro/transfer/demo/TreeVirtual.md b/packages/pro/transfer/demo/TreeVirtual.md
@@ -1,5 +1,5 @@
 ---
-order: 8
+order: 80
 title:
   zh: 树穿梭框虚拟滚动
   en: Tree transfer virtual scroll

diff --git a/packages/pro/transfer/docs/Api.zh.md b/packages/pro/transfer/docs/Api.zh.md
@@ -77,7 +77,9 @@ export type ProTransferTreeProps = Pick<
   | 'loadChildren'
   | 'onExpand'
   | 'onExpandedChange'
->
+> & {
+  cascaderStrategy: TreeProps['checkStrategy']
+}
 ```
 
 #### ProTransferSlots

diff --git a/packages/pro/transfer/src/ProTransfer.tsx b/packages/pro/transfer/src/ProTransfer.tsx
@@ -7,6 +7,7 @@
 
 import type { TableInstance } from '@idux/components/table'
 import type { TreeInstance } from '@idux/components/tree'
+import type { GetKeyFn } from '@idux/components/utils'
 
 import { type ComputedRef, computed, defineComponent, provide, ref } from 'vue'
 
@@ -56,7 +57,7 @@ export default defineComponent({
     const sourceContentRef = ref<TransferListInstance | TableInstance | TreeInstance>()
     const targetContentRef = ref<TransferListInstance | TableInstance | TreeInstance>()
 
-    const { dataKeyMap, parentKeyMap, expandedKeysContext } = useTreeContext(props, childrenKey, targetKeys)
+    const { dataKeyMap, parentKeyMap, expandedKeysContext } = useTreeContext(props, childrenKey, getKey, targetKeys)
     const { dataSource, loadSourceChildren, loadTargetChildren } = useTransferData(
       props,
       getKey,
@@ -172,6 +173,7 @@ export default defineComponent({
 function useTreeContext(
   props: ProTransferProps,
   childrenKey: ComputedRef<string>,
+  getKey: ComputedRef<GetKeyFn>,
   targetKeys: ComputedRef<VKey[] | undefined>,
 ): {
   dataKeyMap?: Map<VKey, TreeTransferData<VKey>>
@@ -185,8 +187,9 @@ function useTreeContext(
   const { dataKeyMap, parentKeyMap, dataStrategies } = useTreeDataStrategies(
     childrenKey,
     props.defaultTargetData as TreeTransferData<VKey>[] | undefined,
+    props.treeProps?.cascaderStrategy,
   )
-  const expandedKeysContext = useTreeExpandedKeys(props, targetKeys, parentKeyMap)
+  const expandedKeysContext = useTreeExpandedKeys(props, childrenKey, getKey, targetKeys, parentKeyMap, dataKeyMap)
 
   provide(TRANSFER_DATA_STRATEGIES, dataStrategies as unknown as TransferDataStrategiesConfig<TransferData>)
 

diff --git a/packages/pro/transfer/src/composables/useTransferData.ts b/packages/pro/transfer/src/composables/useTransferData.ts
@@ -89,7 +89,7 @@ export function useTransferData<C extends VKey>(
     }
 
     return async (node: TreeNode<VKey>, isSource: boolean) => {
-      const loadedData = await _loadChildren(node as TreeTransferData)
+      const loadedData = (await _loadChildren(node as TreeTransferData<C>)) as TreeTransferData<C>[]
       const key = getKey.value(node)
 
       if (!loadedData || loadedData.length <= 0) {