feat(descriptions): 支持配置字段别名(#2873)

.changeset/nasty-oranges-brush.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(descriptions): 新增支持配置字段别名

.changeset/tiny-bananas-wonder.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/descriptions": minor
+---
+
+feat: 新增支持配置字段别名

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<HTMLDivElement | null, DescriptionsProps>
       role = 'descriptions',
       className,
       children,
-      data,
+      data = DEFAULT_DATA,
+      fieldNames,
       column = 3,
       placement = 'horizontal',
       appearance = 'unset',
@@ -39,8 +42,11 @@ export const Descriptions = forwardRef<HTMLDivElement | null, DescriptionsProps>
     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对齐方式
    */

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<any, any>
 
@@ -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)
+}