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

NoticeIcon add hideClear props

jim 7 лет назад
Родитель
Сommit
89b3d2ee42

+ 1 - 0
src/components/NoticeIcon/NoticeIconTab.d.ts

@@ -14,6 +14,7 @@ export interface INoticeIconTabProps {
   emptyText?: React.ReactNode;
   emptyImage?: string;
   style?: React.CSSProperties;
+  hideClear?: boolean;
 }
 
 export default class NoticeIconTab extends React.Component<INoticeIconTabProps, any> {}

+ 7 - 4
src/components/NoticeIcon/NoticeList.js

@@ -11,6 +11,7 @@ export default function NoticeList({
   locale,
   emptyText,
   emptyImage,
+  hideClear,
 }) {
   if (data.length === 0) {
     return (
@@ -51,10 +52,12 @@ export default function NoticeList({
           );
         })}
       </List>
-      <div className={styles.clear} onClick={onClear}>
-        {locale.clear}
-        {title}
-      </div>
+      {hideClear ? null : (
+        <div className={styles.clear} onClick={onClear}>
+          {locale.clear}
+          {title}
+        </div>
+      )}
     </div>
   );
 }

+ 43 - 0
src/components/NoticeIcon/index.en-US.md

@@ -0,0 +1,43 @@
+---
+title: NoticeIcon
+subtitle: Notification Menu
+cols: 1
+order: 9
+---
+
+用在导航工具栏上,作为整个产品统一的通知中心。
+
+## API
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+count | Total number of messages | number | -
+loading | Popup card loading status | boolean | false
+onClear | Click to clear button the callback  | function(tabTitle) | -
+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) | -
+onPopupVisibleChange | Popup Card Showing or Hiding Callbacks | function(visible) | -
+popupVisible | Popup card display state | boolean | -
+locale | Default message text | Object | `{ emptyText: '暂无数据', clear: '清空' }`
+
+### NoticeIcon.Tab
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+title |  header for message Tab | string | -
+list | List data, format refer to the following table | Array | `[]`
+hideClear | Clear button display status | boolean | false
+emptyText |  message text when list is empty  | ReactNode | -
+emptyImage | image  when list is empty  | string | -
+
+
+### Tab data
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+avatar | avatar img url  | string | -
+title | title | ReactNode | -
+description | description info | ReactNode | -
+datetime | Timestamps | ReactNode | -
+extra |Additional information in the upper right corner of the list item | ReactNode | -

+ 3 - 3
src/components/NoticeIcon/index.md

@@ -1,7 +1,5 @@
 ---
-title:
-  en-US: NoticeIcon
-  zh-CN: NoticeIcon
+title: NoticeIcon
 subtitle: 通知菜单
 cols: 1
 order: 9
@@ -29,9 +27,11 @@ locale | 默认文案 | Object | `{ emptyText: '暂无数据', clear: '清空' }
 ----|------|-----|------
 title | 消息分类的页签标题 | string | -
 list | 列表数据,格式参照下表 | Array | `[]`
+hideClear | 是否显示清空按钮 | boolean | false
 emptyText | 针对每个 Tab 定制空数据文案 | ReactNode | -
 emptyImage | 针对每个 Tab 定制空数据图片 | string | -
 
+
 ### Tab data
 
 参数 | 说明 | 类型 | 默认值