feat(status bar): tuning the status bar component

Author: linhe

src/controller/editor.tsx

@@ -14,7 +14,7 @@ import { editorService, statusBarService, explorerService } from 'mo/services';
 import { IMenuItem } from 'mo/components/menu';
 import { singleton } from 'tsyringe';
 import * as monaco from 'monaco-editor';
-import { editorLineColumnItem } from './statusBar';
+import { STATUS_EDITOR_INFO } from 'mo/model/workbench/statusBar';
 import { IMonacoEditorProps } from 'mo/components/monaco';
 
 export interface IEditorController {
@@ -314,12 +314,11 @@ export class EditorController extends Controller implements IEditorController {
         if (editorInstance) {
             const position = editorInstance.getPosition();
             statusBarService.updateItem(
-                Object.assign(editorLineColumnItem, {
-                    render: () => (
-                        <span>
-                            Ln {position?.lineNumber}, Col {position?.column}
-                        </span>
-                    ),
+                Object.assign(STATUS_EDITOR_INFO, {
+                    data: {
+                        ln: position?.lineNumber,
+                        col: position?.column,
+                    },
                 })
             );
         }

src/model/workbench/statusBar.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { injectable } from 'tsyringe';
+import { EditorMarkers } from 'mo/workbench/statusBar/editor';
+import { ProblemsMarkers } from 'mo/workbench/statusBar/problems';
+export interface IStatusBarItem<T = any> extends HTMLElementProps {
+    id: string;
+    sortIndex: number;
+    data?: T;
+    onClick?(e: React.MouseEvent, item?: IStatusBarItem);
+    render?: (item: IStatusBarItem) => ReactNode;
+    name?: string;
+}
+
+export interface IStatusBar {
+    rightItems: IStatusBarItem[];
+    leftItems: IStatusBarItem[];
+    hidden?: boolean;
+}
+
+export const STATUS_PROBLEMS: IStatusBarItem = {
+    id: 'MoProblems',
+    sortIndex: 1,
+    data: {
+        warnings: 0,
+        errors: 0,
+        infos: 0,
+    },
+    name: 'Problems',
+    render: (item: IStatusBarItem) => <ProblemsMarkers {...item} />,
+};
+
+export const STATUS_EDITOR_INFO: IStatusBarItem = {
+    id: 'MoEditorInfo',
+    sortIndex: 2,
+    data: {
+        ln: 0,
+        col: 0,
+    },
+    name: 'Go to Line/Column',
+    render: (item: IStatusBarItem) => <EditorMarkers {...item} />,
+};
+
+/**
+ * The activity bar event definition
+ */
+export enum StatusBarEvent {
+    /**
+     * Selected an activity bar
+     */
+    onClick = 'statusBar.onClick',
+    /**
+     * Activity bar data changed
+     */
+    DataChanged = 'statusBar.data',
+}
+@injectable()
+export class StatusBarModel implements IStatusBar {
+    public leftItems: IStatusBarItem[] = [];
+    public rightItems: IStatusBarItem[] = [];
+    public hidden = false;
+
+    constructor(
+        leftItems: IStatusBarItem[] = [STATUS_PROBLEMS],
+        rightItems: IStatusBarItem[] = [STATUS_EDITOR_INFO],
+        hidden = false
+    ) {
+        this.leftItems = leftItems;
+        this.rightItems = rightItems;
+        this.hidden = hidden;
+    }
+}

src/model/workbench/statusBar.tsx

@@ -52,6 +52,7 @@ export class StatusBarService
 
     public showHide(): void {
         this.setState({
+            ...this.state,
             hidden: !this.state.hidden,
         });
     }

src/services/workbench/statusBarService.ts

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

src/workbench/statusBar/editor/index.tsx

@@ -2,22 +2,24 @@ import { classNames } from 'mo/common/className';
 import { IStatusBarItem } from 'mo/model/workbench/statusBar';
 import * as React from 'react';
 import { memo } from 'react';
+import { statusBarService } from 'mo/services';
 import { itemClassName } from './base';
 
 function StatusItem(props: IStatusBarItem) {
-    const { className, onClick, name, render, ...extra } = props;
-
+    const { className, onClick, name, data, render, ...extra } = props;
     const clsName = classNames(itemClassName, className);
+    const { hidden } = statusBarService.getState();
+    const display = hidden ? 'none' : 'block';
     const events = {
         onClick: function (e: React.MouseEvent) {
             onClick?.(e, props);
         },
     };
 
     return (
-        <div className={clsName} {...extra}>
+        <div className={clsName} {...extra} style={{ display }}>
             <a tabIndex={-1} title={name} {...events}>
-                {render ? render() : name}
+                {render ? render(props) : name}
             </a>
         </div>
     );

src/workbench/statusBar/item.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Icon } from 'mo/components/icon';
+export function ProblemsMarkers(props: any) {
+    const { data = { errors: 0, warnings: 0, infos: 0 } } = props;
+    return (
+        <React.Fragment>
+            <Icon type="error" />
+            {` ${data.errors} `}
+            <Icon type="warning" />
+            {` ${data.warnings} `}
+            <Icon type="info" />
+            {` ${data.infos}`}
+        </React.Fragment>
+    );
+}

src/workbench/statusBar/problems/index.tsx

@@ -13,6 +13,7 @@
 
     &__left-items,
     &__right-items {
+        align-items: center;
         display: flex;
         height: 100%;
     }