renew NoticeIcon

src/components/NoticeIcon/NoticeList.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Avatar, Icon } from 'antd';
+import { Avatar, Icon, List } from 'antd';
 import classNames from 'classnames';
 import styles from './NoticeList.less';
 
@@ -14,28 +14,34 @@ export default function NoticeList({ data = [], onClick, onClear, title, locale
   }
   return (
     <div>
-      <ul className={styles.list}>
+      <List className={styles.list}>
         {data.map((item, i) => {
           const itemCls = classNames(styles.item, {
             [styles.read]: item.read,
           });
           return (
-            <li className={itemCls} key={item.key || i} onClick={() => onClick(item)}>
-              <div className={styles.wrapper}>
-                {item.avatar ? <Avatar className={styles.avatar} src={item.avatar} /> : null}
-                <div className={styles.content}>
-                  <h4 className={styles.title} title={item.title}>{item.title}</h4>
-                  <div className={styles.description} title={item.description}>
-                    {item.description}
+            <List.Item className={itemCls} key={item.key || i} onClick={() => onClick(item)}>
+              <List.Item.Meta
+                avatar={item.avatar ? <Avatar className={styles.avatar} src={item.avatar} /> : null}
+                title={
+                  <div>
+                    {item.title}
+                    <div className={styles.extra}>{item.extra}</div>
                   </div>
-                  <div className={styles.datetime}>{item.datetime}</div>
-                  <div className={styles.extra}>{item.extra}</div>
-                </div>
-              </div>
-            </li>
+                }
+                description={
+                  <div>
+                    <div className={styles.description} title={item.description}>
+                      {item.description}
+                    </div>
+                    <div className={styles.datetime}>{item.datetime}</div>
+                  </div>
+                }
+              />
+            </List.Item>
           );
         })}
-      </ul>
+      </List>
       <div className={styles.clear} onClick={onClear}>
         {locale.clear}{title}
       </div>

src/components/NoticeIcon/NoticeList.less

@@ -7,31 +7,18 @@
     transition: all .3s;
     overflow: hidden;
     cursor: pointer;
+    padding-left: 24px;
+    padding-right: 24px;
 
-    .wrapper {
-      margin: 0 32px;
-      padding: 12px 0;
-      border-bottom: 1px solid @border-color-split;
-    }
     &.read {
       opacity: .4;
     }
-    &:last-child .wrapper {
+    &:last-child {
       border-bottom: 0;
     }
     &:hover {
       background: @primary-1;
     }
-    .content {
-      position: relative;
-      overflow: hidden;
-    }
-    .avatar {
-      margin-right: 16px;
-      float: left;
-      margin-top: 4px;
-      background: #fff;
-    }
     .title {
       font-weight: normal;
       color: @text-color;
@@ -40,21 +27,19 @@
       white-space: nowrap;
     }
     .description {
-      color: @text-color-secondary;
       font-size: 12px;
-      margin-top: 8px;
+      line-height: @line-height-base;
     }
     .datetime {
-      color: @text-color-secondary;
       font-size: 12px;
       margin-top: 4px;
+      line-height: @line-height-base;
     }
     .extra {
-      position: absolute;
-      right: 0;
-      top: 0;
+      float: right;
       color: @text-color-secondary;
-      font-size: 12px;
+      font-weight: normal;
+      margin-right: 0;
     }
   }
 }
@@ -77,13 +62,13 @@
   height: 46px;
   line-height: 46px;
   text-align: center;
-  color: @text-color-secondary;
+  color: @text-color;
   border-radius: 0 0 @border-radius-base @border-radius-base;
   border-top: 1px solid @border-color-split;
   transition: all .3s;
   cursor: pointer;
 
   &:hover {
-    color: @text-color;
+    color: @heading-color;
   }
 }

src/components/NoticeIcon/demo/popover.md

@@ -3,11 +3,12 @@ order: 2
 title: 带浮层卡片
 ---
 
-点击展开通知卡片，展现多种类型的通知。
+点击展开通知卡片，展现多种类型的通知，通常放在顶部通栏。
 
 ````jsx
 import NoticeIcon from 'ant-design-pro/lib/NoticeIcon';
 import moment from 'moment';
+import { Tag } from 'antd';
 
 const data = [{
   key: '1',
@@ -27,11 +28,29 @@ const data = [{
   title: '标题',
   description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
   datetime: moment('2017-08-07').fromNow(),
+  extra: <Tag color="red">标签</Tag>,
 }];
 
+function onItemClick(item, tabProps) {
+  console.log(item, tabProps);
+}
+
+function onClear(tabTitle) {
+  console.log(tabTitle);
+}
+
 ReactDOM.render(
-  <div style={{ width: 300, textAlign: 'right' }}>
-    <NoticeIcon count={10}>
+  <div
+    style={{
+      textAlign: 'right',
+      height: '64px',
+      lineHeight: '64px',
+      boxShadow: '0 1px 4px rgba(0,21,41,.12)',
+      padding: '0 32px',
+      width: '400px',
+    }}
+  >
+    <NoticeIcon count={5} onItemClick={onItemClick} onClear={onClear}>
       <NoticeIcon.Tab list={data} title="通知" />
       <NoticeIcon.Tab list={data} title="消息" />
       <NoticeIcon.Tab list={[]} title="待办" />

src/components/NoticeIcon/index.js

@@ -63,7 +63,7 @@ export default class NoticeIcon extends PureComponent {
     );
   }
   render() {
-    const { className, count, popupAlign } = this.props;
+    const { className, count, popupAlign, onPopupVisibleChange } = this.props;
     const noticeButtonClass = classNames(className, styles.noticeButton);
     const notificationBox = this.getNotificationBox();
     const trigger = (
@@ -76,6 +76,10 @@ export default class NoticeIcon extends PureComponent {
     if (!notificationBox) {
       return trigger;
     }
+    const popoverProps = {};
+    if ('popupVisible' in this.props) {
+      popoverProps.visible = this.props.popupVisible;
+    }
     return (
       <Popover
         placement="bottomRight"
@@ -84,7 +88,8 @@ export default class NoticeIcon extends PureComponent {
         trigger="click"
         arrowPointAtCenter
         popupAlign={popupAlign}
-        onVisibleChange={this.props.onPopupVisibleChange}
+        onVisibleChange={onPopupVisibleChange}
+        {...popoverProps}
       >
         {trigger}
       </Popover>

src/components/NoticeIcon/index.less

@@ -14,23 +14,17 @@
 }
 
 .icon {
-  font-size: 20px;
+  font-size: 16px;
+  padding: 4px;
 }
 
 .tabs {
   :global {
-    .ant-tabs-nav-container {
-      font-size: 14px;
-    }
     .ant-tabs-nav-scroll {
       text-align: center;
     }
     .ant-tabs-bar {
       margin-bottom: 0;
     }
-    .ant-tabs-nav .ant-tabs-tab {
-      padding-top: 16px;
-      padding-bottom: 16px;
-    }
   }
 }

src/components/NoticeIcon/index.md

@@ -19,6 +19,7 @@ onItemClick | 点击列表项的回调 | function(item, tabProps) | -
 onTabChange | 切换页签的回调 | function(tabTitle) | -
 popupAlign | 弹出卡片的位置配置 | Object [alignConfig](https://github.com/yiminghe/dom-align#alignconfig-object-details) | -
 onPopupVisibleChange | 弹出卡片显隐的回调 | function(visible) | -
+popupVisible | 控制弹层显隐 | boolean | -
 locale | 默认文案 | Object | `{ emptyText: '暂无数据', clear: '清空' }`
 
 ### NoticeIcon.Tab

src/layouts/BasicLayout.js

@@ -126,7 +126,7 @@ class BasicLayout extends React.PureComponent {
           urgent: 'red',
           doing: 'yellow',
         })[newNotice.status];
-        newNotice.extra = <Tag color={`${color}-inverse`}>{newNotice.extra}</Tag>;
+        newNotice.extra = <Tag color={color}>{newNotice.extra}</Tag>;
       }
       return newNotice;
     });