Add name prop for NoticeIconTab (#2436)

* Add name prop for NoticeIconTab in order to support clear-by-type when using i18n.

* Fix typo

src/components/GlobalHeader/RightContent.js

@@ -117,18 +117,21 @@ export default class GlobalHeaderRight extends PureComponent {
           <NoticeIcon.Tab
             list={noticeData.notification}
             title={formatMessage({ id: 'component.globalHeader.notification' })}
+            name="notification"
             emptyText={formatMessage({ id: 'component.globalHeader.notification.empty' })}
             emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
           />
           <NoticeIcon.Tab
             list={noticeData.message}
             title={formatMessage({ id: 'component.globalHeader.message' })}
+            name="message"
             emptyText={formatMessage({ id: 'component.globalHeader.message.empty' })}
             emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
           />
           <NoticeIcon.Tab
             list={noticeData.event}
             title={formatMessage({ id: 'component.globalHeader.event' })}
+            name="event"
             emptyText={formatMessage({ id: 'component.globalHeader.event.empty' })}
             emptyImage="https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg"
           />

src/components/NoticeIcon/NoticeIconTab.d.ts

@@ -11,6 +11,7 @@ export interface INoticeIconData {
 export interface INoticeIconTabProps {
   list?: INoticeIconData[];
   title?: string;
+  name?: string;
   emptyText?: React.ReactNode;
   emptyImage?: string;
   style?: React.CSSProperties;

src/components/NoticeIcon/index.d.ts

@@ -6,9 +6,9 @@ export interface INoticeIconProps {
   bell?: React.ReactNode;
   className?: string;
   loading?: boolean;
-  onClear?: (tableTile: string) => void;
+  onClear?: (tabName: string) => void;
   onItemClick?: (item: INoticeIconData, tabProps: INoticeIconProps) => void;
-  onTabChange?: (tableTile: string) => void;
+  onTabChange?: (tabTile: string) => void;
   popupAlign?: {
     points?: [string, string];
     offset?: [number, number];

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

@@ -14,7 +14,7 @@ Property | Description | Type | Default
 count | Total number of messages | number | -
 bell | Change the bell Icon | ReactNode | `<Icon type='bell' />`
 loading | Popup card loading status | boolean | false
-onClear | Click to clear button the callback  | function(tabTitle) | -
+onClear | Click to clear button the callback  | function(tabName) | -
 onItemClick | Click on the list item's callback | function(item, tabProps) | -
 onTabChange | Switching callbacks for tabs | function(tabTitle) | -
 popupAlign | Popup card location configuration | Object [alignConfig](https://github.com/yiminghe/dom-align#alignconfig-object-details) | -
@@ -27,6 +27,7 @@ locale | Default message text | Object | `{ emptyText: '暂无数据', clear: '
 Property | Description | Type | Default
 ----|------|-----|------
 title |  header for message Tab | string | -
+name | identifier for message Tab | string | -
 list | List data, format refer to the following table | Array | `[]`
 showClear | Clear button display status | boolean | true
 emptyText |  message text when list is empty  | ReactNode | -

src/components/NoticeIcon/index.js

@@ -44,12 +44,12 @@ export default class NoticeIcon extends PureComponent {
           ? `${child.props.title} (${child.props.list.length})`
           : child.props.title;
       return (
-        <TabPane tab={title} key={child.props.title}>
+        <TabPane tab={title} key={child.props.name}>
           <List
             {...child.props}
             data={child.props.list}
             onClick={item => this.onItemClick(item, child.props)}
-            onClear={() => onClear(child.props.title)}
+            onClear={() => onClear(child.props.name)}
             title={child.props.title}
             locale={locale}
           />

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

@@ -14,7 +14,7 @@ order: 9
 count | 图标上的消息总数 | number | -
 bell | translate this please -> Change the bell Icon | ReactNode | `<Icon type='bell' />`
 loading | 弹出卡片加载状态 | boolean | false
-onClear | 点击清空按钮的回调 | function(tabTitle) | -
+onClear | 点击清空按钮的回调 | function(tabName) | -
 onItemClick | 点击列表项的回调 | function(item, tabProps) | -
 onTabChange | 切换页签的回调 | function(tabTitle) | -
 popupAlign | 弹出卡片的位置配置 | Object [alignConfig](https://github.com/yiminghe/dom-align#alignconfig-object-details) | -
@@ -27,6 +27,7 @@ locale | 默认文案 | Object | `{ emptyText: '暂无数据', clear: '清空' }
 参数 | 说明 | 类型 | 默认值
 ----|------|-----|------
 title | 消息分类的页签标题 | string | -
+name | 消息分类的标识符 | string | -
 list | 列表数据，格式参照下表 | Array | `[]`
 showClear | 是否显示清空按钮 | boolean | true
 emptyText | 针对每个 Tab 定制空数据文案 | ReactNode | -