From 280dfc9b1f4bf5f34b6ccb6eb8b072d5776f1402 Mon Sep 17 00:00:00 2001
From: xiamiao1121 <74885998+xiamiao1121@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:42:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(list):=20=E6=94=AF=E6=8C=81=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=AD=97=E6=AE=B5=E5=88=AB=E5=90=8D(#2908)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* chore: 生成变更记录文件

* chore: 修改代码

* feat(list): 修改fieldNames类型

* feat(list): 代码规范

---------

Co-authored-by: xiamiao <xiamiao@xiaomi.com>
---
 .changeset/angry-bugs-fix.md   |  5 +++++
 .changeset/slimy-spoons-jog.md |  5 +++++
 packages/ui/list/src/List.tsx  | 19 +++++++++++++++----
 packages/ui/list/src/utils.ts  | 32 ++++++++++++++++++++++++++++++++
 4 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/angry-bugs-fix.md
 create mode 100644 .changeset/slimy-spoons-jog.md
 create mode 100644 packages/ui/list/src/utils.ts

diff --git a/.changeset/angry-bugs-fix.md b/.changeset/angry-bugs-fix.md
new file mode 100644
index 000000000..ea0724f7a
--- /dev/null
+++ 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
new file mode 100644
index 000000000..1166ee312
--- /dev/null
+++ 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
index b0454eba2..aebdce2e4 100644
--- 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
new file mode 100644
index 000000000..e14752336
--- /dev/null
+++ 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))
+}