feat: construct the workbench struct

src/components/scroller/style.scss

@@ -0,0 +1,4 @@
+.scroll {
+    width: 10px;
+    pointer-events: none;
+}

src/controller/molecule.tsx

@@ -1,75 +1,30 @@
 import * as React from 'react';
-import { IExtension } from '@/common/extension';
-import { ILocalization } from '@/common/localization';
+import { IExtension } from '@/core/extension';
+import { IMolecule } from '@/core/molecule';
+import { ILocalization } from '@/core/localization';
 import { ExtensionService } from '@/services/extensionService';
+import { ActivityBarService } from '@/services/activityBarService';
+import { MoleculeService } from '@/services/moleculeService';
+
+// TODO This way just for development
+import CustomizedActivityBar from '@/extensions/workbench-extension/src/app';
 
 interface IMoleculeProps {
     extensions: IExtension[];
     locales: ILocalization[];
 }
 
-interface IMoleculeState {
-    /**
-     * Workbench's status
-     */
-    workbench: object;
-    /**
-     * Loaded extensions
-     */
-    extensions: IExtension[];
-    /**
-     * Default user's setting
-     */
-    settings: object;
-     /**
-     * The current theme status
-     */
-    theme: string;
-    /**
-     * The icon theme for workbench
-     */
-    iconTheme: string;
-    /**
-     * Molecule's language
-     */
-    local: string;
-    /**
-     * IDE shortcut keys
-     */
-    shortcutKeys: object;
-}
-
-const DEFAULT_COLOR_THEME = 'light-vs';
-const DEFAULT_LOCALE_LANG = 'en-us';
-
-const initialState: IMoleculeState = {
-
-    workbench: {
-        editor: {
-            value: '',
-        },
-        panels: [],
-        terminal: null,
-    },
-
-    extensions: [],
+// const DEFAULT_COLOR_THEME = 'light-vs';
+// const DEFAULT_LOCALE_LANG = 'en-us';
 
-    settings: {},
+const initialState: IMolecule = new MoleculeService(
+    new ActivityBarService(),
+);
 
-    theme: DEFAULT_COLOR_THEME,
+export const MoleculeCtx = React.createContext(initialState);
 
-    iconTheme: '',
-
-    local: DEFAULT_LOCALE_LANG,
-
-    shortcutKeys: {},
-};
-
-const MoleculeCtx = React.createContext(initialState);
-
-export class MoleculeProvider
-    extends React.Component<IMoleculeProps, IMoleculeState> {
-    public state = initialState;
+export class MoleculeProvider extends React.Component<IMoleculeProps> {
+    public state: IMolecule = initialState;
 
     private extensionService: ExtensionService;
 
@@ -79,10 +34,9 @@ export class MoleculeProvider
         const { extensions, locales } = this.props;
         this.loadExtensions(extensions);
         this.loadLocales(locales);
-    }
-
-    public componentDidMount() {
-        console.log('Molecule componentDidMount.');
+        const ext = new CustomizedActivityBar();
+        ext.active(this.state);
+        console.log('Molecule constructed.');
     }
 
     public initMolecule() {
@@ -92,9 +46,10 @@ export class MoleculeProvider
     public loadExtensions(extensions: IExtension[]) {
         if (extensions) {
             // TODO register extension to memory, and
-            this.setState({
-                extensions: this.extensionService.getAll(extensions),
-            });
+            this.extensionService.getAll(extensions);
+            // this.setState({
+            //     extensions: this.extensionService.getAll(extensions),
+            // });
         }
     }
 

src/typings/index.d.ts

@@ -0,0 +1 @@
+export type ReactType = React.PureComponent | React.ReactElement | React.Component | React.FunctionComponent | null;

src/workbench/activityBar/activityBar.scss

@@ -1,10 +1,20 @@
 @import '@/style/const.scss';
 
-.#{$prefix}-activityBar {
+$activityBar: 'activityBar';
+
+.#{$prefix}-#{$activityBar} {
     position: absolute;
     width: 48px;
     height: 100%;
     z-index: 1;
     // TODO temp style, just for development
     background-color: rgb(51, 51, 51);
 }
+
+.#{$activityBar}-item {
+    position: relative;
+    width: 48px;
+    height: 48px;
+    z-index: 1;
+    display: flex;
+}

src/workbench/activityBar/index.tsx

@@ -1,15 +1,51 @@
 import * as React from 'react';
 
 import { prefixClaName } from '@/common/className';
+import { IActivityBarData, IActivityBar } from '@/core/activityBar';
 
 import './activityBar.scss';
 
-export const ActivityBar: React.FunctionComponent = function() {
+export interface IActivityBarProps {
+    activityBar: IActivityBar;
+}
+
+export const ROOT_CLASS_NAME = 'activityBar';
+
+export const ActivityBarItem = React.memo(function FnActivityBarItem(props: IActivityBarData) {
+    const { id, name = '', data = {}, render } = props;
+    if (render) {
+        return render();
+    }
+    return (
+        <a
+            className={prefixClaName('item', ROOT_CLASS_NAME)}
+            title={name} key={id}
+            data-item={data}
+        >
+            {name}
+        </a>
+    );
+});
+
+export const ActivityBar = React.memo(function FnActivityBar(props: IActivityBarProps) {
+    const { activityBar } = props;
+
+    let content = activityBar.data?.map((item: IActivityBarData) => (
+        <ActivityBarItem key={item.id} {...item}/>
+    ));
+    if (activityBar.render) {
+        content = activityBar.render();
+    }
+
+    const onClick = (e: React.MouseEvent) => {
+        activityBar.onClick(e, {} as any );
+    };
+
     return (
-        <div className={prefixClaName('activityBar')}>
-            ActivityBar
+        <div className={prefixClaName(ROOT_CLASS_NAME)} onClick={onClick}>
+            {content}
         </div>
     );
-};
+});
 
 export default ActivityBar;

src/workbench/index.tsx

@@ -11,20 +11,30 @@ import StatusBar from './statusBar';
 import Editor from './editor';
 import Panel from './panel';
 
+import { IMolecule } from '@/core/molecule';
+
 import './workbench.scss';
+import { MoleculeCtx } from '@/controller/molecule';
+
+export interface IWorkbenchProps {
+
+}
 
 const MainBench: React.FunctionComponent = function(props: any) {
     return (
         <div className={prefixClaName('mainBench')}>{props.children}</div>
     );
 };
 
-export const Workbench: React.FunctionComponent = function() {
+export const Workbench: React.FunctionComponent<IWorkbenchProps> = function(props: IWorkbenchProps) {
+    const moleculeCtx: IMolecule = React.useContext(MoleculeCtx);
+    const { activityBar } = moleculeCtx;
+
     return (
         <div className={APP_PREFIX + ' center'}>
             <div className={prefixClaName('workbench')}>
                 <MenuBar />
-                <ActivityBar />
+                <ActivityBar activityBar={activityBar}/>
                 <MainBench>
                     <SplitPane
                         split={'vertical'}