Browse Source

Notice Icon avatar can accepts node elements

You can pass a react element like a custom icon from icon moon instead of an image.
pull/1607/head
Juan Rodrigo Venegas Boesch 8 years ago
committed by 陈帅
parent
commit
add2529518
  1. 2
      src/components/NoticeIcon/NoticeIconTab.d.ts
  2. 10
      src/components/NoticeIcon/NoticeList.js
  3. 3
      src/components/NoticeIcon/NoticeList.less
  4. 2
      src/components/NoticeIcon/index.en-US.md
  5. 2
      src/components/NoticeIcon/index.zh-CN.md

2
src/components/NoticeIcon/NoticeIconTab.d.ts

@ -1,6 +1,6 @@
import * as React from 'react';
export interface INoticeIconData {
avatar?: string;
avatar?: string|React.ReactNode;
title?: React.ReactNode;
description?: React.ReactNode;
datetime?: React.ReactNode;

10
src/components/NoticeIcon/NoticeList.js

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

3
src/components/NoticeIcon/NoticeList.less

@ -18,6 +18,9 @@
background: #fff;
margin-top: 4px;
}
.iconElement {
font-size: 32px;
}
&.read {
opacity: 0.4;

2
src/components/NoticeIcon/index.en-US.md

@ -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 | -

2
src/components/NoticeIcon/index.zh-CN.md

@ -36,7 +36,7 @@ emptyImage | 针对每个 Tab 定制空数据图片 | string | -
参数 | 说明 | 类型 | 默认值
----|------|-----|------
avatar | 头像图片链接 | string | -
avatar | 头像图片链接 | string \| ReactNode | -
title | 标题 | ReactNode | -
description | 描述信息 | ReactNode | -
datetime | 时间戳 | ReactNode | -

Loading…
Cancel
Save