feat: resovle #37

Author: mumiao

src/model/workbench/editor.ts

@@ -10,39 +10,39 @@ export enum EditorEvent {
     OpenTab = 'editor.openTab',
     OnSelectTab = 'editor.selectTab',
 }
-export interface IEditor {
+export interface IEditor<T> {
     current: IEditorGroup | undefined;
     groups: IEditorGroup[];
     closeAll?: () => void;
     onCloseTab?: (tabKey?: string, group?: number) => void;
     render?: () => React.ReactNode;
-    onMoveTab?: (tabs: ITab[], group?: number) => void;
+    onMoveTab?: (tabs: ITab<T>[], group?: number) => void;
     onSelectTab?: (tabKey: string, group?: number) => void;
 }
 
-export interface IEditorGroup<E = any> {
+export interface IEditorGroup<E = any, T = any> {
     id: number;
-    activeTab: ITab;
-    tabs: ITab[];
+    activeTab: ITab<T>;
+    tabs: ITab<T>[];
     breadcrumb: any[];
     actions: any[];
     menu: any[];
     editorInstance?: E | null;
 }
 
-export class EditorGroupModel implements IEditorGroup {
+export class EditorGroupModel<T> implements IEditorGroup<T> {
     id: number;
-    activeTab: ITab;
-    tabs: ITab[];
+    activeTab: ITab<T>;
+    tabs: ITab<T>[];
     breadcrumb: any[];
     actions: any[];
     menu: any[];
     editorInstance: any;
 
     constructor(
         id: number,
-        activeTab: ITab,
-        tabs: ITab[],
+        activeTab: ITab<T>,
+        tabs: ITab<T>[],
         breadcrumb: any[] = [],
         actions: any[] = [],
         menu: any[] = [],
@@ -60,7 +60,7 @@ export class EditorGroupModel implements IEditorGroup {
 
 @observable()
 @injectable()
-export class EditorModel implements IEditor {
+export class EditorModel<T> implements IEditor<T> {
     public current: IEditorGroup | undefined;
     public groups!: IEditorGroup[];
 
@@ -78,7 +78,7 @@ export class EditorModel implements IEditor {
     public readonly onSelectTab = (tabKey: string, groupId?: number) => {
         EventBus.emit(EditorEvent.OnSelectTab, tabKey, groupId);
     };
-    public readonly onMoveTab = (updateTabs: ITab[], groupId?: number) => {
+    public readonly onMoveTab = (updateTabs: ITab<T>[], groupId?: number) => {
         EventBus.emit(EditorEvent.OnMoveTab, updateTabs, groupId);
     };
     public readonly onCloseTab = (tabKey?: string, groupId?: number) => {

src/services/index.ts

@@ -32,7 +32,7 @@ const activityBarService = container.resolve<IActivityBarService>(
 const explorerService = container.resolve<IExplorerService>(ExplorerService);
 const sidebarService = container.resolve<ISidebarService>(SidebarService);
 const menuBarService = container.resolve<IMenuBarService>(MenuBarService);
-const editorService = container.resolve<IEditorService>(EditorService);
+const editorService = container.resolve<IEditorService<any>>(EditorService);
 const statusBarService = container.resolve<IStatusBarService>(StatusBarService);
 
 /**

src/services/workbench/editorService.ts

@@ -11,23 +11,23 @@ import {
     IEditorGroup,
 } from 'mo/model';
 
-export interface IEditorService extends Component<IEditor> {
+export interface IEditorService<T> extends Component<IEditor<T>> {
     /**
      * Open a new tab in indicated group instance
      * @param tab Tab data
      * @param groupId group ID
      */
-    open<T = any>(tab: ITab, groupId?: number): void;
+    open<T = any>(tab: ITab<T>, groupId?: number): void;
     onCloseTab(callback: (tabKey?: string) => void);
-    onMoveTab(callback: (tabs: ITab[]) => void);
+    onMoveTab(callback: (tabs: ITab<T>[]) => void);
     onSelectTab(callback: (tabKey: string) => void);
 }
 
 @singleton()
-export class EditorService
-    extends Component<IEditor>
-    implements IEditorService {
-    protected state: IEditor;
+export class EditorService<T>
+    extends Component<IEditor<T>>
+    implements IEditorService<T> {
+    protected state: IEditor<T>;
     constructor() {
         super();
         this.state = container.resolve(EditorModel);
@@ -51,7 +51,7 @@ export class EditorService
     }
 
     @emit(EditorEvent.OpenTab)
-    public open<T>(tab: ITab, groupId?: number) {
+    public open<T>(tab: ITab<T>, groupId?: number) {
         let { current, groups } = this.state;
         let group: IEditorGroup | undefined = current;
         if (groupId) {
@@ -71,7 +71,7 @@ export class EditorService
     public onMoveTab(callback: (data) => void) {
         this.subscribe(
             EditorEvent.OnMoveTab,
-            (tabs: ITab[], groupId?: number) => {
+            (tabs: ITab<T>[], groupId?: number) => {
                 let { groups } = this.state;
                 let group;
                 if (groupId === undefined) return;

src/workbench/editor/editor.tsx

@@ -92,7 +92,7 @@ export function renderGroups(
     return null;
 }
 
-export function Editor(props: IEditor) {
+export function Editor<T>(props: IEditor<T>) {
     const {
         groups,
         render,

stories/workbench/0-Workbench.stories.tsx

@@ -5,7 +5,7 @@ import '../demo.scss';
 
 export const IDEDemo = () => (
     <MoleculeProvider extensions={customExtensions} locales={[]}>
-        <Workbench />
+        <Workbench/>
     </MoleculeProvider>
 );