feat: listen sample folder contextmenu event

listen sample folder contextmenu event

Author: zhangtengjin

src/components/collapse/index.tsx

@@ -16,6 +16,7 @@ export interface IExpandProps {
 export interface ICollapseProps<T = any> {
     data?: T;
     className?: string;
+    onCollapseChange?: (keys) => void;
 }
 
 interface IState {
@@ -34,8 +35,9 @@ const Collapse: React.FunctionComponent<ICollapseProps> = (
     props: ICollapseProps
 ) => {
     const [state, setState] = useState<IState>(initState);
-    const { className, data = [], ...restProps } = props;
+    const { className, data = [], onCollapseChange, ...restProps } = props;
     const onChangeCallback = (key: React.Key[]) => {
+        onCollapseChange?.(key)
         setState((state: IState) => ({ ...state, activePanelKeys: key }));
     };
     const onClick = (e, item) => {
@@ -69,6 +71,7 @@ const Collapse: React.FunctionComponent<ICollapseProps> = (
                     <Panel
                         key={panel.id}
                         header={panel.name}
+                        className={panel.className}
                         extra={
                             activePanelKeys?.includes(panel.id) && (
                                 <Toolbar

src/components/collapse/style.scss

@@ -64,5 +64,12 @@
                 display: none;
             }
         }
+
+        // test
+        .samplefolder {
+            .rc-collapse-content {
+                height: 800px;
+            }
+        }
     }
 }

src/components/tree/index.tsx

@@ -52,11 +52,11 @@ export interface ITreeProps {
     expandedKeys?: Key[];
     defaultCheckedKeys?: Key[];
     checkedKeys?:
-    | Key[]
-    | {
-        checked: Key[];
-        halfChecked: Key[];
-    };
+        | Key[]
+        | {
+              checked: Key[];
+              halfChecked: Key[];
+          };
     defaultSelectedKeys?: Key[];
     selectedKeys?: Key[];
     titleRender?: (node: DataNode) => React.ReactNode;

src/controller/explorer/explorer.tsx

@@ -17,6 +17,7 @@ export interface IExplorerController {
         e: React.MouseEvent,
         item: IActionBarItem
     ) => void;
+    onCollapseChange?: (keys) => void;
 }
 
 @singleton()
@@ -69,6 +70,7 @@ export class ExplorerController
         const sampleFolderPanel = {
             id: 'Folders',
             name: 'Sample Folder',
+            className: 'samplefolder',
             toolbar: [
                 {
                     id: 'new_file',
@@ -112,6 +114,7 @@ export class ExplorerController
         };
 
         explorerService.addPanel([sampleFolderPanel]);
+
     }
 
     private createFile = (e, type) => {
@@ -137,4 +140,8 @@ export class ExplorerController
         if (panelId === 'Folders') return;
         explorerService.addOrRemovePanel(panelId);
     };
+
+    public readonly onCollapseChange = (keys) => {
+        console.log('keys', keys)
+    }
 }

src/controller/explorer/folderTree.tsx

@@ -2,7 +2,6 @@ import { singleton } from 'tsyringe';
 import { Controller } from 'mo/react/controller';
 
 import { ITreeNodeItem, FileTypes } from 'mo/components/tree';
-
 import { editorService, explorerService } from 'mo';
 import { EditorController } from 'mo/controller/editor';
 import { IMenuItem } from 'mo/components/menu';
@@ -34,7 +33,8 @@ export class FolderTreeController
         this.initView();
     }
 
-    private initView() { }
+    private initView() {
+    }
 
     public readonly onSelectFile = (file: ITreeNodeItem, isAuto?: boolean) => {
         const tabData = {
@@ -54,9 +54,9 @@ export class FolderTreeController
 
             const { id, data = [] } = editorState?.current || {};
             const tabId = file.id;
-            const index = data?.findIndex(tab => tab.id == tabId);
+            const index = data?.findIndex((tab) => tab.id == tabId);
             if (index > -1) {
-                if (id) editorService.updateTab(tabData, id)
+                if (id) editorService.updateTab(tabData, id);
             } else {
                 editorService.open(tabData);
             }

src/workbench/sidebar/explore/explore.tsx

@@ -17,6 +17,7 @@ export const Explorer: React.FunctionComponent<IExplorer> = (
         data = [],
         headerToolBar = [],
         onHeaderToolbarContextMenuClick,
+        onCollapseChange,
     } = props;
     const renderItems = (item: IActivityBarItem, index: number) => {
         return (
@@ -36,7 +37,7 @@ export const Explorer: React.FunctionComponent<IExplorer> = (
                 toolbar={headerToolBar.map(renderItems)}
             />
             <Content>
-                <Collapse data={data} />
+                <Collapse data={data} onCollapseChange={onCollapseChange} />
             </Content>
         </div>
     );

src/workbench/sidebar/explore/folderTree.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
-import { memo, useRef } from 'react';
+import { memo, useRef, useEffect, useCallback } from 'react';
 import { IFolderTree } from 'mo';
+import { select } from 'mo/common/dom';
 import Tree, { FileTypes } from 'mo/components/tree';
 import { Menu } from 'mo/components/menu';
 import { getEventPosition } from 'mo/common/dom';
 import { Button } from 'mo/components/button';
 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';
 
@@ -26,6 +28,41 @@ const FolderTree: React.FunctionComponent<IFolderTree> = (
 
     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) => {
+            contextViewMenu?.dispose();
+        },
+        [folderContextMenu]
+    );
+    const renderContextMenu = () => (
+        <Menu onClick={onClickMenuItem} data={folderContextMenu} />
+    );
+
+    useEffect(() => {
+        if (folderContextMenu.length > 0) {
+            contextViewMenu = useContextMenu({
+                anchor: select('.samplefolder'),
+                render: renderContextMenu,
+            });
+        }
+        return function cleanup() {
+            contextViewMenu?.dispose();
+        };
+    });
+
     const onFocus = () => {
         setTimeout(() => {
             if (inputRef.current) {
@@ -37,15 +74,15 @@ const FolderTree: React.FunctionComponent<IFolderTree> = (
     const setInputVal = (val) => {
         setTimeout(() => {
             if (inputRef.current) {
-                inputRef.current.value = val
+                inputRef.current.value = val;
             }
         });
-    }
+    };
 
     const inputEvents = {
         onFocus,
-        setValue: (val) => setInputVal(val)
-    }
+        setValue: (val) => setInputVal(val),
+    };
 
     const handleRightClick = ({ event, node }) => {
         const menuItems = filterContextMenu?.(contextMenu, node.data);
@@ -67,10 +104,13 @@ const FolderTree: React.FunctionComponent<IFolderTree> = (
             },
             () => {
                 if (node?.fileType === FileTypes.file && newName) {
-                    onSelectFile?.({
-                        ...node,
-                        name: newName,
-                    }, true);
+                    onSelectFile?.(
+                        {
+                            ...node,
+                            name: newName,
+                        },
+                        true
+                    );
                 }
             }
         );
@@ -104,39 +144,14 @@ const FolderTree: React.FunctionComponent<IFolderTree> = (
     };
 
     const renderByData = (
-        <>
-            <Tree
-                data={data}
-                draggable
-                onSelectFile={onSelectFile}
-                onRightClick={handleRightClick}
-                renderTitle={renderTitle}
-                {...restProps}
-            />
-            {/* test service */}
-            <div style={{ marginTop: '100px' }}>
-                <Button
-                    onClick={() => {
-                        explorerService.addRootFolder?.(
-                            new TreeNodeModel({
-                                name: `tree_${Math.random() * 10 + 1}`,
-                                fileType: 'rootFolder',
-                            })
-                        );
-                    }}
-                >
-                    Add Folder
-                </Button>
-                <Button
-                    onClick={() => {
-                        console.log('test');
-                        explorerService.newFile?.();
-                    }}
-                >
-                    New File
-                </Button>
-            </div>
-        </>
+        <Tree
+            data={data}
+            draggable
+            onSelectFile={onSelectFile}
+            onRightClick={handleRightClick}
+            renderTitle={renderTitle}
+            {...restProps}
+        />
     );
 
     const renderInitial = (