fix(folderTree): improve add root folder & delete dialog (#192)

* fix: improve add root folder

* fix: optimize dialog style

* fix: fix typo

* fix: use ITreeNodeItemProps instead of TreeNodeModel to as a value of type

src/components/collapse/style.scss

@@ -71,7 +71,7 @@ $collapse__extra: #{$collapse}__extra;
 
     &__content {
         border: 1px solid transparent;
-        flex: 1;
+        height: calc(100% - 2px);
         width: calc(100% - 3px);
 
         &:focus {

src/components/dialog/style.scss

@@ -9,9 +9,12 @@
     pointer-events: none;
     position: relative;
     top: 100px;
+    user-select: none;
     width: auto;
+
     // TODO rc-dialog提pr解决
     &-mask {
+        background-color: transparent;
         bottom: 0;
         height: 100%;
         left: 0;
@@ -44,6 +47,8 @@
     }
 
     &-content {
+        background-color: var(--workbenchBackground);
+        box-shadow: var(--widget-shadow) 0 0 10px 2px;
         font-size: 18px;
         padding: 0 15px;
         pointer-events: auto;

src/components/scrollable/style.scss

@@ -1,5 +1,7 @@
 @import 'mo/style/common';
 
+$react-custom-scrollbars: '.ScrollbarsCustom';
+
 #{$scrollbar} {
     .shadow.top {
         box-shadow: none;
@@ -9,7 +11,17 @@
         width: 100%;
 
         &.active {
-            box-shadow: #000 0 6px 6px -6px inset;
+            box-shadow: var(--widget-shadow) 0 6px 6px -6px inset;
         }
     }
 }
+
+#{$react-custom-scrollbars} {
+    &-Scroller {
+        height: 100%;
+    }
+
+    &-Content {
+        height: 100%;
+    }
+}

src/components/tree/index.tsx

@@ -163,6 +163,11 @@ const TreeView = ({
         onSelectNode?.(node.data);
     };
 
+    const handleRightClick = (info) => {
+        setKeys([info.node.key]);
+        onRightClick?.(info);
+    };
+
     return (
         <div className={classNames(prefixClaName('tree'), className)}>
             <div className={prefixClaName('tree', 'sidebar')}>
@@ -174,7 +179,7 @@ const TreeView = ({
                     onDrop={onDrop}
                     switcherIcon={<Icon type="chevron-right" />}
                     onSelect={handleSelect}
-                    onRightClick={onRightClick}
+                    onRightClick={handleRightClick}
                     {...restProps}
                 >
                     {renderTreeNodes(data, 0)}

src/controller/explorer/explorer.tsx

@@ -23,7 +23,6 @@ import {
     EXPLORER_ACTIVITY_ITEM,
     REMOVE_COMMAND_ID,
     FileTypes,
-    FolderTreeEvent,
     EditorTreeEvent,
 } from 'mo/model';
 import { IActionBarItemProps } from 'mo/components/actionBar';
@@ -129,15 +128,6 @@ export class ExplorerController
         });
     }
 
-    private createFileOrFolder = (type: keyof typeof FileTypes) => {
-        const folderTreeState = this.folderTreeService.getState();
-        const { data, current } = folderTreeState?.folderTree || {};
-        // The current selected node id or the first root node
-        const nodeId = current?.id || data?.[0]?.id;
-        // emit onNewFile or onNewFolder event
-        this.emit(FolderTreeEvent[`onNew${type}`], nodeId);
-    };
-
     public readonly onClick = (
         event: React.MouseEvent,
         item: IActionBarItemProps
@@ -166,11 +156,13 @@ export class ExplorerController
         const toolbarId = item.id;
         switch (toolbarId) {
             case NEW_FILE_COMMAND_ID: {
-                this.createFileOrFolder(FileTypes.File);
+                this.folderTreeController.createFileOrFolder?.(FileTypes.File);
                 break;
             }
             case NEW_FOLDER_COMMAND_ID: {
-                this.createFileOrFolder(FileTypes.Folder);
+                this.folderTreeController.createFileOrFolder?.(
+                    FileTypes.Folder
+                );
                 break;
             }
             case REMOVE_COMMAND_ID: {

src/controller/explorer/folderTree.tsx

@@ -7,24 +7,23 @@ import { IMenuItemProps } from 'mo/components/menu';
 import { Modal } from 'mo/components/dialog';
 import {
     IFolderInputEvent,
-    TreeNodeModel,
     BASE_CONTEXT_MENU,
     ROOT_FOLDER_CONTEXT_MENU,
     FILE_CONTEXT_MENU,
     NEW_FILE_COMMAND_ID,
     NEW_FOLDER_COMMAND_ID,
     RENAME_COMMAND_ID,
-    REMOVE_COMMAND_ID,
     DELETE_COMMAND_ID,
     OPEN_TO_SIDE_COMMAND_ID,
-    ADD_ROOT_FOLDER_COMMAND_ID,
     FolderTreeEvent,
     FileTypes,
 } from 'mo/model';
 import { FolderTreeService, IFolderTreeService } from 'mo/services';
+import { randomId } from 'mo/common/utils';
 
 const confirm = Modal.confirm;
 export interface IFolderTreeController {
+    readonly createFileOrFolder?: (type: keyof typeof FileTypes) => void;
     readonly onClickContextMenu?: (
         e: React.MouseEvent,
         item: IMenuItemProps,
@@ -38,6 +37,10 @@ export interface IFolderTreeController {
     readonly getInputEvent?: (events: IFolderInputEvent) => IFolderInputEvent;
     readonly onNewFile?: (id: number) => void;
     readonly onNewFolder?: (id: number) => void;
+    /**
+     * If not provide id, it will use a random id
+     */
+    readonly onNewRootFolder?: (id?: number) => void;
     readonly onRename?: (id: number) => void;
     readonly onDelete?: (id: number) => void;
     readonly onUpdateFileName?: (file: ITreeNodeItemProps) => void;
@@ -63,6 +66,15 @@ export class FolderTreeController
 
     private initView() {}
 
+    public createFileOrFolder = (type: keyof typeof FileTypes) => {
+        const folderTreeState = this.folderTreeService.getState();
+        const { data, current } = folderTreeState?.folderTree || {};
+        // The current selected node id or the first root node
+        const nodeId = current?.id || data?.[0]?.id;
+        // emit onNewFile or onNewFolder event
+        this.emit(FolderTreeEvent[`onNew${type}`], nodeId);
+    };
+
     public readonly getInputEvent = (
         events: IFolderInputEvent
     ): IFolderInputEvent => {
@@ -85,6 +97,10 @@ export class FolderTreeController
         this.emit(FolderTreeEvent.onNewFolder, id);
     };
 
+    public onNewRootFolder = (id?: number) => {
+        this.emit(FolderTreeEvent.onNewRootFolder, id || randomId());
+    };
+
     public onUpdateFileName = (file: ITreeNodeItemProps) => {
         this.emit(FolderTreeEvent.onUpdateFileName, file);
     };
@@ -107,12 +123,11 @@ export class FolderTreeController
     public readonly onClickContextMenu = (
         e: React.MouseEvent,
         item: IMenuItemProps,
-        node = {}
+        node?: ITreeNodeItemProps
     ) => {
         const menuId = item.id;
         const ctx = this;
-        const { id: nodeId, name } = node as any;
-        console.log('onClickContextMenu => Item', item);
+        const { id: nodeId, name } = node || {};
         switch (menuId) {
             case RENAME_COMMAND_ID: {
                 this.onRename(nodeId);
@@ -129,30 +144,16 @@ export class FolderTreeController
                 break;
             }
             case NEW_FILE_COMMAND_ID: {
-                this.onNewFile(nodeId);
+                this.createFileOrFolder(FileTypes.File);
                 break;
             }
             case NEW_FOLDER_COMMAND_ID: {
-                this.onNewFolder(nodeId);
-                break;
-            }
-            case REMOVE_COMMAND_ID: {
-                this.folderTreeService.removeRootFolder(nodeId);
-                break;
-            }
-            case ADD_ROOT_FOLDER_COMMAND_ID: {
-                this.folderTreeService.addRootFolder?.(
-                    new TreeNodeModel({
-                        title: `molecule_temp${Math.random()}`,
-                        fileType: 'rootFolder',
-                    })
-                );
+                this.createFileOrFolder(FileTypes.Folder);
                 break;
             }
             case OPEN_TO_SIDE_COMMAND_ID: {
-                console.log('OpenTab');
+                this.onSelectFile(node!, false);
                 break;
-                // editorService.open();
             }
         }
     };

src/controller/search/search.tsx

@@ -2,7 +2,7 @@ import 'reflect-metadata';
 import { Controller } from 'mo/react/controller';
 import { container, singleton } from 'tsyringe';
 import { connect } from 'mo/react';
-import { IActivityBarItem, TreeNodeModel } from 'mo/model';
+import { IActivityBarItem } from 'mo/model';
 import * as React from 'react';
 import { SearchPanel } from 'mo/workbench/sidebar/search';
 import { IActionBarItemProps } from 'mo/components/actionBar';
@@ -34,7 +34,7 @@ export interface ISearchController {
     setSearchValue?: (value?: string) => void;
     setReplaceValue?: (value?: string) => void;
     convertFoldToSearchTree?: (
-        data: TreeNodeModel[],
+        data: ITreeNodeItemProps[],
         queryVal?: string
     ) => ITreeNodeItemProps[];
     getSearchIndex: (text: string, queryVal?: string) => number;

src/extensions/folderTree/index.tsx

@@ -1,26 +1,45 @@
 import molecule from 'mo';
 import { IExtension } from 'mo/model/extension';
 import { ITreeNodeItemProps } from 'mo/components/tree';
-import { FileTypes } from 'mo/model';
+import { FileTypes, TreeNodeModel } from 'mo/model';
+import { randomId } from 'mo/common/utils';
 
 export const ExtendsFolderTree: IExtension = {
     activate() {
         molecule.folderTree.onNewFile((id: number) => {
             // work through addNode function
-            molecule.folderTree.addNode(id, {
-                name: '',
-                fileType: FileTypes.File,
-                isEditable: true,
-            });
+            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, {
-                name: '',
-                fileType: FileTypes.Folder,
-                isEditable: true,
-            });
+            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',
+                    fileType: FileTypes.RootFolder,
+                })
+            );
         });
 
         molecule.folderTree.onDelete((id: number) => {

src/model/workbench/explorer/folderTree.tsx

@@ -17,6 +17,7 @@ export enum FolderTreeEvent {
     onSelectFile = 'folderTree.onSelectFile',
     onNewFile = 'folderTree.onNewFile',
     onNewFolder = 'folderTree.onNewFolder',
+    onNewRootFolder = 'folderTree.onNewRootFolder',
     onDelete = 'folderTree.onDelete',
     onRename = 'folderTree.onRename',
     onUpdateFileName = 'folderTree.onUpdateFileName',
@@ -29,10 +30,10 @@ export interface IFolderInputEvent {
 }
 
 export interface IFolderTreeSubItem {
-    data?: TreeNodeModel[];
+    data?: ITreeNodeItemProps[];
     contextMenu?: IMenuItemProps[];
     folderPanelContextMenu?: IMenuItemProps[];
-    current?: TreeNodeModel | null;
+    current?: ITreeNodeItemProps | null;
 }
 export interface IFolderTree {
     folderTree?: IFolderTreeSubItem;
@@ -44,7 +45,6 @@ export const RENAME_COMMAND_ID = 'explorer.rename';
 export const REMOVE_COMMAND_ID = 'explorer.remove';
 export const DELETE_COMMAND_ID = 'explorer.delete';
 export const OPEN_TO_SIDE_COMMAND_ID = 'explorer.openToSide';
-export const ADD_ROOT_FOLDER_COMMAND_ID = 'addRootFolder';
 export const FIND_IN_WORKSPACE_ID = 'filesExplorer.findInWorkspace';
 export const DOWNLOAD_COMMAND_ID = 'explorer.download';
 
@@ -84,7 +84,7 @@ export const FILE_CONTEXT_MENU = [
 // Sample folder panel area ContextMenu
 export const FOLDER_PANEL_CONTEXT_MENU = [
     {
-        id: ADD_ROOT_FOLDER_COMMAND_ID,
+        id: NEW_FOLDER_COMMAND_ID,
         name: 'Add Folder to Workspace...',
     },
     {
@@ -102,7 +102,7 @@ export class TreeNodeModel implements ITreeNodeItemProps {
     name?: string;
     location?: string;
     fileType?: FileType;
-    children?: TreeNodeModel[];
+    children?: ITreeNodeItemProps[];
     icon?: string | React.ReactNode;
     isEditable?: boolean;
     content?: string;