diff --git a/packages/ui/transfer/src/Transfer.tsx b/packages/ui/transfer/src/Transfer.tsx index ba35f6d8b..a8723fc59 100644 --- a/packages/ui/transfer/src/Transfer.tsx +++ b/packages/ui/transfer/src/Transfer.tsx @@ -8,7 +8,7 @@ import { TransferDataItem } from './types' import { TransferProvider } from './context' import { useCheck } from '@hi-ui/use-check' import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state' -import { HiBaseHTMLProps, useLocaleContext } from '@hi-ui/core' +import { HiBaseFieldNames, HiBaseHTMLProps, useLocaleContext } from '@hi-ui/core' import { transformData } from './utils' const _role = 'transfer' @@ -58,10 +58,7 @@ export const Transfer = forwardRef( onChange ) - data = useMemo(() => { - if(data) return transformData(data, fieldNames) - else return data - }, [data,fieldNames]) + const transformedData = useMemo(() => transformData(data, fieldNames), [data, fieldNames]) const pageSize = useMemo(() => { if (pagination === true) return 10 @@ -86,7 +83,10 @@ export const Transfer = forwardRef( allowCheck, }) - const [sourceList, targetList] = useMemo(() => splitData(data, targetIds), [data, targetIds]) + const [sourceList, targetList] = useMemo(() => splitData(transformedData, targetIds), [ + transformedData, + targetIds, + ]) const isOverflowed = useMemo(() => { if (targetLimit === undefined) return false @@ -119,11 +119,11 @@ export const Transfer = forwardRef( setTargetCheckedIds([]) } - const moveData = data.filter((item) => checkedIds.indexOf(item.id) !== -1) + const moveData = transformedData.filter((item) => checkedIds.indexOf(item.id) !== -1) tryChangeTargetIds(nextTargetIds, direction, moveData) }, [ - data, + transformedData, tryChangeTargetIds, setSourceCheckedIds, setTargetCheckedIds, @@ -386,7 +386,7 @@ export interface TransferProps /** * 设置data中各项值对应的key **/ - fieldNames?: Record + fieldNames?: HiBaseFieldNames /** * 最大可穿梭上限 */ diff --git a/packages/ui/transfer/src/utils.ts b/packages/ui/transfer/src/utils.ts index 6f32edefc..8dc024412 100644 --- a/packages/ui/transfer/src/utils.ts +++ b/packages/ui/transfer/src/utils.ts @@ -1,26 +1,27 @@ -import { TransferDataItem } from "./types"; +import { HiBaseFieldNameKeys, HiBaseFieldNames } from '@hi-ui/core' +import { TransferDataItem } from './types' +import React from 'react' - -export const transformData = (data: TransferDataItem[], - fieldNames: Record | undefined - ): TransferDataItem[] => { - const getKeyFields = (node: any, key: any) => { - if(fieldNames ){ - return node[(fieldNames as any)[key] || key] - } - return node[key] +export const transformData = ( + data: TransferDataItem[], + fieldNames?: HiBaseFieldNames +): TransferDataItem[] => { + const getKeyFields = (node: TransferDataItem, key: HiBaseFieldNameKeys) => { + if (fieldNames) { + return node[(fieldNames[key] || key) as keyof TransferDataItem] } + return node[key as keyof TransferDataItem] + } - const traverseNode = (node: TransferDataItem): TransferDataItem => { - const newNode = { ...node } - - newNode.id = getKeyFields(newNode, 'id') - newNode.title = getKeyFields(newNode, 'title') - newNode.disabled = getKeyFields(newNode, 'disabled')?? false - - return newNode - } + const traverseNode = (node: TransferDataItem): TransferDataItem => { + const newNode = { ...node } - return data.map(traverseNode) as TransferDataItem[] + newNode.id = getKeyFields(newNode, 'id') as React.ReactText + newNode.title = getKeyFields(newNode, 'title') as React.ReactNode + newNode.disabled = (getKeyFields(newNode, 'disabled') ?? false) as boolean + return newNode } + + return data.map(traverseNode) as TransferDataItem[] +}