feat: add contextView and actionBar examples

Author: wewoor

src/model/workbench/sidebar.ts

@@ -2,29 +2,29 @@ import { observable } from 'mo/common/observable';
 import { container, inject, injectable } from 'tsyringe';
 
 export interface ISidebarPane {
-    id?: string;
-    name?: string;
-    render?: () => React.ReactElement | undefined;
+    id: string;
+    title?: string;
+    render?: () => React.ReactNode;
 }
 
 export interface ISidebar {
-    selected: string;
-    panes: ISidebarPane[];
+    current: string;
+    panes?: ISidebarPane[];
     render?: () => React.ReactNode;
 }
 
 @observable()
 @injectable()
 export class SidebarModel implements ISidebar {
-    public selected: string;
+    public current: string;
     public panes: ISidebarPane[];
 
     constructor(
         @inject('SidebarPane') panes: ISidebarPane[] = [],
         @inject('Selected') selected: string = ''
     ) {
         this.panes = panes;
-        this.selected = selected;
+        this.current = selected;
     }
 
     public render!: () => React.ReactNode;

src/services/workbench/sidebarService.ts

@@ -1,6 +1,5 @@
 import { Component } from 'mo/react';
 import { singleton, container } from 'tsyringe';
-import { emit } from '../../common/event';
 import {
     ISidebar,
     ISidebarPane,
@@ -22,7 +21,7 @@ export enum SideBarEvent {
 }
 
 export interface ISidebarService extends Component<ISidebar> {
-    push(data: ISidebarPane | ISidebarPane[]): void;
+    push(data: ISidebarPane): void;
 }
 
 @singleton()
@@ -36,14 +35,8 @@ export class SidebarService
         this.state = container.resolve(SidebarModel);
     }
 
-    @emit(SideBarEvent.DataChanged)
-    public push(data: ISidebarPane | ISidebarPane[]) {
-        let original = this.state.panes;
-        if (Array.isArray(data)) {
-            // The concat will lost proxy object info
-            original = original.concat(data);
-        } else {
-            original.push(data);
-        }
+    public push(data: ISidebarPane) {
+        const original = this.state.panes;
+        original?.push(data);
     }
 }

src/style/main.scss

@@ -14,7 +14,6 @@
     right: 0;
     top: 0;
     user-select: none;
-    user-select: none;
     width: 100%;
 }
 

src/style/theme.scss

@@ -65,3 +65,8 @@
 
 // .monaco-workbench .codicon {
 // }
+
+#{prefix('action-bar')} {
+    background-color: rgb(37, 37, 38);
+    color: rgb(204, 204, 204);
+}

src/workbench/sidebar/index.tsx

@@ -1,8 +1,7 @@
 import 'mo/workbench/menuBar/style.scss';
-import Sidebar from './sidebar';
+export * from './sidebar';
+import { Sidebar } from './sidebar';
 import { sidebarService } from 'mo/services';
 import { mapState } from 'mo/react';
 
-const SidebarView = mapState(Sidebar, sidebarService.getState());
-
-export { Sidebar, SidebarView };
+export const SidebarView = mapState(Sidebar, sidebarService.getState());

src/workbench/sidebar/sidebar.tsx

@@ -1,27 +1,47 @@
 import 'mo/workbench/sidebar/style.scss';
 import * as React from 'react';
+import { memo } from 'react';
 import { prefixClaName } from 'mo/common/className';
 import { ISidebar, ISidebarPane } from 'mo/model/workbench/sidebar';
 
-function Sidebar(props: ISidebar) {
-    const { panes = [], render } = props;
+export interface IHeaderProps {
+    title: string;
+    toolbar: React.ReactNode;
+}
+
+export const Header = memo<IHeaderProps>(function Header(props: IHeaderProps) {
+    return (
+        <header className={'pane-header'}>
+            <div className={'pane-title'}>
+                <h2>{props.title}</h2>
+            </div>
+            <div className={'pane-toolbar'}>
+                { props.toolbar || null }
+            </div>
+        </header>
+    )
+});
+
+export function Content(props: React.ComponentProps<any>) {
+    return (
+        <div className="pane-content">
+            {props.children}
+        </div>
+    )
+}
+
+export function Sidebar(props: ISidebar) {
+    const { panes = [], render, current } = props;
 
     let sidebarPane: React.ReactNode = panes?.map((pane: ISidebarPane) => {
         return (
             <div
                 key={pane.id}
                 data-id={pane.id}
+                style={{ display: pane.id === current ? 'block' : 'none' }}
                 className={prefixClaName('pane', 'sidebar')}
             >
-                <header className={'pane-header'}>
-                    <div className={'pane-title'}>
-                        <h2>{pane.name}</h2>
-                    </div>
-                    <div className={'pane-toolbar'}></div>
-                </header>
-                <div className="pane-content">
-                    {pane.render ? pane.render() : null}
-                </div>
+                { pane.render ? pane.render() : null }
             </div>
         );
     });
@@ -31,6 +51,4 @@ function Sidebar(props: ISidebar) {
     }
 
     return <div className={prefixClaName('sidebar')}>{sidebarPane}</div>;
-}
-
-export default Sidebar;
+}

src/workbench/sidebar/style.scss

@@ -49,4 +49,9 @@
         right: 0;
         top: 0;
     }
+
+    .pane-toolbar {
+        flex: 1;
+        padding-left: 5px;
+    }
 }

src/workbench/workbench.tsx

@@ -45,7 +45,7 @@ export function MainBench(props: IMainBench) {
 
 export function Workbench(props: IWorkbench) {
     return (
-        <div className={classNames(APP_PREFIX, Utils.isMacOs() ? 'mac' : '')}>
+        <div id="molecule" className={classNames(APP_PREFIX, Utils.isMacOs() ? 'mac' : '')}>
             <div className={prefixClaName('workbench')}>
                 <MenuBarView />
                 <ActivityBarView />