feat(list): #2574

.changeset/nasty-students-drive.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/list": patch
+---
+
+feat: avatar 支持传入 ReactNode

.changeset/tender-yaks-appear.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+List feat: avatar 支持传入 ReactNode

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`}>

packages/ui/list/src/types.ts

@@ -14,9 +14,9 @@ export interface ListDataItem {
    */
   extra?: React.ReactNode
   /**
-   * 左侧图片资源地址
+   * 左侧图片
    */
-  avatar?: string
+  avatar?: React.ReactNode
   /**
    * 右侧操作项
    */

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>
+    </>
+  )
+}

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',