From 2d1e50c5e8c4b93de2dcc53f259651247e42448d Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Thu, 7 Sep 2023 10:40:37 +0800
Subject: [PATCH] feat(list): #2574

---
 .changeset/nasty-students-drive.md          |  5 +++
 .changeset/tender-yaks-appear.md            |  5 +++
 packages/ui/list/src/ListItem.tsx           |  2 +-
 packages/ui/list/src/types.ts               |  4 +-
 packages/ui/list/stories/avatar.stories.tsx | 48 +++++++++++++++++++++
 packages/ui/list/stories/index.stories.tsx  |  1 +
 6 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/nasty-students-drive.md
 create mode 100644 .changeset/tender-yaks-appear.md
 create mode 100644 packages/ui/list/stories/avatar.stories.tsx

diff --git a/.changeset/nasty-students-drive.md b/.changeset/nasty-students-drive.md
new file mode 100644
index 000000000..c55ba347a
--- /dev/null
+++ b/.changeset/nasty-students-drive.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/list": patch
+---
+
+feat: avatar 支持传入 ReactNode
diff --git a/.changeset/tender-yaks-appear.md b/.changeset/tender-yaks-appear.md
new file mode 100644
index 000000000..6cf259141
--- /dev/null
+++ b/.changeset/tender-yaks-appear.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+List feat: avatar 支持传入 ReactNode
diff --git a/packages/ui/list/src/ListItem.tsx b/packages/ui/list/src/ListItem.tsx
index 7472360cd..0f9f12b53 100644
--- a/packages/ui/list/src/ListItem.tsx
+++ b/packages/ui/list/src/ListItem.tsx
@@ -20,7 +20,7 @@ export const ListItem: React.FC<ListItemProps> = ({
     <div className={cx(`${prefixCls}-item`, className)}>
       {avatar && (
         <div className={`${prefixCls}-item__avatar`} key="avatar">
-          <img src={avatar} />
+          {typeof avatar === 'string' ? <img src={avatar} /> : avatar}
         </div>
       )}
       <div className={`${prefixCls}-item__content`}>
diff --git a/packages/ui/list/src/types.ts b/packages/ui/list/src/types.ts
index f7fb74b26..d2a62ac87 100644
--- a/packages/ui/list/src/types.ts
+++ b/packages/ui/list/src/types.ts
@@ -14,9 +14,9 @@ export interface ListDataItem {
    */
   extra?: React.ReactNode
   /**
-   * 左侧图片资源地址
+   * 左侧图片
    */
-  avatar?: string
+  avatar?: React.ReactNode
   /**
    * 右侧操作项
    */
diff --git a/packages/ui/list/stories/avatar.stories.tsx b/packages/ui/list/stories/avatar.stories.tsx
new file mode 100644
index 000000000..b3ff6e8b6
--- /dev/null
+++ b/packages/ui/list/stories/avatar.stories.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import List from '../src'
+import AvatarComp from '@hi-ui/avatar'
+
+/**
+ * @title 自定义头像
+ */
+export const Avatar = () => {
+  return (
+    <>
+      <h1>Avatar</h1>
+      <div className="list-avatar__wrap">
+        <List
+          data={[
+            {
+              title: '下单量-指标',
+              description: '下单量在交易环节中整体用户下单的数量',
+              extra: '最新使用：2019.12.23 下午07:07',
+              avatar:
+                'https://cdn.cnbj1.fds.api.mi-img.com/hiui-template/resources/images/HiUI/logo.png',
+              action: '编辑',
+            },
+            {
+              title: '下单量-指标',
+              description: '下单量在交易环节中整体用户下单的数量',
+              extra: '最新使用：2019.12.23 下午07:07',
+              avatar:
+                'https://cdn.cnbj1.fds.api.mi-img.com/hiui-template/resources/images/HiUI/logo.png',
+              action: '编辑',
+            },
+          ]}
+          render={(dataItem) => {
+            console.log('dataItem', dataItem)
+
+            const { avatar, ...rest } = dataItem
+
+            return (
+              <List.Item
+                {...rest}
+                avatar={<AvatarComp size={'lg'} shape={'square'} src={avatar as string} />}
+              />
+            )
+          }}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/list/stories/index.stories.tsx b/packages/ui/list/stories/index.stories.tsx
index 0bd162e22..d80f22df2 100644
--- a/packages/ui/list/stories/index.stories.tsx
+++ b/packages/ui/list/stories/index.stories.tsx
@@ -7,6 +7,7 @@ export * from './no-split.stories'
 export * from './action.stories'
 export * from './empty.stories'
 export * from './no-border.stories'
+export * from './avatar.stories'
 
 export default {
   title: 'Data Display/List',