fix(comp:transfer): removing items absent from datasource works now (#…

…1054) feat(comp:transfer): add defaultTargetData prop
IDuxFE · Aug 5, 2022 · 1abf7e9 · 1abf7e9
1 parent 5aa4be4
commit 1abf7e9
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 7 deletions.
diff --git a/packages/components/transfer/docs/Index.zh.md b/packages/components/transfer/docs/Index.zh.md
@@ -21,6 +21,7 @@ subtitle: 穿梭框
 | `clearIcon` | 清除图标 | `string \| #clearIcon` | `clear` | ✅ | - |
 | `customAdditional` | 自定义选项的额外属性 | `TransferCustomAdditional` | - | - | 例如 `class`, 或者原生事件 |
 | `dataSource` | 源数据数组 | `TransferData[]` | `[]` | - | - |
+| `defaultTargetData` | 初始默认目标列表数据 | `TransferData` | - | - | 仅用于设置初始数据，不可响应式变更 |
 | `disabled` | 是否禁用穿梭框 | `boolean` | `false` | - | - |
 | `empty` | 空状态的配置 | `string \| EmptyProps` | - | - | - |
 | `getKey` | 数据项 `key` 的取值 | `string \| (item: unknown) => string \| number` | - | - | 默认取数据的 `key` 属性 |

diff --git a/packages/components/transfer/src/Transfer.tsx b/packages/components/transfer/src/Transfer.tsx
@@ -34,7 +34,7 @@ export default defineComponent({
 
     const showSelectAll = computed(() => props.showSelectAll ?? config.showSelectAll)
     const { source: sourceSearchable, target: targetSearchable } = useSearchable(props, config)
-    const transferDataStrategies = useTransferDataStrategies()
+    const transferDataStrategies = useTransferDataStrategies(props.defaultTargetData)
     const transferPaginationContext = usePagination(props)
     const transferDataContext = useTransferData(props, config, transferDataStrategies, transferPaginationContext)
     const transferSelectStateContext = useTransferSelectState(props, transferDataContext)

diff --git a/packages/components/transfer/src/composables/useTransferData.ts b/packages/components/transfer/src/composables/useTransferData.ts
@@ -53,7 +53,9 @@ export function useTransferData<T extends TransferData = TransferData>(
   transferDataStrategies: TransferDataStrategies<T>,
   transferPaginationContext: TransferPaginationContext,
 ): TransferDataContext<T> {
-  const getKey = useGetKey(props, config, 'transfer')
+  const _getKey = useGetKey(props, config, 'transfer')
+  const getKey = computed(() => (data: T) => _getKey.value(data) ?? data.key)
+
   const {
     genDataKeys,
     genDataKeyMap,

diff --git a/packages/components/transfer/src/composables/useTransferDataStrategies.ts b/packages/components/transfer/src/composables/useTransferDataStrategies.ts
@@ -13,7 +13,9 @@ import { VKey } from '@idux/cdk/utils'
 
 import { TRANSFER_DATA_STRATEGIES } from '../token'
 
-function createDefaultStrategies<T extends TransferData = TransferData>(): TransferDataStrategies<T> {
+function createDefaultStrategies<T extends TransferData = TransferData>(
+  defaultTargetData: T[] | undefined,
+): TransferDataStrategies<T> {
   const cachedDataKeyMap: Map<VKey, T> = new Map()
   onUnmounted(() => {
     cachedDataKeyMap.clear()
@@ -46,7 +48,8 @@ function createDefaultStrategies<T extends TransferData = TransferData>(): Trans
       const targetData: T[] = []
 
       selectedKeySet.forEach(key => {
-        const data = dataKeyMap.get(key) ?? cachedDataKeyMap.get(key)
+        const data =
+          dataKeyMap.get(key) ?? cachedDataKeyMap.get(key) ?? defaultTargetData?.find(data => getKey(data) === key)
         if (data && !cachedDataKeyMap.has(key)) {
           cachedDataKeyMap.set(key, data)
         }
@@ -96,9 +99,11 @@ function createDefaultStrategies<T extends TransferData = TransferData>(): Trans
   }
 }
 
-export function useTransferDataStrategies<T extends TransferData = TransferData>(): TransferDataStrategies<T> {
+export function useTransferDataStrategies<T extends TransferData = TransferData>(
+  defaultTargetData: T[] | undefined,
+): TransferDataStrategies<T> {
   const strategies = inject<TransferDataStrategies<T> | null>(TRANSFER_DATA_STRATEGIES, null)
-  const defaultStrategies = createDefaultStrategies<T>()
+  const defaultStrategies = createDefaultStrategies<T>(defaultTargetData)
 
   return strategies
     ? { ...(defaultStrategies as TransferDataStrategies<T>), ...strategies }

diff --git a/packages/components/transfer/src/types.ts b/packages/components/transfer/src/types.ts
@@ -122,6 +122,7 @@ export const transferProps = {
     type: Array as PropType<TransferData[]>,
     default: (): TransferData[] => [],
   },
+  defaultTargetData: Array as PropType<TransferData[]>,
   disabled: {
     type: Boolean,
     default: false,

diff --git a/packages/pro/transfer/docs/Index.zh.md b/packages/pro/transfer/docs/Index.zh.md
@@ -23,7 +23,7 @@ subtitle: 高级穿梭框
 | `clearIcon` | 清除图标 | `string \| #clearIcon` | `clear` | ✅ | - |
 | `dataSource` | 源数据数组 | `TransferData[]` | `[]` | - | - |
 | `disabled` | 是否禁用穿梭框 | `boolean` | `false` | - | - |
-| `defaultTargetData` | 初始默认目标列表数据 | `TransferData` | - | - | 用于展示正确的初始已选列表数据，仅在 `type` 为 `'tree'` 下生效 |
+| `defaultTargetData` | 初始默认目标列表数据 | `TransferData` | - | - | 仅用于设置初始数据，不可响应式变更 |
 | `empty` | 空状态的配置 | `string \| EmptyProps` | - | - | - |
 | `flatTargetData` | 是否平展开已选树数据 | `boolean` | `false` | - | 平展开后仅将树的叶子节点数据以列表展示，仅在 `type` 为 `'tree'` 下生效 |
 | `getKey` | 数据项 `key` 的取值 | `string \| (item: unknown) => string \| number` | - | - | 默认取数据的 `key` 属性 |

diff --git a/packages/pro/transfer/src/ProTransfer.tsx b/packages/pro/transfer/src/ProTransfer.tsx
@@ -131,6 +131,7 @@ export default defineComponent({
     return () => {
       const transferProps = {
         dataSource: dataSource.value,
+        defaultTargetData: props.defaultTargetData,
         value: targetKeys.value,
         sourceSelectedKeys: props.sourceSelectedKeys,
         targetSelectedKeys: props.targetSelectedKeys,