feat(list): 支持配置字段别名(XiaoMi#2908)

* feat(list): 支持配置字段别名(XiaoMi#2908) * chore: 生成变更记录文件 * chore: 修改代码 * feat(list): 修改fieldNames类型 * feat(list): 代码规范 --------- Co-authored-by: xiamiao <[email protected]>
xiamiao1121 · Jun 28, 2024 · 280dfc9 · 280dfc9
1 parent ce9517d
commit 280dfc9
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 4 deletions.
diff --git a/.changeset/angry-bugs-fix.md b/.changeset/angry-bugs-fix.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(list): 支持配置字段别名
diff --git a/.changeset/slimy-spoons-jog.md b/.changeset/slimy-spoons-jog.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/list": minor
+---
+
+feat: 支持配置字段别名
diff --git a/packages/ui/list/src/List.tsx b/packages/ui/list/src/List.tsx
@@ -1,10 +1,11 @@
-import React, { forwardRef, useCallback } from 'react'
+import React, { forwardRef, useCallback, useMemo } from 'react'
 import { cx, getPrefixCls } from '@hi-ui/classname'
 import { __DEV__ } from '@hi-ui/env'
 import { PaginationProps, Pagination } from '@hi-ui/pagination'
 import { EmptyState } from '@hi-ui/empty-state'
-import { HiBaseHTMLProps } from '@hi-ui/core'
+import { HiBaseFieldNames, HiBaseHTMLProps } from '@hi-ui/core'
 import { ListDataItem, ListPaginationPlacementEnum } from './types'
+import { transformData } from './utils'
 
 const LIST_PREFIX = getPrefixCls('list')
 
@@ -45,11 +46,17 @@ export const List = forwardRef<HTMLDivElement | null, ListProps>(
       render,
       bordered = true,
       data,
+      fieldNames,
       emptyContent,
       ...rest
     },
     ref
   ) => {
+    const transformedData = useMemo((): ListDataItem[] => transformData(data, fieldNames), [
+      data,
+      fieldNames,
+    ])
+
     const cls = cx(prefixCls, className, {
       [`${prefixCls}--bordered`]: bordered,
       [`${prefixCls}--with-pagination`]: pagination,
@@ -73,9 +80,9 @@ export const List = forwardRef<HTMLDivElement | null, ListProps>(
 
     return (
       <div ref={ref} role={role} className={cls} {...rest}>
-        {data && data.length > 0 ? (
+        {transformedData && transformedData.length > 0 ? (
           <ul className={cx(`${prefixCls}__wrapper`)}>
-            {data.map((item, index) => {
+            {transformedData.map((item, index) => {
               return renderListItem(item, index)
             })}
           </ul>
@@ -106,6 +113,10 @@ export interface ListProps extends HiBaseHTMLProps<'div'> {
    * 列表展示的数据
    */
   data: ListDataItem[]
+  /**
+   * 设置data中的每一项对应的key
+   */
+  fieldNames?: HiBaseFieldNames
   /**
    * 自定义渲染列表项
    */

diff --git a/packages/ui/list/src/utils.ts b/packages/ui/list/src/utils.ts
@@ -0,0 +1,32 @@
+import { HiBaseFieldNameKeys, HiBaseFieldNames } from '@hi-ui/core'
+import { ListDataItem, ListActionPlacementEnum } from './types'
+
+export const transformData = (
+  data: ListDataItem[],
+  fieldNames?: HiBaseFieldNames
+): ListDataItem[] => {
+  const getKeyFields = (node: ListDataItem, key: HiBaseFieldNameKeys) => {
+    if (fieldNames) {
+      return node[(fieldNames[key] || key) as keyof ListDataItem]
+    }
+    return node[key as keyof ListDataItem]
+  }
+
+  const traverseNode = (node: ListDataItem): ListDataItem => {
+    const newNode: ListDataItem = { ...node }
+
+    newNode.title = getKeyFields(newNode, 'title' as HiBaseFieldNameKeys)
+    newNode.description = getKeyFields(newNode, 'description' as HiBaseFieldNameKeys)
+    newNode.extra = getKeyFields(newNode, 'extra' as HiBaseFieldNameKeys)
+    newNode.avatar = getKeyFields(newNode, 'avatar' as HiBaseFieldNameKeys)
+    newNode.action = getKeyFields(newNode, 'action' as HiBaseFieldNameKeys)
+    newNode.actionPlacement = getKeyFields(
+      newNode,
+      'actionPlacement' as HiBaseFieldNameKeys
+    ) as ListActionPlacementEnum
+
+    return newNode
+  }
+
+  return data.map((node) => traverseNode(node))
+}