feat: folderTree support to loadData (#367)

* feat: folderTree support to loadData

* fix: rename LoadEventData

Author: mortalYoung

src/components/tree/index.tsx

@@ -2,8 +2,9 @@ import * as React from 'react';
 import RcTree, { TreeNode as RcTreeNode, TreeProps } from 'rc-tree';
 import { Icon } from 'mo/components/icon';
 import { prefixClaName, classNames } from 'mo/common/className';
-import { DataNode } from 'rc-tree/lib/interface';
+import type { DataNode } from 'rc-tree/lib/interface';
 import { FileTypes } from 'mo/model';
+import type { LoadEventData } from 'mo/controller';
 
 export interface ITreeNodeItemProps {
     disabled?: boolean;
@@ -26,6 +27,7 @@ export interface ITreeProps extends Partial<TreeProps> {
         isLeaf: boolean
     ) => JSX.Element | string;
     onDropTree?(treeNode: ITreeNodeItemProps[]): void;
+    onLoadData?: (treeNode: LoadEventData) => Promise<void>;
 }
 
 const TreeView = ({
@@ -36,6 +38,7 @@ const TreeView = ({
     onRightClick,
     renderTitle, // custom title
     onSelectNode,
+    onLoadData,
     ...restProps
 }: ITreeProps) => {
     const [selectedKeys, setKeys] = React.useState<React.Key[]>([]);
@@ -220,6 +223,7 @@ const TreeView = ({
                     switcherIcon={<Icon type="chevron-right" />}
                     onSelect={handleSelect}
                     onRightClick={handleRightClick}
+                    loadData={onLoadData}
                     {...restProps}
                 >
                     {renderTreeNodes(data, 0)}

src/controller/explorer/folderTree.tsx

@@ -16,6 +16,11 @@ import {
     FileType,
 } from 'mo/model';
 import { FolderTreeService, IFolderTreeService } from 'mo/services';
+import type { EventDataNode } from 'rc-tree/lib/interface';
+
+export interface LoadEventData extends EventDataNode {
+    data?: ITreeNodeItemProps;
+}
 
 export interface IFolderTreeController {
     readonly createTreeNode: (type: FileType) => void;
@@ -26,6 +31,7 @@ export interface IFolderTreeController {
     readonly onUpdateFileName?: (file: ITreeNodeItemProps) => void;
     readonly onSelectFile: (file: ITreeNodeItemProps) => void;
     readonly onDropTree?: (treeNode: ITreeNodeItemProps[]) => void;
+    readonly onLoadData?: (treeNode: LoadEventData) => Promise<void>;
 
     onRightClick(treeNode: ITreeNodeItemProps): IMenuItemProps[];
 }
@@ -148,4 +154,8 @@ export class FolderTreeController
     private onDelete = (id: number) => {
         this.emit(FolderTreeEvent.onDelete, id);
     };
+
+    public onLoadData = async (treeNode: LoadEventData) => {
+        await this.emit(FolderTreeEvent.onLoadData, treeNode);
+    };
 }

src/model/workbench/explorer/folderTree.tsx

@@ -21,6 +21,7 @@ export enum FolderTreeEvent {
     onRightClick = 'folderTree.onRightClick',
     onContextMenuClick = 'folderTree.onContextMenuClick',
     onCreate = 'folderTree.onCreate',
+    onLoadData = 'folderTree.onLoadData',
 }
 
 export interface IFolderInputEvent {

src/services/workbench/explorer/folderTreeService.ts

@@ -17,6 +17,7 @@ import { ITreeNodeItemProps } from 'mo/components/tree';
 import { ExplorerService, IExplorerService } from './explorerService';
 import { SAMPLE_FOLDER_PANEL_ID } from 'mo/model';
 import { IMenuItemProps } from 'mo/components';
+import type { LoadEventData } from 'mo/controller';
 
 export interface IFolderTreeService extends Component<IFolderTree> {
     /**
@@ -118,6 +119,7 @@ export interface IFolderTreeService extends Component<IFolderTree> {
             contextMenu: IMenuItemProps
         ) => void
     ): void;
+    onLoadData(callback: (treeNode: LoadEventData) => Promise<void>): void;
 }
 
 @singleton()
@@ -332,4 +334,10 @@ export class FolderTreeService
     ) => {
         this.subscribe(FolderTreeEvent.onContextMenuClick, callback);
     };
+
+    public onLoadData = (
+        callback: (treeNode: LoadEventData) => Promise<void>
+    ) => {
+        this.subscribe(FolderTreeEvent.onLoadData, callback);
+    };
 }

src/workbench/sidebar/explore/folderTree.tsx

@@ -77,6 +77,7 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
         onDropTree,
         onClickContextMenu,
         onRightClick,
+        onLoadData,
         createTreeNode,
         ...restProps
     } = props;
@@ -229,6 +230,7 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
                     onSelectNode={onSelectFile}
                     onRightClick={handleRightClick}
                     renderTitle={renderTitle}
+                    onLoadData={onLoadData}
                     {...restProps}
                 />
             </div>