Commit add25295 authored by Juan Rodrigo Venegas Boesch's avatar Juan Rodrigo Venegas Boesch Committed by 陈帅

Notice Icon avatar can accepts node elements

You can pass a react element like a custom icon from icon moon instead of an image.
parent c1e9122b
import * as React from 'react';
export interface INoticeIconData {
avatar?: string;
avatar?: string|React.ReactNode;
title?: React.ReactNode;
description?: React.ReactNode;
datetime?: React.ReactNode;
......
......@@ -28,11 +28,19 @@ export default function NoticeList({
const itemCls = classNames(styles.item, {
[styles.read]: item.read,
});
const leftIcon = item.avatar ? (
typeof item.avatar === 'string' ? (
<Avatar className={styles.avatar} src={item.avatar} />
) : (
item.avatar
)
) : null;
return (
<List.Item className={itemCls} key={item.key || i} onClick={() => onClick(item)}>
<List.Item.Meta
className={styles.meta}
avatar={item.avatar ? <Avatar className={styles.avatar} src={item.avatar} /> : null}
avatar={<span className={styles.iconElement}>{leftIcon}</span>}
title={
<div className={styles.title}>
{item.title}
......
......@@ -18,6 +18,9 @@
background: #fff;
margin-top: 4px;
}
.iconElement {
font-size: 32px;
}
&.read {
opacity: 0.4;
......
......@@ -36,7 +36,7 @@ emptyImage | image when list is empty | string | -
Property | Description | Type | Default
----|------|-----|------
avatar | avatar img url | string | -
avatar | avatar img url | string \| ReactNode | -
title | title | ReactNode | -
description | description info | ReactNode | -
datetime | Timestamps | ReactNode | -
......
......@@ -36,7 +36,7 @@ emptyImage | 针对每个 Tab 定制空数据图片 | string | -
参数 | 说明 | 类型 | 默认值
----|------|-----|------
avatar | 头像图片链接 | string | -
avatar | 头像图片链接 | string \| ReactNode | -
title | 标题 | ReactNode | -
description | 描述信息 | ReactNode | -
datetime | 时间戳 | ReactNode | -
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment