fix(pro:transfer): fix flat tree transfer render when labelKey provid…

…ed (#958)

fix(pro:tranfer): fix tree expand when getKey provided

BREAKING CHANGE: TransferBindings provide getKey as ComputedRef instead of getRowKey

packages/components/_private/checkable-list/src/CheckableList.tsx

@@ -21,6 +21,7 @@ export default defineComponent({
   setup(props, { slots, expose }) {
     const common = useGlobalConfig('common')
     const mergedPrefixCls = computed(() => `${common.prefixCls}-checkable-list`)
+    const labelKey = computed(() => props.labelKey ?? 'label')
     const virtualScrollRef = ref<VirtualScrollInstance>()
 
     provide(checkableListContext, {
@@ -33,7 +34,7 @@ export default defineComponent({
 
     expose(checkableListApi)
 
-    const getRowKey = (item: CheckableListData) => (props.getRowKey?.(item) ?? item.key)!
+    const getKey = (item: CheckableListData) => (props.getKey?.(item) ?? item.key)!
 
     const handleScroll = (evt: Event) => {
       callEmit(props.onScroll, evt)
@@ -46,7 +47,7 @@ export default defineComponent({
     }
 
     const renderListItem: VirtualItemRenderFn<CheckableListData> = ({ item, index }) => {
-      const key = getRowKey(item)
+      const key = getKey(item)
       const onCheckChange = (checked: boolean) => {
         callEmit(props.onCheckChange, item, checked)
       }
@@ -60,7 +61,7 @@ export default defineComponent({
         <CheckableListItem
           key={key}
           value={key!}
-          label={item.label}
+          label={item[labelKey.value] as string}
           checked={!!props.checked?.(item)}
           disabled={!!props.disabled?.(item)}
           checkable={props.checkable}
@@ -89,7 +90,7 @@ export default defineComponent({
             ref={virtualScrollRef}
             dataSource={data}
             fullHeight={fullHeight}
-            getKey={getRowKey}
+            getKey={getKey}
             height={height as number}
             itemHeight={32}
             itemRender={renderListItem}

packages/components/_private/checkable-list/src/types.ts

@@ -6,11 +6,9 @@
  */
 
 import type { VirtualScrollToFn } from '@idux/cdk/scroll'
-import type { ExtractInnerPropTypes, ExtractPublicPropTypes } from '@idux/cdk/utils'
+import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray, VKey } from '@idux/cdk/utils'
 import type { DefineComponent, HTMLAttributes, PropType } from 'vue'
 
-import { IxPropTypes, type VKey } from '@idux/cdk/utils'
-
 export interface CheckableListData {
   key?: VKey
   label?: string
@@ -24,31 +22,58 @@ export interface CheckableListScroll {
 }
 
 export const checkableListProps = {
-  dataSource: IxPropTypes.array<CheckableListData>(),
-  checkable: IxPropTypes.bool.def(true),
-  removable: IxPropTypes.bool.def(false),
-  checked: IxPropTypes.func<(item: CheckableListData) => boolean>(),
+  dataSource: Array as PropType<CheckableListData[]>,
+  checkable: {
+    type: Boolean,
+    default: true,
+  },
+  removable: {
+    type: Boolean,
+    default: false,
+  },
+  checked: Function as PropType<(item: CheckableListData) => boolean>,
   customAdditional: { type: Object as PropType<CheckableListCustomAdditional>, default: undefined },
-  disabled: IxPropTypes.func<(item: CheckableListData) => boolean>(),
-  getRowKey: IxPropTypes.func<(item: CheckableListData) => VKey>(),
-  virtual: IxPropTypes.bool,
-  scroll: IxPropTypes.object<CheckableListScroll>(),
-  onCheckChange: IxPropTypes.emit<(item: CheckableListData, checked: boolean) => void>(),
-  onRemove: IxPropTypes.emit<(item: CheckableListData) => void>(),
-  onScroll: IxPropTypes.emit<(evt: Event) => void>(),
-  onScrolledChange: IxPropTypes.emit<(startIndex: number, endIndex: number, visibleData: unknown[]) => void>(),
-  onScrolledBottom: IxPropTypes.emit<() => void>(),
+  disabled: Function as PropType<(item: CheckableListData) => boolean>,
+  getKey: Function as PropType<(item: CheckableListData) => VKey>,
+  labelKey: String,
+  virtual: {
+    type: Boolean,
+    default: false,
+  },
+  scroll: Object as PropType<CheckableListScroll>,
+  onCheckChange: [Function, Array] as PropType<MaybeArray<(item: CheckableListData, checked: boolean) => void>>,
+  onRemove: [Function, Array] as PropType<MaybeArray<(item: CheckableListData) => void>>,
+  onScroll: [Function, Array] as PropType<MaybeArray<(evt: Event) => void>>,
+  onScrolledChange: [Function, Array] as PropType<
+    MaybeArray<(startIndex: number, endIndex: number, visibleData: unknown[]) => void>
+  >,
+  onScrolledBottom: [Function, Array] as PropType<MaybeArray<() => void>>,
 }
 
 export const checkableListItemProps = {
-  checked: IxPropTypes.bool.def(false),
-  checkable: IxPropTypes.bool.def(true),
-  removable: IxPropTypes.bool.def(false),
-  disabled: IxPropTypes.bool.def(false),
-  label: IxPropTypes.string,
-  value: IxPropTypes.oneOfType([String, Number, Symbol]).isRequired,
-  onCheckChange: IxPropTypes.emit<(checked: boolean) => void>(),
-  onRemove: IxPropTypes.emit<() => void>(),
+  checked: {
+    type: Boolean,
+    default: false,
+  },
+  checkable: {
+    type: Boolean,
+    default: true,
+  },
+  removable: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  label: String,
+  value: {
+    type: [String, Number, Symbol],
+    required: true,
+  },
+  onCheckChange: [Function, Array] as PropType<MaybeArray<(checked: boolean) => void>>,
+  onRemove: [Function, Array] as PropType<MaybeArray<() => void>>,
 }
 
 export interface CheckableListApi {

packages/components/transfer/src/Transfer.tsx

@@ -70,7 +70,7 @@ export default defineComponent({
       sourceCheckableListRef,
       targetCheckableListRef,
       showSelectAll,
-      getRowKey: transferDataContext.getRowKey,
+      getKey: transferDataContext.getKey,
     })
     provide(TRANSFER_SOURCE_TOKEN, sourceBindings)
     provide(TRANSFER_TARGET_TOKEN, targetBindings)

packages/components/transfer/src/composables/useTransferBindings.ts

@@ -46,7 +46,7 @@ export function useTransferBindings<T extends TransferData = TransferData>(
     setSourceSearchValue,
     targetSearchValue,
     setTargetSearchValue,
-    getRowKey,
+    getKey,
   } = transferDataContext
   const {
     sourceSelectedKeys,
@@ -74,7 +74,7 @@ export function useTransferBindings<T extends TransferData = TransferData>(
     showSelectAll,
     triggerAppend,
     triggerRemove,
-    getRowKey,
+    getKey,
   }
 
   return {

packages/components/transfer/src/composables/useTransferData.ts

@@ -13,8 +13,7 @@ import type { PaginationProps } from '@idux/components/pagination'
 import { type ComputedRef, computed } from 'vue'
 
 import { type VKey, callEmit, useControlledProp, useState } from '@idux/cdk/utils'
-
-import { type GetRowKey, useGetRowKey } from './useGetRowKey'
+import { type GetKeyFn, useGetKey } from '@idux/components/utils'
 
 export interface TransferDataContext<T extends TransferData = TransferData> {
   dataSource: ComputedRef<T[]>
@@ -35,7 +34,7 @@ export interface TransferDataContext<T extends TransferData = TransferData> {
   remove: (keys: VKey[]) => void
   clear: () => void
 
-  getRowKey: GetRowKey
+  getKey: ComputedRef<GetKeyFn>
 
   disabledKeys: ComputedRef<Set<VKey>>
   disabledSourceKeys: ComputedRef<Set<VKey>>
@@ -54,7 +53,7 @@ export function useTransferData<T extends TransferData = TransferData>(
   transferDataStrategies: TransferDataStrategies<T>,
   transferPaginationContext: TransferPaginationContext,
 ): TransferDataContext<T> {
-  const getRowKey = useGetRowKey(props, config)
+  const getKey = useGetKey(props, config, 'transfer')
   const {
     genDataKeys,
     genDataKeyMap,
@@ -66,7 +65,7 @@ export function useTransferData<T extends TransferData = TransferData>(
   } = transferDataStrategies
 
   const dataSource = computed(() => props.dataSource as T[])
-  const dataKeyMap = computed(() => genDataKeyMap(dataSource.value, getRowKey))
+  const dataKeyMap = computed(() => genDataKeyMap(dataSource.value, getKey.value))
 
   const [targetKeys, setTargetKeys] = useControlledProp(props, 'value', () => [])
   const [sourceSearchValue, setSourceSearchValue] = useState('')
@@ -80,13 +79,13 @@ export function useTransferData<T extends TransferData = TransferData>(
   }
 
   const separatedData = computed(() =>
-    separateDataSource(dataSource.value, dataKeyMap.value, targetKeySet.value, getRowKey),
+    separateDataSource(dataSource.value, dataKeyMap.value, targetKeySet.value, getKey.value),
   )
   const sourceData = computed(() => separatedData.value.sourceData)
   const targetData = computed(() => separatedData.value.targetData)
 
-  const sourceDataKeys = computed(() => genDataKeys(sourceData.value, getRowKey))
-  const targetDataKeys = computed(() => genDataKeys(targetData.value, getRowKey))
+  const sourceDataKeys = computed(() => genDataKeys(sourceData.value, getKey.value))
+  const targetDataKeys = computed(() => genDataKeys(targetData.value, getKey.value))
 
   const filteredDataSource = computed(() =>
     dataFilter(
@@ -121,19 +120,19 @@ export function useTransferData<T extends TransferData = TransferData>(
   )
 
   const append = (keys: VKey[]) => {
-    _append(keys, targetKeySet.value, getRowKey, handleChange)
+    _append(keys, targetKeySet.value, getKey.value, handleChange)
   }
   const remove = (keys: VKey[]) => {
-    _remove(keys, targetKeySet.value, getRowKey, handleChange)
+    _remove(keys, targetKeySet.value, getKey.value, handleChange)
   }
 
   const clear = () => {
     handleChange(Array.from(disabledTargetKeys.value))
   }
 
-  const disabledKeys = computed(() => genDisabledKeys(dataSource.value, getRowKey))
+  const disabledKeys = computed(() => genDisabledKeys(dataSource.value, getKey.value))
   const disabledTargetKeys = computed(() => {
-    const keys = genDisabledKeys(targetData.value, getRowKey)
+    const keys = genDisabledKeys(targetData.value, getKey.value)
 
     targetKeySet.value.forEach(key => {
       if (disabledKeys.value.has(key)) {
@@ -142,7 +141,7 @@ export function useTransferData<T extends TransferData = TransferData>(
     })
     return keys
   })
-  const disabledSourceKeys = computed(() => genDisabledKeys(sourceData.value, getRowKey))
+  const disabledSourceKeys = computed(() => genDisabledKeys(sourceData.value, getKey.value))
 
   return {
     dataSource,
@@ -163,7 +162,7 @@ export function useTransferData<T extends TransferData = TransferData>(
     remove,
     clear,
 
-    getRowKey,
+    getKey,
 
     disabledKeys,
     disabledSourceKeys,

packages/components/transfer/src/composables/useTransferDataStrategies.ts

@@ -20,29 +20,29 @@ function createDefaultStrategies<T extends TransferData = TransferData>(): Trans
   })
 
   return {
-    genDataKeys: (data, getRowKey) => {
-      return new Set(data.map(data => getRowKey(data)))
+    genDataKeys: (data, getKey) => {
+      return new Set(data.map(data => getKey(data)))
     },
-    genDataKeyMap: (dataSource, getRowKey) => {
+    genDataKeyMap: (dataSource, getKey) => {
       const dataKeyMap = new Map()
 
       dataSource.forEach(item => {
-        dataKeyMap.set(getRowKey(item), item)
+        dataKeyMap.set(getKey(item), item)
       })
 
       return dataKeyMap
     },
-    genDisabledKeys: (data, getRowKey) => {
+    genDisabledKeys: (data, getKey) => {
       const keys = new Set<VKey>()
       data.forEach(item => {
         if (item.disabled) {
-          keys.add(getRowKey(item))
+          keys.add(getKey(item))
         }
       })
       return keys
     },
-    separateDataSource: (dataSource, dataKeyMap, selectedKeySet, getRowKey) => {
-      const sourceData = dataSource.filter(data => !selectedKeySet.has(getRowKey(data)))
+    separateDataSource: (dataSource, dataKeyMap, selectedKeySet, getKey) => {
+      const sourceData = dataSource.filter(data => !selectedKeySet.has(getKey(data)))
       const targetData: T[] = []
 
       selectedKeySet.forEach(key => {

packages/components/transfer/src/composables/useTransferOperations.ts

@@ -29,26 +29,17 @@ export function useTransferOperations<T extends TransferData = TransferData>(
   transferDataContext: TransferDataContext<T>,
   transferSelectStateContext: TransferSelectStateContext,
 ): TransferOperationsContext {
-  const {
-    dataKeyMap,
-    sourceData,
-    targetData,
-    disabledSourceKeys,
-    disabledTargetKeys,
-    append,
-    remove,
-    clear,
-    getRowKey,
-  } = transferDataContext
+  const { dataKeyMap, sourceData, targetData, disabledSourceKeys, disabledTargetKeys, append, remove, clear, getKey } =
+    transferDataContext
   const { sourceSelectedKeys, targetSelectedKeys } = transferSelectStateContext
 
   const appendDisabled = computed(() => props.disabled || sourceSelectedKeys.value.length <= 0)
   const removeDisabled = computed(() => props.disabled || targetSelectedKeys.value.length <= 0)
   const appendAllDisabled = computed(
-    () => props.disabled || sourceData.value.every(item => disabledSourceKeys.value.has(getRowKey(item))),
+    () => props.disabled || sourceData.value.every(item => disabledSourceKeys.value.has(getKey.value(item))),
   )
   const clearDisabled = computed(
-    () => props.disabled || targetData.value.every(item => disabledTargetKeys.value.has(getRowKey(item))),
+    () => props.disabled || targetData.value.every(item => disabledTargetKeys.value.has(getKey.value(item))),
   )
 
   const triggerAppend = (keys?: VKey[]) => {