Просмотр исходного кода

Notice Icon avatar can accepts node elements

You can pass a react element like a custom icon from icon moon instead of an image.
Juan Rodrigo Venegas Boesch 7 лет назад
Родитель
Сommit
add2529518

+ 1 - 1
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;

+ 9 - 1
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 - 0
src/components/NoticeIcon/NoticeList.less

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

+ 1 - 1
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 | -

+ 1 - 1
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 | -