feat: folderTree support to set entry page (#209)

* feat: folderTree support to set entry page

* fix: remove unuseless code

Author: mortalYoung

src/controller/explorer/explorer.tsx

@@ -26,11 +26,9 @@ import {
     IExplorerService,
     ISidebarService,
     IActivityBarService,
-    IFolderTreeService,
     ActivityBarService,
     SidebarService,
     ExplorerService,
-    FolderTreeService,
 } from 'mo/services';
 import { FolderTreeController, IFolderTreeController } from './folderTree';
 
@@ -54,15 +52,13 @@ export class ExplorerController
     private readonly activityBarService: IActivityBarService;
     private readonly sidebarService: ISidebarService;
     private readonly explorerService: IExplorerService;
-    private readonly folderTreeService: IFolderTreeService;
     private readonly folderTreeController: IFolderTreeController;
 
     constructor() {
         super();
         this.activityBarService = container.resolve(ActivityBarService);
         this.sidebarService = container.resolve(SidebarService);
         this.explorerService = container.resolve(ExplorerService);
-        this.folderTreeService = container.resolve(FolderTreeService);
         this.folderTreeController = container.resolve(FolderTreeController);
 
         this.initView();
@@ -153,12 +149,7 @@ export class ExplorerController
     };
 
     public renderFolderTree = () => {
-        return (
-            <FolderTreeView
-                {...this.folderTreeService.getState()?.folderTree}
-                {...this.folderTreeController}
-            />
-        );
+        return <FolderTreeView />;
     };
 }
 

src/model/workbench/explorer/explorer.tsx

@@ -141,7 +141,6 @@ export function builtInExplorerFolderPanel() {
         id: SAMPLE_FOLDER_PANEL_ID,
         sortIndex: 8,
         name: localize('menu.defaultProjectName', 'No Open Folder'),
-        className: 'samplefolder',
         toolbar: [
             {
                 id: NEW_FILE_COMMAND_ID,

src/model/workbench/explorer/folderTree.tsx

@@ -37,6 +37,7 @@ export interface IFolderTreeSubItem {
 }
 export interface IFolderTree {
     folderTree?: IFolderTreeSubItem;
+    entry?: React.ReactNode;
 }
 
 export const NEW_FILE_COMMAND_ID = 'explorer.newFile';
@@ -138,8 +139,13 @@ const builtInFolderTree = {
 
 export class IFolderTreeModel implements IFolderTree {
     public folderTree: IFolderTreeSubItem;
+    public entry: React.ReactNode;
 
-    constructor(folderTree: IFolderTreeSubItem = builtInFolderTree) {
+    constructor(
+        folderTree: IFolderTreeSubItem = builtInFolderTree,
+        entry?: React.ReactNode
+    ) {
         this.folderTree = folderTree;
+        this.entry = entry;
     }
 }

src/services/workbench/explorer/folderTreeService.ts

@@ -50,6 +50,7 @@ export interface IFolderTreeService extends Component<IFolderTree> {
     addRootFolder(folder?: ITreeNodeItemProps): void;
     removeRootFolder(id: number): void;
     setActive(id?: number): void;
+    setEntry(entry: React.ReactNode): void;
     onDropTree(treeData: ITreeNodeItemProps[]): void;
     getFileIconByExtensionName(name: string, fileType: FileType): string;
     /**
@@ -213,6 +214,12 @@ export class FolderTreeService
         });
     }
 
+    public setEntry(entry: React.ReactNode) {
+        this.setState({
+            entry,
+        });
+    }
+
     public onRename(callback: (id: number) => void) {
         this.subscribe(FolderTreeEvent.onRename, callback);
     }

src/workbench/sidebar/explore/folderTree.tsx

@@ -6,12 +6,12 @@ import React, {
     useCallback,
     useLayoutEffect,
 } from 'react';
-import { IFolderTreeSubItem } from 'mo/model';
+import { IFolderTree, IFolderTreeSubItem } from 'mo/model';
 import { select, getEventPosition } from 'mo/common/dom';
 import Tree, { ITreeNodeItemProps } from 'mo/components/tree';
 import { IMenuItemProps, Menu } from 'mo/components/menu';
 import { Button } from 'mo/components/button';
-import { IFolderTreeController } from 'mo/controller/explorer/folderTree';
+import { FolderTreeController } from 'mo/controller/explorer/folderTree';
 import { useContextView } from 'mo/components/contextView';
 import { useContextMenu } from 'mo/components/contextMenu';
 import {
@@ -66,13 +66,12 @@ const Input = React.forwardRef(
     }
 );
 
-const FolderTree: React.FunctionComponent<IFolderTreeSubItem> = (
-    props: IFolderTreeSubItem & IFolderTreeController
-) => {
+const FolderTree: React.FunctionComponent<
+    FolderTreeController & IFolderTree
+> = (props) => {
     const {
-        data = [],
-        contextMenu: rawContextMenu = [],
-        folderPanelContextMenu = [],
+        folderTree = {},
+        entry,
         onUpdateFileName,
         onSelectFile,
         onDropTree,
@@ -82,6 +81,28 @@ const FolderTree: React.FunctionComponent<IFolderTreeSubItem> = (
         getInputEvent,
         ...restProps
     } = props;
+
+    const {
+        data = [],
+        contextMenu: rawContextMenu = [],
+        folderPanelContextMenu = [],
+    } = folderTree;
+
+    const handleAddRootFolder = () => {
+        onNewRootFolder?.();
+    };
+
+    const welcomePage = entry ? (
+        <>{entry}</>
+    ) : (
+        <div style={{ padding: '10px 5px' }}>
+            you have not yet opened a folder
+            <Button onClick={handleAddRootFolder}>Add Folder</Button>
+        </div>
+    );
+
+    if (!data.length) return welcomePage;
+
     const inputRef = useRef<HTMLInputElement>(null);
     // tree context view
     const contextMenu = useRef<ReturnType<typeof useContextMenu>>();
@@ -164,10 +185,6 @@ const FolderTree: React.FunctionComponent<IFolderTreeSubItem> = (
         }
     };
 
-    const handleAddRootFolder = () => {
-        onNewRootFolder?.();
-    };
-
     const renderTitle = (node: ITreeNodeItemProps) => {
         const { isEditable, name } = node;
 
@@ -194,9 +211,9 @@ const FolderTree: React.FunctionComponent<IFolderTreeSubItem> = (
         return () => {
             contextMenu.current?.dispose();
         };
-    }, [data?.length]);
+    }, [data.length]);
 
-    const renderByData = (
+    return (
         <Tree
             // root folder do not render
             data={data[0]?.children || []}
@@ -211,14 +228,5 @@ const FolderTree: React.FunctionComponent<IFolderTreeSubItem> = (
             {...restProps}
         />
     );
-
-    const renderInitial = (
-        <div style={{ padding: '10px 5px' }}>
-            you have not yet opened a folder
-            <Button onClick={handleAddRootFolder}>Add Folder</Button>
-        </div>
-    );
-
-    return data?.length > 0 ? renderByData : renderInitial;
 };
 export default memo(FolderTree);