Feat/noticeicon-close (#2716)

* add new feature: click the clear button or list item to close the pop-up

* add the new property: clickClose and set the value: true

* add the new property: clearClose

* update d.ts and  .md

* add eslint-disable-line

mock/notices.js

@@ -43,6 +43,7 @@ const getNotices = (req, res) =>
       description: '描述信息描述信息描述信息',
       datetime: '2017-08-07',
       type: 'message',
+      clickClose: true,
     },
     {
       id: '000000007',
@@ -51,6 +52,7 @@ const getNotices = (req, res) =>
       description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
       datetime: '2017-08-07',
       type: 'message',
+      clickClose: true,
     },
     {
       id: '000000008',
@@ -59,6 +61,7 @@ const getNotices = (req, res) =>
       description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
       datetime: '2017-08-07',
       type: 'message',
+      clickClose: true,
     },
     {
       id: '000000009',

src/components/GlobalHeader/RightContent.js

@@ -116,6 +116,7 @@ export default class GlobalHeaderRight extends PureComponent {
           onPopupVisibleChange={onNoticeVisibleChange}
           loading={fetchingNotices}
           popupAlign={{ offset: [20, -16] }}
+          clearClose
         >
           <NoticeIcon.Tab
             list={noticeData.notification}

src/components/NoticeIcon/demo/popover.md

@@ -49,6 +49,7 @@ const data = [{
   description: '描述信息描述信息描述信息',
   datetime: '2017-08-07',
   type: '消息',
+  clickClose: true,
 }, {
   id: '000000007',
   avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
@@ -56,6 +57,7 @@ const data = [{
   description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
   datetime: '2017-08-07',
   type: '消息',
+  clickClose: true,
 }, {
   id: '000000008',
   avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
@@ -63,6 +65,7 @@ const data = [{
   description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
   datetime: '2017-08-07',
   type: '消息',
+  clickClose: true,
 }, {
   id: '000000009',
   title: '任务名称',

src/components/NoticeIcon/index.d.ts

@@ -22,6 +22,7 @@ export interface INoticeIconProps {
   onPopupVisibleChange?: (visible: boolean) => void;
   popupVisible?: boolean;
   locale?: { emptyText: string; clear: string };
+  clearClose?: boolean;
 }
 
 export default class NoticeIcon extends React.Component<INoticeIconProps, any> {

src/components/NoticeIcon/index.js

 import React, { PureComponent } from 'react';
+import ReactDOM from 'react-dom';
 import { Popover, Icon, Tabs, Badge, Spin } from 'antd';
 import classNames from 'classnames';
 import List from './NoticeList';
@@ -15,6 +16,7 @@ export default class NoticeIcon extends PureComponent {
     onTabChange: () => {},
     onClear: () => {},
     loading: false,
+    clearClose: false,
     locale: {
       emptyText: 'No notifications',
       clear: 'Clear',
@@ -24,16 +26,28 @@ export default class NoticeIcon extends PureComponent {
 
   onItemClick = (item, tabProps) => {
     const { onItemClick } = this.props;
+    const { clickClose } = item;
     onItemClick(item, tabProps);
+    if (clickClose) {
+      this.popover.click();
+    }
   };
 
+  onClear = (name) => {
+    const { onClear, clearClose } = this.props;
+    onClear(name)
+    if (clearClose) {
+      this.popover.click();
+    }
+  }
+
   onTabChange = tabType => {
     const { onTabChange } = this.props;
     onTabChange(tabType);
   };
 
   getNotificationBox() {
-    const { children, loading, locale, onClear } = this.props;
+    const { children, loading, locale } = this.props;
     if (!children) {
       return null;
     }
@@ -48,7 +62,7 @@ export default class NoticeIcon extends PureComponent {
             {...child.props}
             data={child.props.list}
             onClick={item => this.onItemClick(item, child.props)}
-            onClear={() => onClear(child.props.name)}
+            onClear={() => this.onClear(child.props.name)}
             title={child.props.title}
             locale={locale}
           />
@@ -93,6 +107,7 @@ export default class NoticeIcon extends PureComponent {
         popupAlign={popupAlign}
         onVisibleChange={onPopupVisibleChange}
         {...popoverProps}
+        ref={node => { this.popover = ReactDOM.findDOMNode(node)}} // eslint-disable-line
       >
         {trigger}
       </Popover>