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

10
src/components/NoticeIcon/NoticeList.js

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

3
src/components/NoticeIcon/NoticeList.less

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

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

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

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

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

Loading…
Cancel
Save