diff --git a/.changeset/cuddly-ligers-deny.md b/.changeset/cuddly-ligers-deny.md new file mode 100644 index 000000000..148cfd008 --- /dev/null +++ b/.changeset/cuddly-ligers-deny.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/transfer": minor +--- + +feat: 支持配置字段别名 diff --git a/.changeset/many-moose-matter.md b/.changeset/many-moose-matter.md new file mode 100644 index 000000000..de01c02f5 --- /dev/null +++ b/.changeset/many-moose-matter.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat(transfer): 支持配置字段别名 diff --git a/packages/ui/transfer/src/Transfer.tsx b/packages/ui/transfer/src/Transfer.tsx index 66d2187fd..a8723fc59 100644 --- a/packages/ui/transfer/src/Transfer.tsx +++ b/packages/ui/transfer/src/Transfer.tsx @@ -8,7 +8,8 @@ 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' const _prefix = getPrefixCls(_role) @@ -32,6 +33,7 @@ export const Transfer = forwardRef( targetSortType = 'default', pagination = false, data = NOOP_ARRAY, + fieldNames, defaultTargetIds = NOOP_ARRAY, targetIds: targetIdsProp, targetLimit, @@ -56,6 +58,8 @@ export const Transfer = forwardRef( onChange ) + const transformedData = useMemo(() => transformData(data, fieldNames), [data, fieldNames]) + const pageSize = useMemo(() => { if (pagination === true) return 10 if (typeof pagination === 'object' && 'pageSize' in pagination) { @@ -79,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 @@ -112,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, @@ -376,6 +383,10 @@ export interface TransferProps * 穿梭框数据源 */ data: TransferDataItem[] + /** + * 设置data中各项值对应的key + **/ + fieldNames?: HiBaseFieldNames /** * 最大可穿梭上限 */ diff --git a/packages/ui/transfer/src/utils.ts b/packages/ui/transfer/src/utils.ts new file mode 100644 index 000000000..8dc024412 --- /dev/null +++ b/packages/ui/transfer/src/utils.ts @@ -0,0 +1,27 @@ +import { HiBaseFieldNameKeys, HiBaseFieldNames } from '@hi-ui/core' +import { TransferDataItem } from './types' +import React from 'react' + +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') 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[] +}