fix: improve unreasonable design (#232)

Author: mortalYoung

src/components/menu/menuItem.tsx

@@ -31,6 +31,8 @@ export interface IMenuItemProps extends HTMLElementProps {
     render?: (data: IMenuItemProps) => ReactNode;
     onClick?: (e: React.MouseEvent, item?: IMenuItemProps) => void;
     sortIndex?: number;
+
+    [key: string]: any;
 }
 
 export function MenuItem(props: React.PropsWithChildren<IMenuItemProps>) {

src/controller/editor.tsx

@@ -101,6 +101,9 @@ export class EditorController extends Controller implements IEditorController {
                 this.onCloseToLeft(tabItem!, groupId);
                 break;
             }
+            default: {
+                this.emit(EditorEvent.onActionsClick, menuId, current);
+            }
         }
     };
 

src/extensions/folderTree/index.tsx

@@ -1,48 +1,10 @@
 import molecule from 'mo';
 import { IExtension } from 'mo/model/extension';
 import { ITreeNodeItemProps } from 'mo/components/tree';
-import { FileTypes, TreeNodeModel } from 'mo/model';
-import { randomId } from 'mo/common/utils';
+import { FileTypes } from 'mo/model';
 
 export const ExtendsFolderTree: IExtension = {
     activate() {
-        molecule.folderTree.onNewFile((id: number) => {
-            // work through addNode function
-            molecule.folderTree.addNode(
-                id,
-                new TreeNodeModel({
-                    id: randomId(),
-                    name: '',
-                    fileType: FileTypes.File,
-                    isEditable: true,
-                })
-            );
-        });
-
-        molecule.folderTree.onNewFolder((id: number) => {
-            // work through addNode function
-            molecule.folderTree.addNode(
-                id,
-                new TreeNodeModel({
-                    id: randomId(),
-                    name: '',
-                    fileType: FileTypes.Folder,
-                    isEditable: true,
-                })
-            );
-        });
-
-        molecule.folderTree.onNewRootFolder((id: number) => {
-            molecule.folderTree.addRootFolder?.(
-                new TreeNodeModel({
-                    id,
-                    name: 'molecule',
-                    location: 'molecule',
-                    fileType: FileTypes.RootFolder,
-                })
-            );
-        });
-
         molecule.folderTree.onDelete((id: number) => {
             const { folderTree } = molecule.folderTree.getState();
             const cloneData: ITreeNodeItemProps[] = folderTree?.data || [];

src/model/workbench/editor.ts

@@ -14,6 +14,7 @@ export enum EditorEvent {
     OpenTab = 'editor.openTab',
     OnSelectTab = 'editor.selectTab',
     OnUpdateTab = 'editor.updateTab',
+    onActionsClick = 'editor.actionsClick',
     OnSplitEditorRight = 'editor.splitEditorRight',
 }
 interface BuiltInEditorTabDataType {

src/services/workbench/editorService.ts

@@ -9,9 +9,11 @@ import {
     IEditorGroup,
     IEditorTab,
     EditorEvent,
+    getEditorInitialActions,
 } from 'mo/model';
 import { searchById } from '../helper';
 import { editor as monacoEditor, Uri } from 'mo/monaco';
+import { IMenuItemProps } from 'mo/components';
 
 export interface IEditorService extends Component<IEditor> {
     /**
@@ -50,13 +52,20 @@ export interface IEditorService extends Component<IEditor> {
     onCloseOthers(callback: (tabItem: IEditorTab, groupId?: number) => void);
     onCloseToLeft(callback: (tabItem: IEditorTab, groupId?: number) => void);
     onCloseToRight(callback: (tabItem: IEditorTab, groupId?: number) => void);
+    onActionsClick(
+        callback: (menuId: string, currentGroup: IEditorGroup) => void
+    ): void;
     /**
      * Set active group and tab
      * @param groupId Target group ID
      * @param tabId Target tab ID
      */
     setActive(groupId: number, tabId: string);
     updateGroup(groupId, groupValues: IEditorGroup): void;
+    /**
+     * Update actions in group
+     */
+    updateGroupActions(actions: IMenuItemProps[]): void;
     updateCurrentGroup(currentValues): void;
     /**
      * The Instance of Editor
@@ -68,9 +77,11 @@ export class EditorService
     extends Component<IEditor>
     implements IEditorService {
     protected state: IEditor;
+    protected groupActions: IMenuItemProps[];
     constructor() {
         super();
         this.state = container.resolve(EditorModel);
+        this.groupActions = getEditorInitialActions();
     }
 
     private disposeModel(tabs: IEditorTab | IEditorTab[]) {
@@ -80,6 +91,10 @@ export class EditorService
         });
     }
 
+    public updateGroupActions(actions: IMenuItemProps[]): void {
+        this.groupActions = actions;
+    }
+
     public setEntry(component: React.ReactNode) {
         this.setState({
             entry: component,
@@ -323,7 +338,12 @@ export class EditorService
             groups[groupIndex] = { ...currentGroup, tab, activeTab: tabId };
         } else {
             // if group isn't exist, open a new group
-            group = new EditorGroupModel(groups.length + 1, tab, [tab]);
+            group = new EditorGroupModel(
+                groups.length + 1,
+                tab,
+                [tab],
+                this.groupActions
+            );
             groups.push(group);
         }
 
@@ -422,4 +442,10 @@ export class EditorService
     ) {
         this.subscribe(EditorEvent.OnCloseToRight, callback);
     }
+
+    public onActionsClick(
+        callback: (menuId: string, currentGroup: IEditorGroup) => void
+    ) {
+        this.subscribe(EditorEvent.onActionsClick, callback);
+    }
 }

stories/extensions/test/index.tsx

@@ -5,11 +5,12 @@ import {
     MENU_VIEW_MENUBAR,
     MENU_VIEW_STATUSBAR,
 } from 'mo/model/workbench/menuBar';
-import { IExtension } from 'mo/model';
+import { FileTypes, IExtension, TreeNodeModel } from 'mo/model';
 
 import TestPane from './testPane';
 import { Entry } from './entry';
 import { Position } from 'mo/model/workbench/layout';
+import { randomId } from 'mo/common/utils';
 
 export const ExtendTestPane: IExtension = {
     activate() {
@@ -83,5 +84,42 @@ export const ExtendTestPane: IExtension = {
                 });
             }
         });
+
+        molecule.folderTree.onNewFile((id: number) => {
+            // work through addNode function
+            molecule.folderTree.addNode(
+                id,
+                new TreeNodeModel({
+                    id: randomId(),
+                    name: '',
+                    fileType: FileTypes.File,
+                    isEditable: true,
+                })
+            );
+        });
+
+        molecule.folderTree.onNewFolder((id: number) => {
+            // work through addNode function
+            molecule.folderTree.addNode(
+                id,
+                new TreeNodeModel({
+                    id: randomId(),
+                    name: '',
+                    fileType: FileTypes.Folder,
+                    isEditable: true,
+                })
+            );
+        });
+
+        molecule.folderTree.onNewRootFolder((id: number) => {
+            molecule.folderTree.addRootFolder?.(
+                new TreeNodeModel({
+                    id,
+                    name: 'molecule',
+                    location: 'molecule',
+                    fileType: FileTypes.RootFolder,
+                })
+            );
+        });
     },
 };