feat: add model layer and extract view interfaces to model file

Author: wewoor

src/model/activityBar.ts

@@ -0,0 +1,53 @@
+/* eslint-disable no-invalid-this */
+import { observable } from 'mo/common/observable';
+import { ActivityBarEvent, EventService } from 'mo/services';
+import { container, inject, injectable } from 'tsyringe';
+
+
+export interface IActivityBarItem {
+    id?: string;
+    name?: string;
+    data?: any;
+    iconName?: string;
+    checked?: boolean;
+    type?: 'normal' | 'global';
+    render?: () => React.ReactNode | JSX.Element;
+    onClick?: (event: React.MouseEvent, item: IActivityBarItem) => void;
+}
+
+export interface IActivityBar {
+    data: IActivityBarItem[];
+    selected?: string;
+    onSelect?: (key: string, item?: IActivityBarItem) => void;
+    onClick?: (event: React.MouseEvent, item: IActivityBarItem) => void;
+    render?: () => React.ReactNode;
+}
+
+@observable()
+@injectable()
+export class ActivityBarModel implements IActivityBar {
+    public data: IActivityBarItem[];
+    public selected: string;
+
+    constructor(
+        @inject('ActivityBarData') data: IActivityBarItem[] = [],
+        @inject('ActivityBarSelected') selected: string = '',
+    ) {
+        this.data = data;
+        this.selected = selected;
+    }
+
+    public render!: () => React.ReactNode;
+
+    public readonly onSelect = (key: string, item?: IActivityBarItem | undefined) => {
+        this.selected = key;
+        EventService.emit(ActivityBarEvent.Selected, key, item);
+    }
+
+    public readonly onClick = (event: React.MouseEvent, item: IActivityBarItem) => {
+        EventService.emit(ActivityBarEvent.OnClick, event, item);
+    }
+}
+
+container.register('ActivityBarData', { useValue: [] });
+container.register('ActivityBarSelected', { useValue: '' });

src/model/editor.ts

@@ -0,0 +1,71 @@
+/* eslint-disable no-invalid-this */
+import { observable } from 'mo/common/observable';
+import { ITab } from 'mo/components/tabs';
+import { container, inject, injectable } from 'tsyringe';
+
+
+export interface IEditor {
+    current: IEditorGroup | undefined;
+    groups: IEditorGroup [];
+    closeAll?: () => void;
+    onClose?: () => void;
+    render?:() => React.ReactNode;
+}
+
+export interface IEditorGroup<E = any> {
+    id: number;
+    activeTab: ITab;
+    tabs: ITab[];
+    breadcrumb: any[];
+    actions: any[];
+    menu: any[];
+    editorInstance?: E | null;
+}
+
+export class EditorGroupModel implements IEditorGroup {
+    id: number;
+    activeTab: ITab;
+    tabs: ITab[];
+    breadcrumb: any[];
+    actions: any[];
+    menu: any[];
+    editorInstance: any;
+
+    constructor(
+        id: number,
+        activeTab: ITab,
+        tabs: ITab[],
+        breadcrumb: any[] = [],
+        actions: any[] = [],
+        menu: any[] = [],
+        editorInstance?: any,
+    ) {
+        this.id = id;
+        this.tabs = tabs;
+        this.menu = menu;
+        this.actions = actions;
+        this.activeTab = activeTab;
+        this.breadcrumb = breadcrumb;
+        this.editorInstance = editorInstance;
+    }
+}
+
+@observable()
+@injectable()
+export class EditorModel implements IEditor {
+    public current: IEditorGroup | undefined;
+    public groups!: IEditorGroup[];
+
+    constructor(
+        @inject('CurrentEditorGroup') current?: IEditorGroup,
+            @inject('EditorGroup') groups: IEditorGroup[] = [],
+    ) {
+        this.current = current;
+        this.groups = groups;
+    }
+
+    public render!: () => React.ReactNode;
+}
+
+container.register('CurrentEditorGroup', { useValue: '' });
+container.register('EditorGroup', { useValue: [] });

src/model/editorGroup.ts

@@ -0,0 +1,5 @@
+export * from './activityBar';
+export * from './editor';
+export * from './menuBar';
+export * from './sidebar';
+export * from './statusBar';

src/model/index.ts

@@ -0,0 +1,35 @@
+import { observable } from 'mo/common/observable';
+import { container, injectable, inject } from 'tsyringe';
+
+export interface IMenuBarItem {
+    id?: string;
+    name?: string;
+    data?: any;
+    iconName?: string;
+    render?: () => React.ReactNode | JSX.Element;
+    onClick?:(e: React.MouseEvent, option: IMenuBarItem) => any;
+}
+
+export interface IMenuBar {
+    data: IMenuBarItem[];
+    onClick:(event: React.MouseEvent<any, any>, item: IMenuBarItem) => void;
+    render?: () => React.ReactNode | JSX.Element;
+}
+
+@observable()
+@injectable()
+export class MenuBarModel implements IMenuBar {
+    public data: IMenuBarItem[];
+
+    constructor(@inject('MenuBarData') data: IMenuBarItem[] = []) {
+        this.data = data;
+    }
+
+    public render!: () => React.ReactNode;
+
+    public readonly onClick = (event: React.MouseEvent, item: IMenuBarItem) => {
+        console.log('onClick:', event);
+    }
+}
+
+container.register('MenuBarData', { useValue: [] });

src/model/menuBar.ts

@@ -0,0 +1,34 @@
+import { observable } from 'mo/common/observable';
+import { container, inject, injectable } from 'tsyringe';
+
+export interface ISidebarPane {
+    id?: string;
+    name?: string;
+    render?: () => React.ReactElement | undefined;
+}
+
+export interface ISidebar {
+    selected: string;
+    panes: ISidebarPane[];
+    render?: () => React.ReactNode;
+}
+
+@observable()
+@injectable()
+export class SidebarModel implements ISidebar {
+    public selected: string;
+    public panes: ISidebarPane[];
+
+    constructor(
+        @inject('SidebarPane') panes: ISidebarPane[] = [],
+        @inject('Selected') selected: string = '',
+    ) {
+        this.panes = panes;
+        this.selected = selected;
+    }
+
+    public render!: () => React.ReactNode;
+}
+
+container.register('SidebarPane', { useValue: [] });
+container.register('Selected', { useValue: '' });

src/model/sidebar.ts

@@ -0,0 +1,29 @@
+import { observable } from 'mo/common/observable';
+import { container, inject, injectable } from 'tsyringe';
+
+export interface IStatusBarItem {
+}
+
+export interface IStatusBar {
+    data: IStatusBarItem[];
+    onClick:(event: React.MouseEvent<any, any>) => void;
+    render?: () => React.ReactNode | JSX.Element;
+}
+
+@observable()
+@injectable()
+export class StatusBarModel implements IStatusBar {
+    public data: IStatusBarItem[] = [];
+
+    constructor(@inject('StatusBarData') data: IStatusBarItem[] = []) {
+        this.data = data;
+    }
+
+    public render!: () => React.ReactNode;
+
+    public onClick = (event: React.MouseEvent) => {
+        console.log('onClick:', event);
+    }
+}
+
+container.register('StatusBarData', { useValue: [] });