diff --git a/.changeset/nasty-oranges-brush.md b/.changeset/nasty-oranges-brush.md new file mode 100644 index 000000000..714ae174a --- /dev/null +++ b/.changeset/nasty-oranges-brush.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat(descriptions): 新增支持配置字段别名 diff --git a/.changeset/tiny-bananas-wonder.md b/.changeset/tiny-bananas-wonder.md new file mode 100644 index 000000000..c5e978196 --- /dev/null +++ b/.changeset/tiny-bananas-wonder.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/descriptions": minor +--- + +feat: 新增支持配置字段别名 diff --git a/packages/ui/descriptions/src/Descriptions.tsx b/packages/ui/descriptions/src/Descriptions.tsx index 9220da768..3abb70c99 100644 --- a/packages/ui/descriptions/src/Descriptions.tsx +++ b/packages/ui/descriptions/src/Descriptions.tsx @@ -1,8 +1,8 @@ -import React, { forwardRef } from 'react' +import React, { forwardRef, useMemo } from 'react' import { cx, getPrefixCls } from '@hi-ui/classname' import { invariant, __DEV__ } from '@hi-ui/env' -import { HiBaseHTMLProps } from '@hi-ui/core' -import { cloneElement, toArray } from './util' +import { HiBaseFieldNames, HiBaseHTMLProps } from '@hi-ui/core' +import { cloneElement, toArray, transformData } from './util' import { Row } from './Row' import { DescriptionsAppearanceEnum, @@ -13,6 +13,8 @@ import { DescriptionsItem, DescriptionsItemProps } from './DescriptionsItem' const DESCRIPTIONS_PREFIX = getPrefixCls('descriptions') +const DEFAULT_DATA = [] as [] + /** * 描述列表组件 */ @@ -23,7 +25,8 @@ export const Descriptions = forwardRef role = 'descriptions', className, children, - data, + data = DEFAULT_DATA, + fieldNames, column = 3, placement = 'horizontal', appearance = 'unset', @@ -39,8 +42,11 @@ export const Descriptions = forwardRef const vertical = placement === 'vertical' const bordered = appearance === 'table' || noBackground + const transformedData = useMemo(() => transformData(data, fieldNames), [data, fieldNames]) // 如果配置了data,则使用配置模式渲染,否则取 children - const computeChildren = data ? computeItems(data) : React.Children.toArray(children) + const computeChildren = transformedData + ? computeItems(transformedData) + : React.Children.toArray(children) const rows = computeRows(computeChildren, column) const cls = cx( @@ -94,6 +100,10 @@ export interface DescriptionsProps extends HiBaseHTMLProps<'div'> { * 提供JS配置化的方式渲染单元模块 */ data?: DescriptionsItemProps[] + /** + * 设置 data 中label, value, labelWidth, labelPlacement 对应的 key + */ + fieldNames?: HiBaseFieldNames /** * label对齐方式 */ diff --git a/packages/ui/descriptions/src/util.ts b/packages/ui/descriptions/src/util.ts index 7e5acdb91..4d480cd46 100644 --- a/packages/ui/descriptions/src/util.ts +++ b/packages/ui/descriptions/src/util.ts @@ -1,4 +1,6 @@ import * as React from 'react' +import { DescriptionsItemProps } from './DescriptionsItem' +import { HiBaseFieldNameKeys, HiBaseFieldNames } from '@hi-ui/core' type AnyObject = Record @@ -17,3 +19,28 @@ export function toArray(children: React.ReactNode) { }) return res } + +export const transformData = (data: DescriptionsItemProps[], fieldNames?: HiBaseFieldNames) => { + /** + * 转换对象 + */ + const getKeyFields = (node: DescriptionsItemProps, key: HiBaseFieldNameKeys) => { + if (fieldNames) { + return node[(fieldNames[key] || key) as keyof DescriptionsItemProps] + } + return node[key as keyof DescriptionsItemProps] + } + + const traverseNode = (node: DescriptionsItemProps): DescriptionsItemProps => { + const newNode: DescriptionsItemProps = { ...node } + + newNode.label = getKeyFields(newNode, 'label' as HiBaseFieldNameKeys) + newNode.value = getKeyFields(newNode, 'value' as HiBaseFieldNameKeys) + newNode.labelWidth = getKeyFields(newNode, 'labelWidth' as HiBaseFieldNameKeys) + newNode.labelPlacement = getKeyFields(newNode, 'labelPlacement' as HiBaseFieldNameKeys) + + return newNode + } + + return data.map(traverseNode) +}