feat: activityBar selected

Author: wewoor

src/extensions/activityBar/index.tsx

@@ -1,6 +1,6 @@
 import {
     IExtensionService, activityBarService,
-    ActivityBarEvent, IActivityBarItem,
+    IActivityBarItem,
 } from 'mo';
 import { IExtension } from 'mo/model/extension';
 
@@ -10,26 +10,27 @@ function initActivityBar(extensionCtx: IExtensionService) {
         name: 'Settings',
         iconName: 'codicon-settings-gear',
         type: 'global',
-        onClick: function(e, options) {
-
-        },
     };
 
     const globalUserAccount: IActivityBarItem = {
         id: 'global-Account',
         name: 'Account',
         iconName: 'codicon-account',
         type: 'global',
-        onClick: function(e, options) {
-
-        },
     };
 
     activityBarService.push(globalUserAccount);
     activityBarService.push(globalSettings);
 
-    activityBarService.subscribe(ActivityBarEvent.OnClick, (data) => {
-        console.log('Explore activityBar subscribe onClick:', data);
+    activityBarService.onClick((data) => {
+        const target = data[0].target;
+        // activityBarService.updateState({ selected: 'search' });
+        console.log('activityBar onClick:', data, target);
+    });
+
+    activityBarService.onSelect((data) => {
+        const target = data[0].target;
+        console.log('activityBar onSelect:', data, target);
     });
 }
 

src/extensions/explore/explore.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Collapse, { Panel } from 'mo/components/collapse';
 import { prefixClaName } from 'mo/common/className';
-import { activityBarService, editorService, ActivityBarEvent } from 'mo/index';
+import { activityBarService, editorService } from 'mo';
 
 interface IExplorerProps {
 }
@@ -30,11 +30,6 @@ export const Explorer: React.FunctionComponent<IExplorerProps> = (IExplorerProps
     const OpenCommand = function() {
         // MonacoEditor.editor.getModel().
     };
-
-    activityBarService.subscribe(ActivityBarEvent.OnClick, (data) => {
-        console.log('Explore activityBar subscribe onClick:', data);
-    });
-
     return (
         <div className={prefixClaName('explorer', 'sidebar')}>
             <Collapse className="dee">

src/extensions/explore/index.tsx

@@ -6,15 +6,19 @@ import { ExtensionService } from 'mo/services/extensionService';
 import { IExtension } from 'mo/model/extension';
 
 function initActivityBar(extensionCtx: ExtensionService) {
+    const activeId = 'active-explorer';
+    const state = activityBarService.getState();
     const folderFeat: IActivityBarItem = {
-        id: 'active-explorer',
+        id: activeId,
         name: 'Explore',
         iconName: 'codicon-files',
-        onClick: function(e, options) {
-
-        },
     };
-    activityBarService.push(folderFeat);
+    // activityBarService.push(folderFeat);
+    // state.data?.push(folderFeat);
+    // state.selected = activeId;
+    activityBarService.updateState({
+        selected: activeId, data: [...state.data, folderFeat],
+    });
 
     activityBarService.subscribe(ActivityBarEvent.OnClick, (data) => {
         console.log('Explore activityBar subscribe onClick:', data);

src/model/workbench/activityBar.ts

@@ -32,7 +32,7 @@ export interface IActivityBarItem {
 }
 
 export interface IActivityBar {
-    data: IActivityBarItem[];
+    data?: IActivityBarItem[];
     selected?: string;
     onSelect?: (key: string, item?: IActivityBarItem) => void;
     onClick?: (event: React.MouseEvent, item: IActivityBarItem) => void;
@@ -56,7 +56,6 @@ export class ActivityBarModel implements IActivityBar {
     public render!: () => React.ReactNode;
 
     public readonly onSelect = (key: string, item?: IActivityBarItem | undefined) => {
-        this.selected = key;
         EventBus.emit(ActivityBarEvent.Selected, key, item);
     }
 

src/react/component.ts

@@ -1,10 +1,12 @@
 import { GlobalEvent } from 'mo/common/event';
+import logger from 'mo/common/logger';
 
 export abstract class Component<S> extends GlobalEvent {
     protected abstract state: S;
 
     public updateState(nextState: S) {
         Object.assign(this.state, nextState);
+        logger.info(`Component.updateState()`, nextState, this.state);
     }
 
     public getState(): S {

src/services/workbench/activityBarService.ts

@@ -6,6 +6,12 @@ export interface IActivityBarService extends Component<IActivityBar> {
     reset(): void;
     push(data: IActivityBarItem): void;
     remove(index: number) : void;
+    /**
+     * Add click event listener
+     * @param callback
+     */
+    onClick(callback: Function);
+    onSelect(callback: Function);
 }
 
 @singleton()
@@ -26,7 +32,7 @@ export class ActivityBarService extends Component<IActivityBar> implements IActi
 
     public push(data: IActivityBarItem) {
         const original = this.state.data;
-        original.push(data);
+        original?.push(data);
         console.log('ac push:', original);
     }
 
@@ -38,14 +44,24 @@ export class ActivityBarService extends Component<IActivityBar> implements IActi
     }
 
     public setRenderer(renderer: () => React.ReactNode) {
-        // this.updateState(Object.assign(this.state, {
-        //     render: renderer,
-        // }));
         // eslint-disable-next-line react/no-direct-mutation-state
         this.state.render = renderer;
     }
 
     public onClick(callback: Function) {
         this.subscribe(ActivityBarEvent.OnClick, callback);
     }
+
+    public onSelect(callback: Function) {
+        this.subscribe(ActivityBarEvent.Selected, (args) => {
+            const key = args[0];
+            const item: IActivityBarItem = args[1];
+            if (item.type !== 'global') {
+                this.updateState({
+                    selected: key,
+                });
+            }
+            if (callback) callback(key, item);
+        });
+    }
 }

src/workbench/activityBar/activityBar.tsx

@@ -7,7 +7,7 @@ import { IActivityBar, IActivityBarItem } from 'mo/model/workbench/activityBar';
 import ActivityBarItem from './activityBarItem';
 
 export function ActivityBar(props: IActivityBar) {
-    const { data = [], render, selected, onClick } = props;
+    const { data = [], render, selected, onClick, onSelect } = props;
 
     if (render) {
         return (
@@ -17,20 +17,25 @@ export function ActivityBar(props: IActivityBar) {
         );
     }
 
+    const onClickBar = (e: React.MouseEvent, item: IActivityBarItem) => {
+        console.log('ActivityBar onClick:', e);
+        if (onClick) onClick(e, item);
+        if (onSelect) {
+            onSelect(item.id || '', item);
+        }
+    };
+
     const normalBarItems = data?.filter((item: IActivityBarItem) => !item.type || item.type === 'normal') || [];
     const globalBarItems = data?.filter((item: IActivityBarItem) => item.type && item.type === 'global') || [];
 
-    const renderItems = (item: IActivityBarItem, index: number) => (
-        <ActivityBarItem key={item.id} {...item} data-index={index} checked={selected === item.id}/>
-    );
-
-    const click = (e: React.MouseEvent) => {
-        console.log('ActivityBar onClick:', e);
-        if (onClick) onClick(e, {} as any );
+    const renderItems = (item: IActivityBarItem, index: number) => {
+        return (
+            <ActivityBarItem key={item.id} {...item} onClick={onClickBar} data-index={index} checked={selected === item.id}/>
+        );
     };
 
     return (
-        <div className={prefixClaName(ID_ACTIVITY_BAR)} id={ID_ACTIVITY_BAR} onClick={click}>
+        <div className={prefixClaName(ID_ACTIVITY_BAR)} id={ID_ACTIVITY_BAR}>
             <div className={prefixClaName('container', ID_ACTIVITY_BAR)}>
                 <ul className={'normal-items'}>
                     {normalBarItems.map(renderItems)}