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'; import * as React from 'react';
export interface INoticeIconData { export interface INoticeIconData {
avatar?: string; avatar?: string|React.ReactNode;
title?: React.ReactNode; title?: React.ReactNode;
description?: React.ReactNode; description?: React.ReactNode;
datetime?: React.ReactNode; datetime?: React.ReactNode;
......
...@@ -28,11 +28,19 @@ export default function NoticeList({ ...@@ -28,11 +28,19 @@ export default function NoticeList({
const itemCls = classNames(styles.item, { const itemCls = classNames(styles.item, {
[styles.read]: item.read, [styles.read]: item.read,
}); });
const leftIcon = item.avatar ? (
typeof item.avatar === 'string' ? (
<Avatar className={styles.avatar} src={item.avatar} />
) : (
item.avatar
)
) : null;
return ( return (
<List.Item className={itemCls} key={item.key || i} onClick={() => onClick(item)}> <List.Item className={itemCls} key={item.key || i} onClick={() => onClick(item)}>
<List.Item.Meta <List.Item.Meta
className={styles.meta} className={styles.meta}
avatar={item.avatar ? <Avatar className={styles.avatar} src={item.avatar} /> : null} avatar={<span className={styles.iconElement}>{leftIcon}</span>}
title={ title={
<div className={styles.title}> <div className={styles.title}>
{item.title} {item.title}
......
...@@ -18,6 +18,9 @@ ...@@ -18,6 +18,9 @@
background: #fff; background: #fff;
margin-top: 4px; margin-top: 4px;
} }
.iconElement {
font-size: 32px;
}
&.read { &.read {
opacity: 0.4; opacity: 0.4;
......
...@@ -36,7 +36,7 @@ emptyImage | image when list is empty | string | - ...@@ -36,7 +36,7 @@ emptyImage | image when list is empty | string | -
Property | Description | Type | Default Property | Description | Type | Default
----|------|-----|------ ----|------|-----|------
avatar | avatar img url | string | - avatar | avatar img url | string \| ReactNode | -
title | title | ReactNode | - title | title | ReactNode | -
description | description info | ReactNode | - description | description info | ReactNode | -
datetime | Timestamps | ReactNode | - datetime | Timestamps | ReactNode | -
......
...@@ -36,7 +36,7 @@ emptyImage | 针对每个 Tab 定制空数据图片 | string | - ...@@ -36,7 +36,7 @@ emptyImage | 针对每个 Tab 定制空数据图片 | string | -
参数 | 说明 | 类型 | 默认值 参数 | 说明 | 类型 | 默认值
----|------|-----|------ ----|------|-----|------
avatar | 头像图片链接 | string | - avatar | 头像图片链接 | string \| ReactNode | -
title | 标题 | ReactNode | - title | 标题 | ReactNode | -
description | 描述信息 | ReactNode | - description | 描述信息 | ReactNode | -
datetime | 时间戳 | 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