Wdappcom 66 close all notice

src/components/App/index.tsx

@@ -7,6 +7,7 @@ import NotificationStore from "@stores/NotificationStore";
 import { Home } from "@components/Home";
 import HistoryStore from "@stores/HistoryStore";
 import SignDialog from '@components/SignDialog';
+import { Notices } from '@components';
 
 interface IProps {
     accountStore?: AccountStore
@@ -28,11 +29,16 @@ class App extends React.Component<IProps, IState> {
     };
 
     render() {
-        return <Router history={this.props.historyStore!.history}>
-            <Route exact path="/" component={Home}/>
-            <Route path="/:string" component={DappUi}/>
-            <SignDialog/>
-        </Router>
+        return (
+            <div>
+                <Notices />
+                <Router history={this.props.historyStore!.history}>
+                    <Route exact path="/" component={Home}/>
+                    <Route path="/:string" component={DappUi}/>
+                    <SignDialog/>
+                </Router>
+            </div>
+        );
     }
 }
 

src/components/Notices/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { inject, observer } from 'mobx-react';
+import { NotificationStore } from '@stores/index';
+
+interface IProps {
+    notificationStore?: NotificationStore;
+}
+
+const styles = {
+    position: 'fixed' as any,
+    top: '50px',
+    right: '32px',
+    zIndex: '10000' as any,
+    color: '#9BA6B1',
+    fontSize: '12px',
+    cursor: 'pointer'
+};
+
+@inject('notificationStore')
+@observer
+export class Notices extends React.Component<IProps> {
+    render() {
+        const notificationStore = this.props.notificationStore;
+
+        return (
+            <div className="notices-container">
+                {notificationStore!.count() > 1
+
+                    ? (<div
+                        className="notices-close-all"
+                        style={styles}
+                        onClick={()=>notificationStore?.closeAll()}>
+                            close all
+                        </div>
+                    )
+                    : null
+                }
+                <div className="notices-list-container"></div>
+            </div>
+        );
+    }
+}

src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './Address';
 export * from './Avatar';
 export * from './Home';
-export * from './Modal'
+export * from './Modal';
+export * from './Notices';
 // TODO add anothers components

src/stores/NotificationStore.tsx

@@ -1,8 +1,7 @@
+import { observable } from 'mobx';
 import notification from 'rc-notification';
 import { SubStore } from '@stores/SubStore';
-import { RootStore } from '@stores/RootStore';
 import getAlert, {closeAlertIcon} from '@utils/alertUtil'
-import { observable } from 'mobx';
 
 export type TNotifyOptions = Partial<{
     duration: number,
@@ -44,24 +43,32 @@ const styles = {
 class NotificationStore extends SubStore {
     _instance?: any;
 
+    @observable private keys: string[] = [];
+
     @observable isOpenLoginDialog = false;
     @observable isOpenMobileExplorer = false;
     @observable isOpenMobileAccount = false;
 
-    constructor(rootStore: RootStore) {
-        super(rootStore);
-        notification.newInstance({closeIcon: closeAlertIcon}, (notification: any) => this._instance = notification);
-    }
+    async notify(content: string | JSX.Element, opts: TNotifyOptions = {}) {
+
+        if(!this._instance) {
+            await this.init();
+        }
 
-    notify(content: string | JSX.Element, opts: TNotifyOptions = {}) {
-        console.log(opts);
         if (opts.key) {
             this._instance.removeNotice(opts.key);
+        } else{
+            opts.key = this.makeNoticeId();
+        }
+
+        if (!this.keys.includes(opts.key)) {
+            this.keys.push(opts.key);
         }
+
         const type = opts.type || 'info';
 
         try {
-            this._instance && this._instance.notice({
+            const notice = this._instance.notice({
                 ...opts,
                 content: getAlert(content, {...opts, type}),
                 style: {...styles[type], ...opts.style},
@@ -70,10 +77,33 @@ class NotificationStore extends SubStore {
                 closable: true,
                 closeIcon: closeAlertIcon
             });
+            console.log(notice);
         } catch(e) {
             console.error(content)
         }
     }
+
+    async init() {
+        notification.newInstance({
+            closeIcon: closeAlertIcon,
+            getContainer: () => {
+                return document.querySelector('.notices-list-container');
+            }
+        }, (notification: any) => this._instance = notification);
+    }
+
+    closeAll() {
+        this.keys.forEach((key) => this._instance.removeNotice(key))
+        this.keys = [];
+    }
+
+    count() {
+        return this.keys.length;
+    }
+
+    private makeNoticeId(): string {
+        return String(Date.now());
+    }
 }
 
 export default NotificationStore;