feat: folder service test

folder service test

Author: zhangtengjin

src/components/tree/index.tsx

@@ -50,11 +50,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

@@ -7,7 +7,7 @@ import {
     explorerService,
 } from 'mo';
 import * as React from 'react';
-import { ExplorerView, FolderTree } from 'mo/workbench/sidebar/explore';
+import { ExplorerView, FolderTreeView } from 'mo/workbench/sidebar/explore';
 import { IActionBarItem } from 'mo/components/actionBar';
 
 export interface IExplorerController {
@@ -99,7 +99,7 @@ export class ExplorerController
                     id: 'new_file',
                     title: 'New File',
                     iconName: 'codicon-new-file',
-                    onClick: () => {},
+                    onClick: () => { },
                 },
                 {
                     id: 'new_folder',
@@ -118,7 +118,9 @@ export class ExplorerController
                 },
             ],
             renderPanel: () => (
-                <FolderTree data={explorerState.folderTree?.data} />
+                <FolderTreeView
+                    data={explorerState.folderTree?.data}
+                    contextMenu={explorerState.folderTree?.contextMenu} />
             ),
         };
 

src/controller/explorer/folderTree.tsx

@@ -28,6 +28,8 @@ export interface IFolderTreeController {
         menus: IMenuItem[],
         treeNode: IMenuItem
     ) => IMenuItem[];
+
+    readonly onAddFolder?: (folder: ITreeNodeItem) => void;
 }
 
 @singleton()
@@ -39,7 +41,7 @@ export class FolderTreeController
         this.initView();
     }
 
-    private initView() {}
+    private initView() { }
 
     public readonly onSelectFile = (file: ITreeNodeItem) => {
         const tabData = {
@@ -130,4 +132,8 @@ export class FolderTreeController
     ) => {
         return menus;
     };
+
+    public readonly onAddFolder = (folder) => {
+        explorerService.addFolder(folder);
+    }
 }

src/controller/explorer/outline.tsx

@@ -3,7 +3,7 @@ import { singleton } from 'tsyringe';
 import { explorerService } from 'mo';
 import React from 'react';
 
-export interface IOutlineController {}
+export interface IOutlineController { }
 
 @singleton()
 export class OutlineController

src/model/workbench/explorer.ts

@@ -4,7 +4,7 @@ import { IActionBarItem } from 'mo/components/actionBar';
 import { ITreeNodeItem } from 'mo/components/tree';
 import { IMenuItem } from 'mo/components/menu';
 
-export enum ExplorerEvent {}
+export enum ExplorerEvent { }
 export interface IPanelItem<T = any> extends IActionBarItem {
     renderPanel?: (props) => React.ReactNode | JSX.Element;
     toolbar?: T;
@@ -62,6 +62,7 @@ export class IExplorerModel implements IExplorer {
     public data: IPanelItem[] = [];
     public folderTree: IFolderTree = {
         contextMenu: folderContextMenu.concat(fileContextMenu),
+        data: []
     };
     public headerToolBar: IActionBarItem[] = builtInHeaderToolbar;
 }

src/services/workbench/explorerService.ts

@@ -6,6 +6,7 @@ import {
     IExplorerModel,
 } from 'mo/model/workbench/explorer';
 import { ITreeNodeItem, FileType, FileTypes } from 'mo/components/tree';
+import { searchById } from '../helper';
 export interface IExplorerService extends Component<IExplorer> {
     addPanel(panel: IPanelItem | IPanelItem[]): void;
     createFile(
@@ -17,6 +18,8 @@ export interface IExplorerService extends Component<IExplorer> {
     rename(fileData: ITreeNodeItem, callback: Function): void;
     deleteFile(fileData: ITreeNodeItem): void;
     onDropTree(treeData: ITreeNodeItem[]): void;
+
+    addFolder(fileData?: ITreeNodeItem): void;
 }
 
 @singleton()
@@ -304,4 +307,35 @@ export class ExplorerService
             }),
         });
     };
+
+
+    // second version
+    // 考虑操作 tree 数据结构的方法抽离出一个 tree 类
+
+    public addFolder(folder) {
+        const { folderTree } = this.state;
+        let next = [...folderTree?.data!];
+        if (Array.isArray(folder)) {
+            next = next?.concat(folder);
+        } else {
+            next?.push(folder);
+        }
+        console.log('next', next)
+        this.setState({
+            folderTree: { ...folderTree, data: next }
+        });
+    }
+    // public deleteFolder(id) {
+    //     const { folderTree } = this.state;
+    //     let next = [...folderTree?.data!];
+    //     if (Array.isArray(folder)) {
+    //         next = next?.concat(folder);
+    //     } else {
+    //         next?.push(folder);
+    //     }
+    //     const current = searchById(id)
+    //     this.setState({
+    //         folderTree: { ...folderTree, data: next }
+    //     });
+    // }
 }

src/workbench/sidebar/explore/folderTree.tsx

@@ -22,6 +22,7 @@ const FolderTree: React.FunctionComponent<IFolderTree> = (
         onDropTree,
         filterContextMenu,
         onClickContextMenu,
+        onAddFolder,
         ...restProps
     } = props;
 
@@ -65,8 +66,8 @@ const FolderTree: React.FunctionComponent<IFolderTree> = (
                 onBlur={handleInputBlur}
             />
         ) : (
-            name
-        );
+                name
+            );
     };
 
     const renderByData = (
@@ -83,10 +84,20 @@ const FolderTree: React.FunctionComponent<IFolderTree> = (
     const renderInitial = (
         <span>
             you have not yet opened a folder
-            <Button onClick={onCreateFile}>New Folder</Button>
+            <Button onClick={() => {
+                console.log('test')
+                onAddFolder?.({
+                    name: 'qingyi',
+                    location: 'test',
+                    fileType: 'folder',
+                    children: [],
+                    id: '123',
+                    icon: '',
+                    modify: false
+                });
+            }}>Add Folder</Button>
         </span>
     );
-
     return data?.length > 0 ? renderByData : renderInitial;
 };
 export default memo(FolderTree);

src/workbench/sidebar/explore/index.tsx

@@ -1,12 +1,13 @@
 import { ExplorerController } from 'mo/controller/explorer/explorer';
+import { FolderTreeController } from 'mo/controller/explorer/folderTree';
 import { connect } from 'mo/react';
 import { explorerService } from 'mo/services';
 import { container } from 'tsyringe';
 import { Explorer } from './explore';
-
-export { default as FolderTree } from './folderTree';
+import FolderTree from './folderTree'
 
 const explorerController = container.resolve(ExplorerController);
+const folderTreeController = container.resolve(FolderTreeController);
 const ExplorerView = connect(explorerService, Explorer, explorerController);
-
-export { ExplorerView, Explorer };
+const FolderTreeView = connect(explorerService, FolderTree, folderTreeController);
+export { ExplorerView, Explorer, FolderTreeView, FolderTree };