From e42af63bd2e3b07c50d49462481463100877dd36 Mon Sep 17 00:00:00 2001 From: sallerli1 Date: Tue, 2 Aug 2022 16:03:10 +0800 Subject: [PATCH] fix(comp:transfer): removing items absent from datasource works now feat(comp:transfer): add defaultTargetData prop --- packages/components/transfer/docs/Index.zh.md | 1 + packages/components/transfer/src/Transfer.tsx | 2 +- .../transfer/src/composables/useTransferData.ts | 4 +++- .../src/composables/useTransferDataStrategies.ts | 13 +++++++++---- packages/components/transfer/src/types.ts | 1 + packages/pro/transfer/docs/Index.zh.md | 2 +- packages/pro/transfer/src/ProTransfer.tsx | 1 + 7 files changed, 17 insertions(+), 7 deletions(-) diff --git a/packages/components/transfer/docs/Index.zh.md b/packages/components/transfer/docs/Index.zh.md index 239340a3e..66e67d22c 100644 --- 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 index 1de0ced56..53fbbff28 100644 --- 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 index d19460157..8905b4572 100644 --- a/packages/components/transfer/src/composables/useTransferData.ts +++ b/packages/components/transfer/src/composables/useTransferData.ts @@ -53,7 +53,9 @@ export function useTransferData( transferDataStrategies: TransferDataStrategies, transferPaginationContext: TransferPaginationContext, ): TransferDataContext { - 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 index c7bf7373a..f3b3d126f 100644 --- 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(): TransferDataStrategies { +function createDefaultStrategies( + defaultTargetData: T[] | undefined, +): TransferDataStrategies { const cachedDataKeyMap: Map = new Map() onUnmounted(() => { cachedDataKeyMap.clear() @@ -46,7 +48,8 @@ function createDefaultStrategies(): 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(): Trans } } -export function useTransferDataStrategies(): TransferDataStrategies { +export function useTransferDataStrategies( + defaultTargetData: T[] | undefined, +): TransferDataStrategies { const strategies = inject | null>(TRANSFER_DATA_STRATEGIES, null) - const defaultStrategies = createDefaultStrategies() + const defaultStrategies = createDefaultStrategies(defaultTargetData) return strategies ? { ...(defaultStrategies as TransferDataStrategies), ...strategies } diff --git a/packages/components/transfer/src/types.ts b/packages/components/transfer/src/types.ts index 858fbfcbe..4f06827bf 100644 --- 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, default: (): TransferData[] => [], }, + defaultTargetData: Array as PropType, disabled: { type: Boolean, default: false, diff --git a/packages/pro/transfer/docs/Index.zh.md b/packages/pro/transfer/docs/Index.zh.md index 0bdd5880f..ed3e3f754 100644 --- 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 index f8a198705..fbbfa1831 100644 --- 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,