feat(problems and notification): update problems and notification code

#103

package.json

@@ -35,7 +35,7 @@
         "@types/react-dom": "^17.0.3",
         "immutability-helper": "^3.1.1",
         "lodash": "^4.17.21",
-        "monaco-editor": "^0.21.2",
+        "monaco-editor": "0.21.2",
         "rc-collapse": "~2.0.1",
         "rc-dialog": "8.2.1",
         "rc-textarea": "~0.3.1",

src/controller/index.ts

@@ -4,8 +4,10 @@ import { FolderTreeController } from './explorer/folderTree';
 import { SearchController } from './search/search';
 import { NotificationController } from './notification';
 import { SettingsController } from './settings';
+import { ProblemsController } from './problems';
 export const explorerController = container.resolve(ExplorerController);
 export const searchController = container.resolve(SearchController);
 export const folderTreeController = container.resolve(FolderTreeController);
 export const notificationController = container.resolve(NotificationController);
 export const settingController = container.resolve(SettingsController);
+export const problemsController = container.resolve(ProblemsController);

src/controller/notification.tsx

@@ -5,9 +5,6 @@ import * as ReactDOM from 'react-dom';
 import { connect } from 'mo/react';
 import { IStatusBarItem } from 'mo/model';
 import { Controller } from 'mo/react/controller';
-import { Notification } from 'mo/workbench/statusBar/notification';
-import { NotificationPanel } from 'mo/workbench/statusBar/notification/notificationPanel';
-
 import { IActionBarItem } from 'mo/components/actionBar';
 import {
     INotificationItem,
@@ -17,10 +14,15 @@ import {
 import { select } from 'mo/common/dom';
 import { ID_APP } from 'mo/common/id';
 import {
+    NotificationPanel,
+    NotificationStatusBarView,
+} from 'mo/workbench/notification';
+import {
+    IStatusBarService,
+    StatusBarService,
     INotificationService,
     NotificationService,
-} from 'mo/services/notificationService';
-import { IStatusBarService, StatusBarService } from 'mo/services';
+} from 'mo/services';
 
 export interface INotificationController {
     onCloseNotification(item: INotificationItem): void;
@@ -45,11 +47,11 @@ export class NotificationController
         this.init();
     }
 
-    public onCloseNotification(item: INotificationItem<any>): void {
+    public onCloseNotification = (item: INotificationItem<any>): void => {
         if (typeof item.id === 'number') {
             this.notificationService.removeNotification(item.id);
         }
-    }
+    };
 
     private _notificationPanel: HTMLDivElement | undefined = undefined;
 
@@ -80,7 +82,7 @@ export class NotificationController
         const notificationItem = this.notificationService.getState();
         const NotificationView = connect(
             this.notificationService,
-            Notification
+            NotificationStatusBarView
         );
         this.notificationService.setState({
             ...notificationItem,

src/controller/problems.tsx

@@ -0,0 +1,50 @@
+import 'reflect-metadata';
+import * as React from 'react';
+import { IStatusBarItem } from 'mo';
+import { Controller } from 'mo/react/controller';
+import {
+    IPanelService,
+    PanelService,
+    IStatusBarService,
+    StatusBarService,
+} from 'mo/services';
+import { singleton, container } from 'tsyringe';
+import { STATUS_PROBLEMS, PANEL_PROBLEMS } from 'mo/model/problems';
+export interface IProblemsController {
+    onClick?: (e: React.MouseEvent, item: IStatusBarItem) => void;
+}
+@singleton()
+export class ProblemsController
+    extends Controller
+    implements IProblemsController {
+    private readonly panelService: IPanelService;
+    private readonly statusBarService: IStatusBarService;
+    constructor() {
+        super();
+        this.panelService = container.resolve(PanelService);
+        this.statusBarService = container.resolve(StatusBarService);
+        this.init();
+    }
+    private showHideProblems() {
+        const { current, hidden } = this.panelService.getState();
+        if (hidden) {
+            this.panelService.showHide();
+        } else if (current?.id !== PANEL_PROBLEMS.id) {
+            this.panelService.open(PANEL_PROBLEMS);
+        } else {
+            this.panelService.showHide();
+        }
+    }
+
+    public onClick = (e: React.MouseEvent, item: IStatusBarItem) => {
+        this.showHideProblems();
+    };
+    private init() {
+        this.statusBarService.appendLeftItem(
+            Object.assign(STATUS_PROBLEMS, {
+                onClick: this.onClick,
+            })
+        );
+        this.panelService.add(PANEL_PROBLEMS);
+    }
+}

src/controller/statusBar.tsx

@@ -2,40 +2,19 @@ import 'reflect-metadata';
 import * as React from 'react';
 import { IStatusBarItem, StatusBarEvent } from 'mo/model';
 import { Controller } from 'mo/react/controller';
-import { container, singleton } from 'tsyringe';
-import { PANEL_PROBLEMS } from 'mo/model/workbench/panel';
-import { STATUS_PROBLEMS } from 'mo/model/workbench/statusBar';
-import { IPanelService, PanelService } from 'mo/services';
-
+import { singleton } from 'tsyringe';
 export interface IStatusBarController {
     onClick?: (e: React.MouseEvent, item: IStatusBarItem) => void;
 }
 @singleton()
 export class StatusBarController
     extends Controller
     implements IStatusBarController {
-    private readonly panelService: IPanelService;
-
     constructor() {
         super();
-        this.panelService = container.resolve(PanelService);
     }
 
     public onClick = (e: React.MouseEvent, item: IStatusBarItem) => {
-        const { id } = item;
-        switch (id) {
-            case STATUS_PROBLEMS.id /** Problems */:
-                const { current, hidden } = this.panelService.getState();
-                if (hidden) {
-                    this.panelService.showHide();
-                } else if (current?.id !== PANEL_PROBLEMS.id) {
-                    this.panelService.open(PANEL_PROBLEMS);
-                } else {
-                    this.panelService.showHide();
-                }
-                break;
-            default:
-        }
         this.emit(StatusBarEvent.onClick, e, item);
     };
 }

src/extensions/editor/index.tsx

@@ -0,0 +1,10 @@
+import { IExtensionService } from 'mo';
+import { IExtension } from 'mo/model/extension';
+
+function init() {}
+
+export const ExtendEditor: IExtension = {
+    activate(extensionCtx: IExtensionService) {
+        init();
+    },
+};

src/workbench/statusBar/editor/index.tsx → src/extensions/editor/statusBarView/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export function EditorMarkers(props: any) {
+export function EditorStatusBarView(props: any) {
     const { data = { ln: 0, col: 0 } } = props;
     return <span>{`Ln ${data.ln}, Col ${data.col}`}</span>;
 }

src/extensions/index.ts

@@ -1,4 +1,8 @@
 import { ExtendStatusBar } from './statusBar';
+import { ExtendEditor } from './editor';
+import { ExtendNotification } from './notification';
+import { ExtendProblems } from './problems';
+
 import { defaultColorThemeExtension } from './theme-defaults';
 import { monokaiColorThemeExtension } from './theme-monokai';
 import { paleNightColorThemeExtension } from './vscode-palenight-theme';
@@ -8,7 +12,10 @@ import { ExtendFolderTree } from './folderTree';
  * Default extensions
  */
 export const defaultExtensions = [
+    ExtendEditor,
     ExtendStatusBar,
+    ExtendProblems,
+    ExtendNotification,
     defaultColorThemeExtension,
     monokaiColorThemeExtension,
     paleNightColorThemeExtension,

src/extensions/notification/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { IExtension } from 'mo/model/extension';
+import { IExtensionService, notificationService } from 'mo';
+import { Button } from 'mo/components/button';
+function init() {
+    notificationService.addNotifications([
+        {
+            id: 1,
+            value: '测试消息模块1',
+            status: 1,
+            render: (item) => {
+                return (
+                    <div>
+                        <div>{item.value}</div>
+                        <Button>测试</Button>
+                    </div>
+                );
+            },
+        },
+        {
+            id: 2,
+            value: '测试消息模块2',
+            status: 1,
+        },
+        {
+            id: 3,
+            value: '测试消息模块3',
+            status: 1,
+        },
+    ]);
+}
+
+export const ExtendNotification: IExtension = {
+    activate(extensionCtx: IExtensionService) {
+        init();
+    },
+};

src/extensions/problems/index.tsx

@@ -0,0 +1,42 @@
+import { IExtensionService } from 'mo';
+import { IExtension } from 'mo/model/extension';
+import { problemsService } from 'mo';
+
+function init() {
+    const MockItem = {
+        id: 1,
+        name: 'text.tsx',
+        value: {
+            code: 'text.tsx',
+            message: '文件夹',
+            startLineNumber: 0,
+            startColumn: 1,
+            endLineNumber: 0,
+            endColumn: 1,
+            status: 1,
+        },
+        children: [
+            {
+                id: 3,
+                name: '0-1',
+                value: {
+                    code: 'endLineNumber',
+                    message: '语法错误',
+                    startLineNumber: 0,
+                    startColumn: 1,
+                    endLineNumber: 0,
+                    endColumn: 1,
+                    status: 2,
+                },
+                children: [],
+            },
+        ],
+    };
+    problemsService.addProblems(MockItem);
+}
+
+export const ExtendProblems: IExtension = {
+    activate(extensionCtx: IExtensionService) {
+        init();
+    },
+};

src/index.ts

@@ -37,6 +37,8 @@ import {
     ExtensionService,
     ISettingsService,
     SettingsService,
+    IProblemsService,
+    ProblemsService,
 } from 'mo/services';
 
 /**
@@ -59,6 +61,7 @@ const panelService = container.resolve<IPanelService>(PanelService);
 const notificationService = container.resolve<INotificationService>(
     NotificationService
 );
+const problemsService = container.resolve<IProblemsService>(ProblemsService);
 
 /**
  * The ColorTheme service,
@@ -92,4 +95,5 @@ export {
     colorThemeService,
     settingsService,
     notificationService,
+    problemsService,
 };

src/model/notification.tsx

@@ -11,6 +11,7 @@ export enum NotificationStatus {
 export interface INotificationItem<T = any> {
     id?: number;
     value: T;
+    render?(item: INotificationItem): ReactNode;
     status?: NotificationStatus;
 }
 

src/model/problems.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { injectable } from 'tsyringe';
+import { IStatusBarItem } from 'mo/model/workbench/statusBar';
+import { IPanelItem } from 'mo/model/workbench/panel';
+import {
+    ProblemsStatusBarView,
+    ProblemsPanelView,
+} from 'mo/workbench/problems';
+
+export enum MarkerSeverity {
+    Hint = 1,
+    Info = 2,
+    Warning = 4,
+    Error = 8,
+}
+export interface IRelatedInformation {
+    code: string;
+    message: string;
+    startLineNumber: number;
+    startColumn: number;
+    endLineNumber: number;
+    endColumn: number;
+    status: MarkerSeverity;
+}
+export interface IProblemsItem<T = any> {
+    id?: number;
+    name: string;
+    value: IRelatedInformation;
+    children: IProblemsItem[];
+}
+
+export interface IProblems<T = any> {
+    id: string;
+    name: string;
+    data: IProblemsItem<T>[];
+    show?: boolean;
+}
+export const STATUS_PROBLEMS: IStatusBarItem = {
+    id: 'MoProblems',
+    sortIndex: 1,
+    data: {
+        warnings: 0,
+        errors: 0,
+        infos: 0,
+    },
+    name: 'Problems',
+    render: (item: IStatusBarItem) => <ProblemsStatusBarView {...item} />,
+};
+export const PANEL_PROBLEMS: IPanelItem = {
+    id: 'ProblemsPane',
+    name: 'problems',
+    data: null,
+    renderPane: (item) => <ProblemsPanelView {...item} />,
+};
+
+@injectable()
+export class ProblemsModel<T> implements IProblems<T> {
+    static readonly ID = 'MO_PROBLEMS';
+    static readonly NAME = 'Problems';
+    public id: string;
+    public name: string;
+    public data: IProblemsItem<T>[];
+    public show: boolean;
+
+    constructor(
+        id: string = ProblemsModel.ID,
+        name: string = ProblemsModel.NAME,
+        data: IProblemsItem<T>[] = [],
+        show: boolean = false
+    ) {
+        this.id = id;
+        this.name = name;
+        this.show = show;
+        this.data = data;
+    }
+}