refactor(activitybar): update the ActivityBarService interfaces (#289)

* refactor: rename the activityService addBar to add * refactor: rename ActivityBarService toggleContextMenuCheckedStatus to toggleContextMenuChecked * docs: correct the grammar of comments
DTStack · Aug 3, 2021 · a400950 · a400950
1 parent e5f4b59
commit a400950
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 27 deletions.
diff --git a/src/controller/activityBar.ts b/src/controller/activityBar.ts
@@ -85,7 +85,6 @@ export class ActivityBarController
         );
     };
 
-    // TODO: Menu 按钮是否提取至 activityBar 外
     public readonly onContextMenuClick = (
         e: React.MouseEvent,
         item: IMenuItemProps | undefined
@@ -95,17 +94,13 @@ export class ActivityBarController
             // activityBar contextMenu
             case CONTEXT_MENU_MENU: {
                 this.menuBarController.updateMenuBar!();
-                this.activityBarService.toggleContextMenuCheckStatus(
-                    contextMenuId
-                );
+                this.activityBarService.toggleContextMenuChecked(contextMenuId);
                 break;
             }
             case CONTEXT_MENU_EXPLORER:
             case CONTEXT_MENU_SEARCH: {
                 this.activityBarService.toggleBar(contextMenuId);
-                this.activityBarService.toggleContextMenuCheckStatus(
-                    contextMenuId
-                );
+                this.activityBarService.toggleContextMenuChecked(contextMenuId);
                 break;
             }
             case CONTEXT_MENU_HIDE: {

diff --git a/src/controller/explorer/explorer.tsx b/src/controller/explorer/explorer.tsx
@@ -82,7 +82,7 @@ export class ExplorerController
             },
         };
 
-        this.activityBarService.addBar(builtInExplorerActivityItem(), true);
+        this.activityBarService.add(builtInExplorerActivityItem(), true);
         this.sidebarService.add(explorePane, true);
         // add folder panel
         this.explorerService.addPanel({

diff --git a/src/controller/search/search.tsx b/src/controller/search/search.tsx
@@ -79,7 +79,7 @@ export class SearchController extends Controller implements ISearchController {
         });
 
         this.sidebarService.add(searchSidePane);
-        this.activityBarService.addBar(builtInSearchActivityItem());
+        this.activityBarService.add(builtInSearchActivityItem());
     }
 
     public validateValue = (

diff --git a/src/extensions/activityBar/index.ts b/src/extensions/activityBar/index.ts
@@ -7,7 +7,7 @@ import { CommandQuickSideBarViewAction } from 'mo/monaco/quickToggleSideBarActio
 export const ExtendsActivityBar: IExtension = {
     activate(extensionCtx: IExtensionService) {
         const { data = [], contextMenu = [] } = builtInActivityBar();
-        molecule.activityBar.addBar(data);
+        molecule.activityBar.add(data);
         molecule.activityBar.addContextMenu(contextMenu);
 
         molecule.activityBar.onChange((pre, cur) => {

diff --git a/src/services/workbench/activityBarService.ts b/src/services/workbench/activityBarService.ts
@@ -13,23 +13,44 @@ import logger from 'mo/common/logger';
 import { ISidebarService, SidebarService } from './sidebarService';
 
 export interface IActivityBarService extends Component<IActivityBar> {
+    /**
+     * Reset the activityBar state data,
+     * if you want to whole customize the activityBar, you can reset it first,
+     * and then using the activityBar.add() method to fill the data you need.
+     */
     reset(): void;
     /**
-     *
+     * Add IActivityBarItem data
      * @param isActive If provide, Activity Bar will set data active automatically. Only works in one data
      */
-    addBar(
-        data: IActivityBarItem | IActivityBarItem[],
-        isActive?: boolean
-    ): void;
+    add(data: IActivityBarItem | IActivityBarItem[], isActive?: boolean): void;
     /**
-     * set active bar
+     * Set active bar
      */
     setActive(id?: string): void;
+    /**
+     * Remove the specific activity bar by id
+     * @param id
+     */
     remove(id: string): void;
+    /**
+     * Toggle the specific activity bar between show or hide
+     * @param id activity bar id
+     */
     toggleBar(id: string): void;
-    toggleContextMenuCheckStatus(id: string): void;
-    addContextMenu(contextMenu: IMenuItemProps | IMenuItemProps[]): void;
+    /**
+     * Toggle the contextMenu between checked or unchecked
+     * @param id contextmenu id
+     */
+    toggleContextMenuChecked(id: string): void;
+    /**
+     * Add new contextMenus for the activityBar
+     */
+    addContextMenu(data: IMenuItemProps | IMenuItemProps[]): void;
+    /**
+     * Remove the specific contextMenu item by id
+     * @param id contextmenu id
+     */
     removeContextMenu(id: string): void;
     /**
      * Add click event listener
@@ -69,10 +90,7 @@ export class ActivityBarService
         });
     }
 
-    public addBar(
-        data: IActivityBarItem | IActivityBarItem[],
-        isActive = false
-    ) {
+    public add(data: IActivityBarItem | IActivityBarItem[], isActive = false) {
         let next = [...this.state.data!];
         if (Array.isArray(data)) {
             next = next?.concat(data);
@@ -119,7 +137,7 @@ export class ActivityBarService
         }
     }
 
-    public toggleContextMenuCheckStatus(id: string) {
+    public toggleContextMenuChecked(id: string) {
         const { contextMenu = [] } = this.state;
         const newActions = contextMenu.concat();
         const target = newActions.find(searchById(id));
@@ -129,7 +147,10 @@ export class ActivityBarService
                 contextMenu: newActions,
             });
         } else {
-            logger.error('toggle context menu failed, please check your id');
+            throw new Error(
+                'Toggle the contextmenu failed, can not found any menu by id' +
+                    id
+            );
         }
     }
 

diff --git a/stories/extensions/data-sync/index.tsx b/stories/extensions/data-sync/index.tsx
@@ -9,6 +9,6 @@ export const ExtendDataSync: IExtension = {
             name: '数据同步',
         };
         console.log('extend a new activity bar item:', newItem);
-        molecule.activityBar.addBar(newItem);
+        molecule.activityBar.add(newItem);
     },
 };
diff --git a/stories/extensions/test/index.tsx b/stories/extensions/test/index.tsx
@@ -29,7 +29,7 @@ export const ExtendTestPane: IExtension = {
             name: '测试',
         };
 
-        molecule.activityBar.addBar(newItem);
+        molecule.activityBar.add(newItem);
         molecule.sidebar.add(testSidePane);
 
         molecule.editor.setEntry(<Entry />);

diff --git a/stories/extensions/test/testPane.tsx b/stories/extensions/test/testPane.tsx
@@ -72,7 +72,7 @@ export default class TestPane extends React.Component {
     render() {
         const addABar = function () {
             const id = Math.random() * 10 + 1;
-            molecule.activityBar.addBar({
+            molecule.activityBar.add({
                 id: id + '',
                 name: 'folder' + id,
                 iconName: 'codicon-edit',