From 1a8154a34e57599d64c2d79b3bfb008d2e9b80b0 Mon Sep 17 00:00:00 2001 From: xiamiao Date: Fri, 21 Jun 2024 17:39:39 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(transfer):=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=AD=97=E6=AE=B5=E5=88=AB=E5=90=8D(#2909)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/transfer/src/Transfer.tsx | 11 +++++++++++ packages/ui/transfer/src/utils.ts | 26 ++++++++++++++++++++++++++ 2 files changed, 37 insertions(+) create mode 100644 packages/ui/transfer/src/utils.ts diff --git a/packages/ui/transfer/src/Transfer.tsx b/packages/ui/transfer/src/Transfer.tsx index 66d2187fd..ba35f6d8b 100644 --- a/packages/ui/transfer/src/Transfer.tsx +++ b/packages/ui/transfer/src/Transfer.tsx @@ -9,6 +9,7 @@ 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 { 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,11 @@ export const Transfer = forwardRef( onChange ) + data = useMemo(() => { + if(data) return transformData(data, fieldNames) + else return data + }, [data,fieldNames]) + const pageSize = useMemo(() => { if (pagination === true) return 10 if (typeof pagination === 'object' && 'pageSize' in pagination) { @@ -376,6 +383,10 @@ export interface TransferProps * 穿梭框数据源 */ data: TransferDataItem[] + /** + * 设置data中各项值对应的key + **/ + fieldNames?: Record /** * 最大可穿梭上限 */ diff --git a/packages/ui/transfer/src/utils.ts b/packages/ui/transfer/src/utils.ts new file mode 100644 index 000000000..6f32edefc --- /dev/null +++ b/packages/ui/transfer/src/utils.ts @@ -0,0 +1,26 @@ +import { TransferDataItem } from "./types"; + + +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] + } + + 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 + } + + return data.map(traverseNode) as TransferDataItem[] + + } From d602fe241c9cffc79c700abe7a3437a1bcb7ab3b Mon Sep 17 00:00:00 2001 From: xiamiao Date: Fri, 21 Jun 2024 17:42:11 +0800 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=E7=94=9F=E6=88=90=E5=8F=98?= =?UTF-8?q?=E6=9B=B4=E8=AE=B0=E5=BD=95=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/cuddly-ligers-deny.md | 5 +++++ .changeset/many-moose-matter.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/cuddly-ligers-deny.md create mode 100644 .changeset/many-moose-matter.md 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): 支持配置字段别名 From 5723d964e8177eb1712264d4c254913a4193ddb7 Mon Sep 17 00:00:00 2001 From: xiamiao Date: Wed, 26 Jun 2024 16:48:44 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat(transfer):=20=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/transfer/src/Transfer.tsx | 18 ++++++------ packages/ui/transfer/src/utils.ts | 41 ++++++++++++++------------- 2 files changed, 30 insertions(+), 29 deletions(-) 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[] +}