feat: add testing sidebar panel

stories/extensions/index.ts

@@ -1,4 +1,6 @@
 import { IExtension } from 'mo/model/extension';
 import { ExtendDataSync } from './data-sync';
 
-export const customExtensions: IExtension[] = [ExtendDataSync];
+import { ExtendTestPane } from './test';
+
+export const customExtensions: IExtension[] = [ExtendDataSync, ExtendTestPane];

stories/extensions/test/index.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { activityBarService, IActivityBarItem, sidebarService } from 'mo';
+import { IExtension } from 'mo/model/extension';
+
+import TestPane from './testPane';
+
+export const ExtendTestPane: IExtension = {
+    activate() {
+        const testSidePane = {
+            id: 'testPane',
+            title: 'TEST',
+            render() {
+                return <TestPane />;
+            },
+        };
+
+        sidebarService.push(testSidePane);
+        const newItem = {
+            id: 'ActivityBarTestPane',
+            iconName: 'codicon-beaker',
+            name: '测试',
+        };
+        activityBarService.addBar(newItem);
+
+        activityBarService.onSelect((e, item: IActivityBarItem) => {
+            if (item.id === newItem.id) {
+                sidebarService.setState({
+                    current: testSidePane.id,
+                });
+            }
+        });
+    },
+};

stories/extensions/test/testPane.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import {
+    activityBarService,
+    colorThemeService,
+    editorService,
+    panelService,
+} from 'mo';
+import { Button } from 'mo/components/button';
+import { Select, Option } from 'mo/components/select';
+import { IColorTheme } from 'mo/model/colorTheme';
+import { IEditorTab } from 'mo/model';
+
+export default class TestPane extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    onClick = (e, item) => {
+        console.log('onClick:', e, item);
+    };
+
+    onChangeTheme = (e, option) => {
+        if (option && option.value) {
+            console.log('onChangeTheme:', option.value);
+            colorThemeService.applyTheme(option.value);
+        }
+    };
+
+    renderColorThemes() {
+        const colorThemes = colorThemeService.getThemes();
+        const defaultTheme = colorThemeService.colorTheme;
+        const options = colorThemes.map((theme: IColorTheme) => {
+            return (
+                <Option key={theme.id} value={theme.id}>
+                    {theme.label}
+                </Option>
+            );
+        });
+        return (
+            <Select
+                defaultValue={defaultTheme.id}
+                onSelect={this.onChangeTheme}
+            >
+                {options}
+            </Select>
+        );
+    }
+
+    render() {
+        const addABar = function () {
+            const id = Math.random() * 10 + 1;
+            activityBarService.addBar({
+                id: id + '',
+                name: 'folder' + id,
+                iconName: 'codicon-edit',
+            });
+        };
+
+        const addPanel = function () {
+            const id = Math.random() * 10 + 1;
+            panelService.open({
+                id: 'Pane' + id,
+                name: 'Panel' + id,
+                label: 'test',
+                render: () => <h1>Test Pane</h1>,
+            });
+        };
+
+        const newEditor = function () {
+            const key = Math.random() * 10 + 1;
+            const tabData: IEditorTab = {
+                id: `${key}`,
+                name: `editor.js`,
+                modified: false,
+                data: {
+                    value: `hello javascript ${key}`,
+                    path: 'desktop/molecule/editor1',
+                    language: 'javascript',
+                },
+                breadcrumb: [{ id: `${key}`, name: 'editor.js' }],
+            };
+            console.log('open editor:', tabData);
+            editorService.open(tabData);
+        };
+
+        const openCommand = function () {};
+        return (
+            <div>
+                <div style={{ margin: '50px 20px' }}>
+                    <Button onClick={addABar}>Add Bar</Button>
+                    <Button onClick={newEditor}>New Editor</Button>
+                    <Button onClick={openCommand}>Command Palette</Button>
+                </div>
+                <div style={{ margin: '50px 20px' }}>
+                    <h1>Select a ColorTheme:</h1>
+                    {this.renderColorThemes()}
+                </div>
+                <div style={{ margin: '50px 20px' }}>
+                    <h2>Add a new Panel:</h2>
+                    <Button onClick={addPanel}>Add Panel</Button>
+                </div>
+            </div>
+        );
+    }
+}