feat: optimize folderPanel contextMenu logic and extract style to mo

optimize folderPanel contextMenu logic and extract style   to mo

Author: zhangtengjin

build/webpack.css.js

@@ -29,6 +29,7 @@ const styles = [
     'workbench/settings/style',
     'workbench/sidebar/style',
     'workbench/statusBar/style',
+    'workbench/sidebar/explore/style',
     // ============= Molecule.css =============
     'style/mo',
 ];

src/controller/explorer/explorer.tsx

@@ -103,6 +103,7 @@ export class ExplorerController
                 const folderProps: IFolderTree = {
                     data: explorerState.folderTree?.data,
                     contextMenu: explorerState.folderTree?.contextMenu,
+                    folderPanelContextMenu: explorerState.folderTree?.folderPanelContextMenu
                 };
                 return (
                     <FolderTreeView

src/controller/explorer/folderTree.tsx

@@ -6,6 +6,7 @@ import { editorService, explorerService } from 'mo';
 import { EditorController } from 'mo/controller/editor';
 import { IMenuItem } from 'mo/components/menu';
 import Modal from 'mo/components/dialog';
+import { IFolderInputEvent, TreeNodeModel } from 'mo/model';
 const confirm = Modal.confirm;
 
 export interface IFolderTreeController {
@@ -15,13 +16,14 @@ export interface IFolderTreeController {
     readonly onClickContextMenu?: (
         e: React.MouseEvent,
         item: IMenuItem,
-        node: ITreeNodeItem,
-        events?: Object
+        node?: ITreeNodeItem,
+        events?: IFolderInputEvent
     ) => void;
     readonly filterContextMenu?: (
         menus: IMenuItem[],
         treeNode: ITreeNodeItem
     ) => IMenuItem[];
+    readonly getInputEvent?: (events: IFolderInputEvent) => IFolderInputEvent;
 }
 
 @singleton()
@@ -33,7 +35,7 @@ export class FolderTreeController
         this.initView();
     }
 
-    private initView() {}
+    private initView() { }
 
     public readonly onSelectFile = (file: ITreeNodeItem, isAuto?: boolean) => {
         const tabData = {
@@ -72,19 +74,24 @@ export class FolderTreeController
         explorerService.onDropTree(treeNode);
     };
 
+    public readonly getInputEvent = (events: IFolderInputEvent): IFolderInputEvent => {
+        return events;
+    }
+
     public readonly onClickContextMenu = (
         e: React.MouseEvent,
         item: IMenuItem,
-        node: ITreeNodeItem,
-        events?: Object
+        node = {},
+        events?: IFolderInputEvent
     ) => {
         const menuId = item.id;
         const { id: nodeId, name } = node as any;
+        console.log('onClickContextMenu => Item', item)
         switch (menuId) {
             case 'rename': {
                 explorerService.rename(nodeId, () => {
-                    events?.['setValue'](name);
-                    events?.['onFocus']();
+                    events?.setValue?.(name);
+                    events?.onFocus();
                 });
                 break;
             }
@@ -105,20 +112,29 @@ export class FolderTreeController
             }
             case 'newFile': {
                 explorerService.newFile(nodeId, () => {
-                    events?.['onFocus']();
+                    events?.onFocus();
                 });
                 break;
             }
             case 'newFolder': {
                 explorerService.newFolder(nodeId, () => {
-                    events?.['onFocus']();
+                    events?.onFocus();
                 });
                 break;
             }
             case 'remove': {
                 explorerService.removeRootFolder(nodeId);
                 break;
             }
+            case 'addRootFolder': {
+                explorerService.addRootFolder?.(
+                    new TreeNodeModel({
+                        name: `molecule_temp${Math.random()}`,
+                        fileType: 'rootFolder',
+                    })
+                );
+                break;
+            }
             case 'openTab': {
                 console.log('OpenTab');
                 break;
@@ -178,4 +194,5 @@ export class FolderTreeController
         }
         return menu;
     };
+
 }

src/model/workbench/explorer.tsx

@@ -13,9 +13,15 @@ export interface IPanelItem<T = any> extends IActivityBarItem {
     toolbar?: T;
 }
 
+export interface IFolderInputEvent {
+    onFocus: () => void;
+    setValue: (value: string) => void;
+}
+
 export interface IFolderTree {
     data?: ITreeNodeItem[];
     contextMenu?: IMenuItem[];
+    folderPanelContextMenu?: IMenuItem[];
     current?: ITreeNodeItem | null;
 }
 export interface IExplorer {
@@ -60,6 +66,22 @@ const commonContextMenu = [
         name: 'Delete',
     },
 ];
+
+// Sample folder panel area ContextMenu
+const folderPanelContextMenu = [
+    {
+        id: 'addRootFolder',
+        name: 'Add Folder to Workspace...'
+    },
+    {
+        id: 'find',
+        name: 'Find in Workspace...'
+    },
+    {
+        id: 'download',
+        name: 'Download...'
+    },
+]
 // Dedault Panel
 export const EDITOR_PANEL = {
     id: 'OpenEditors',
@@ -141,6 +163,7 @@ export class IExplorerModel implements IExplorer {
     public folderTree: IFolderTree = {
         contextMenu: commonContextMenu,
         current: null,
+        folderPanelContextMenu: folderPanelContextMenu,
         data: [],
     };
     public headerToolBar: IActivityBarItem[] = builtInHeaderToolbar;

src/style/mo.scss

@@ -30,6 +30,7 @@
 @import 'mo/workbench/settings/style';
 @import 'mo/workbench/sidebar/style';
 @import 'mo/workbench/statusBar/style';
+@import 'mo/workbench/sidebar/explore/style';
 
 .#{$prefix} {
     bottom: 0;

src/workbench/sidebar/explore/folderTree.tsx

@@ -10,51 +10,40 @@ import { IFolderTreeController } from 'mo/controller/explorer/folderTree';
 import { useContextView } from 'mo/components/contextView';
 import { useContextMenu } from 'mo/components/contextMenu';
 import { explorerService } from 'mo/services';
-import { TreeNodeModel } from 'mo/model';
+import { TreeNodeModel, IFolderInputEvent } from 'mo/model';
 
 const FolderTree: React.FunctionComponent<IFolderTree> = (
     props: IFolderTree & IFolderTreeController
 ) => {
     const {
         data = [],
         contextMenu = [],
+        folderPanelContextMenu = [],
         onSelectFile,
         onDropTree,
         filterContextMenu,
         onClickContextMenu,
+        getInputEvent,
         ...restProps
     } = props;
     const inputRef = useRef<any>(null);
 
     const contextView = useContextView();
 
     let contextViewMenu;
-    const folderContextMenu = [
-        {
-            id: 'addFolder',
-            name: 'Add Folder to Workspace',
-            onClick: () => {
-                explorerService.addRootFolder?.(
-                    new TreeNodeModel({
-                        name: `molecule_temp${Math.random()}`,
-                        fileType: 'rootFolder',
-                    })
-                );
-            },
-        },
-    ];
     const onClickMenuItem = useCallback(
         (e, item) => {
+            onClickContextMenu?.(e, item)
             contextViewMenu?.dispose();
         },
-        [folderContextMenu]
+        [folderPanelContextMenu]
     );
     const renderContextMenu = () => (
-        <Menu onClick={onClickMenuItem} data={folderContextMenu} />
+        <Menu onClick={onClickMenuItem} data={folderPanelContextMenu} />
     );
 
     useEffect(() => {
-        if (folderContextMenu.length > 0) {
+        if (folderPanelContextMenu.length > 0) {
             contextViewMenu = useContextMenu({
                 anchor: select('.samplefolder'),
                 render: renderContextMenu,
@@ -73,23 +62,23 @@ const FolderTree: React.FunctionComponent<IFolderTree> = (
         });
     };
 
-    const setInputVal = (val) => {
+    const setInputValue = (val) => {
         setTimeout(() => {
             if (inputRef.current) {
                 inputRef.current.value = val;
             }
         });
     };
 
-    const inputEvents = {
+    const inputEvents: IFolderInputEvent = {
         onFocus,
-        setValue: (val) => setInputVal(val),
+        setValue: (val) => setInputValue(val),
     };
 
     const handleRightClick = ({ event, node }) => {
         const menuItems = filterContextMenu?.(contextMenu, node.data);
         const handleOnMenuClick = (e: React.MouseEvent, item) => {
-            onClickContextMenu?.(e, item, node.data, inputEvents);
+            onClickContextMenu?.(e, item, node.data, getInputEvent?.(inputEvents));
             contextView.hide();
         };
         contextView?.show(getEventPosition(event), () => (
@@ -141,8 +130,8 @@ const FolderTree: React.FunctionComponent<IFolderTree> = (
                 onBlur={handleInputBlur}
             />
         ) : (
-            name
-        );
+                name
+            );
     };
 
     const renderByData = (

src/workbench/sidebar/explore/index.tsx

@@ -1,4 +1,3 @@
-import 'mo/workbench/sidebar/explore/style.scss';
 import { connect } from 'mo/react';
 import { explorerService } from 'mo/services';
 import { explorerController, folderTreeController } from 'mo/controller';