+ {showClear ? (
+
+ {clearText} {title}
+
+ ) : null}
+ {showViewMore ? (
+
{
+ if (onViewMore) {
+ onViewMore(e);
+ }
+ }}
+ >
+ {viewMoreText}
+
+ ) : null}
+
+
+ );
+};
+
+export default NoticeList;
diff --git a/src/components/NoticeIcon/index.less b/src/components/NoticeIcon/index.less
new file mode 100644
index 0000000..650ccd2
--- /dev/null
+++ b/src/components/NoticeIcon/index.less
@@ -0,0 +1,31 @@
+@import '~antd/es/style/themes/default.less';
+
+.popover {
+ position: relative;
+ width: 336px;
+}
+
+.noticeButton {
+ display: inline-block;
+ cursor: pointer;
+ transition: all 0.3s;
+}
+.icon {
+ padding: 4px;
+ vertical-align: middle;
+}
+
+.badge {
+ font-size: 16px;
+}
+
+.tabs {
+ :global {
+ .ant-tabs-nav-scroll {
+ text-align: center;
+ }
+ .ant-tabs-bar {
+ margin-bottom: 0;
+ }
+ }
+}
diff --git a/src/components/NoticeIcon/index.tsx b/src/components/NoticeIcon/index.tsx
new file mode 100644
index 0000000..bb3caa4
--- /dev/null
+++ b/src/components/NoticeIcon/index.tsx
@@ -0,0 +1,175 @@
+import { Badge, Icon, Spin, Tabs } from 'antd';
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import NoticeList, { NoticeIconTabProps } from './NoticeList';
+
+import HeaderDropdown from '../HeaderDropdown';
+import styles from './index.less';
+
+const { TabPane } = Tabs;
+
+export interface NoticeIconData {
+ avatar?: string | React.ReactNode;
+ title?: React.ReactNode;
+ description?: React.ReactNode;
+ datetime?: React.ReactNode;
+ extra?: React.ReactNode;
+ style?: React.CSSProperties;
+ key?: string | number;
+ read?: boolean;
+}
+
+export interface NoticeIconProps {
+ count?: number;
+ bell?: React.ReactNode;
+ className?: string;
+ loading?: boolean;
+ onClear?: (tabName: string, tabKey: string) => void;
+ onItemClick?: (item: NoticeIconData, tabProps: NoticeIconTabProps) => void;
+ onViewMore?: (tabProps: NoticeIconTabProps, e: MouseEvent) => void;
+ onTabChange?: (tabTile: string) => void;
+ style?: React.CSSProperties;
+ onPopupVisibleChange?: (visible: boolean) => void;
+ popupVisible?: boolean;
+ clearText?: string;
+ viewMoreText?: string;
+ clearClose?: boolean;
+ children: React.ReactElement