feat: refactor service interface

Author: mumiao

src/components/tabs/index.tsx

@@ -11,22 +11,23 @@ import './style.scss';
 
 export interface ITab {
     id?: number | string;
-    name?: string; // fileName
-    activeTab?: number; // activeTab
-    modified?: boolean; // modify file
+    name?: string;
+    activeTab?: number;
+    modified?: boolean;
     renderPane?: () => React.ReactNode;
     value?: string;
+    mode?: string | undefined;
 }
 export interface ITabsProps {
     data: ITab[];
     closeTab?: (item: ITab) => void;
     onMoveTab?: (tabs: ITab[]) => void;
-    selectTab?: (index: number) => void;
+    onSelectTab?: (index: number) => void;
     onTabChange: (index: number) => void;
 }
 
 const DraggleTabs = (props: ITabsProps) => {
-    const { data, selectTab } = props;
+    const { data, onSelectTab } = props;
 
     const onMoveTab = useCallback(
         (dragIndex, hoverIndex) => {
@@ -45,7 +46,7 @@ const DraggleTabs = (props: ITabsProps) => {
 
     const onTabClick = (key) => {
         console.log(`onTabClick ${key}`);
-        selectTab?.(key);
+        onSelectTab?.(key);
     };
 
     const onTabClose = (item: ITab) => {};

src/extensions/explore/index.tsx

@@ -27,8 +27,8 @@ function init(extensionCtx: ExtensionService) {
     editorService.onMoveTab((data) => {
         console.log(data);
     });
-    editorService.selectTab((tab) => {
-        console.log(`selected tabs${tab}`);
+    editorService.onSelectTab((tabKey) => {
+        console.log(`selected tabKey${tabKey}`);
     });
     const explorePane = {
         id: 'explore',

src/extensions/search/index.tsx

@@ -39,8 +39,8 @@ function init() {
     editorService.onMoveTab((data) => {
         console.log(data);
     });
-    editorService.selectTab((tab) => {
-        console.log(`selected tabs${tab}`);
+    editorService.onSelectTab((tab) => {
+        console.log(`selected tabKey${tab}`);
     });
 }
 

src/model/workbench/editor.ts

@@ -6,18 +6,18 @@ import { container, inject, injectable } from 'tsyringe';
 
 export enum EditorEvent {
     CloseTab = 'editor.close',
-    onMoveTab = 'editor.moveTab',
+    OnMoveTab = 'editor.moveTab',
     OpenTab = 'editor.openTab',
-    SelectTab = 'editor.selectTab',
+    OnSelectTab = 'editor.selectTab',
 }
 export interface IEditor {
     current: IEditorGroup | undefined;
     groups: IEditorGroup[];
     closeAll?: () => void;
     onClose?: () => void;
     render?: () => React.ReactNode;
-    onMoveTab: (tabs: ITab[], group?: number) => void;
-    selectTab: (tab: ITab) => void;
+    onMoveTab?: (tabs: ITab[], group?: number) => void;
+    onSelectTab?: (tabKey: number) => void;
 }
 
 export interface IEditorGroup<E = any> {
@@ -73,15 +73,14 @@ export class EditorModel implements IEditor {
     }
     closeAll?: (() => void) | undefined;
     onClose?: (() => void) | undefined;
-    onMoveTab: (tabs: ITab[], group?: number | undefined) => void;
 
     public render!: () => React.ReactNode;
 
-    public readonly selectTab = (tab: ITab) => {
-        EventBus.emit(EditorEvent.onMoveTab, tab);
+    public readonly onselectTab = (tabKey: number) => {
+        EventBus.emit(EditorEvent.OnSelectTab, tabKey);
     };
-    public readonly changeTab = (updateTabs: ITab[], groupId?: number) => {
-        EventBus.emit(EditorEvent.onMoveTab, updateTabs, groupId);
+    public readonly onMoveTab = (updateTabs: ITab[], groupId?: number) => {
+        EventBus.emit(EditorEvent.OnMoveTab, updateTabs, groupId);
     };
 }
 

src/services/workbench/editorService.ts

@@ -20,7 +20,7 @@ export interface IEditorService extends Component<IEditor> {
     open<T = any>(tab: ITab, groupId?: number): void;
     close(index: number, callback: () => void): void;
     onMoveTab(callback: (tabs: ITab[]) => void);
-    selectTab(callback: (tab: ITab) => void);
+    onSelectTab(callback: (tabKey: number) => void);
 }
 
 @singleton()
@@ -32,6 +32,12 @@ export class EditorService
         super();
         this.state = container.resolve(EditorModel);
     }
+    onSelectTab(callback: (tabKey: number) => void) {
+        this.subscribe(EditorEvent.OnSelectTab, (args) => {
+            callback?.(args?.[0]);
+        });
+    }
+
     @emit(EditorEvent.OpenTab)
     public open<T>(tab: ITab, groupId?: number) {
         let { current, groups } = this.state;
@@ -49,7 +55,7 @@ export class EditorService
         }
     }
     public onMoveTab(callback: (data) => void) {
-        this.subscribe(EditorEvent.onMoveTab, (args) => {
+        this.subscribe(EditorEvent.OnMoveTab, (args) => {
             let { groups } = this.state;
             let group;
             if (!args?.[1]) return;
@@ -59,9 +65,6 @@ export class EditorService
             callback?.(args?.[0]);
         });
     }
-    public selectTab(callback: Function) {
-        this.subscribe(EditorEvent.SelectTab, callback);
-    }
     public closeAll() {}
 
     @emit(EditorEvent.CloseTab)

src/workbench/editor/editor.tsx

@@ -9,7 +9,7 @@ import Tabs from 'mo/components/tabs';
 import Welcome from './welcome';
 import { IEditor, IEditorGroup } from 'mo/model';
 
-function renderEditorGroup(group: IEditorGroup, onMoveTab, selectTab) {
+function renderEditorGroup(group: IEditorGroup, onMoveTab, onSelectTab) {
     const editor = group.activeTab;
     return (
         <div className={`editor-group`} key={`group-${group.id}`}>
@@ -18,7 +18,7 @@ function renderEditorGroup(group: IEditorGroup, onMoveTab, selectTab) {
                     <Tabs
                         data={group.tabs}
                         onMoveTab={onMoveTab}
-                        onTabChange={selectTab}
+                        onTabChange={onSelectTab}
                     />
                 </div>
                 <div className="group-breadcrumbs"></div>
@@ -47,9 +47,9 @@ function renderEditorGroup(group: IEditorGroup, onMoveTab, selectTab) {
     );
 }
 
-export function renderGroups(groups: IEditorGroup[], onMoveTab, selectTab) {
+export function renderGroups(groups: IEditorGroup[], onMoveTab, onSelectTab) {
     if (groups.length === 1) {
-        return renderEditorGroup(groups[0], onMoveTab, selectTab);
+        return renderEditorGroup(groups[0], onMoveTab, onSelectTab);
     } else if (groups.length > 1) {
         const averageNum = Math.round(100 / groups.length);
         return (
@@ -60,7 +60,7 @@ export function renderGroups(groups: IEditorGroup[], onMoveTab, selectTab) {
                 allowResize={true}
             >
                 {groups.map((g: IEditorGroup) =>
-                    renderEditorGroup(g, onMoveTab, selectTab)
+                    renderEditorGroup(g, onMoveTab, onSelectTab)
                 )}
             </SplitPane>
         );
@@ -69,13 +69,13 @@ export function renderGroups(groups: IEditorGroup[], onMoveTab, selectTab) {
 }
 
 export function Editor(props: IEditor) {
-    const { groups, render, current, onMoveTab, selectTab } = props;
+    const { groups, render, current, onMoveTab, onSelectTab } = props;
     console.log('Editor render:', props);
     let content: React.ReactNode = <Welcome />;
     if (current) {
         content = render
             ? render()
-            : renderGroups(groups, (tabs) => onMoveTab(tabs, 1), selectTab);
+            : renderGroups(groups, (tabs) => onMoveTab?.(tabs, 1), onSelectTab);
     }
 
     return <div className={prefixClaName('editor')}>{content}</div>;