feat: support to set the expandKeys (#664)

* feat: support to set the expandKeys

* test: update tests

Author: mortalYoung

src/components/tree/index.tsx

@@ -55,7 +55,7 @@ export interface ITreeProps {
     data?: ITreeNodeItemProps[];
     className?: string;
     draggable?: boolean;
-    expandKeys?: string[];
+    expandKeys?: UniqueId[];
     onExpand?: (expandedKeys: React.Key[], node: ITreeNodeItemProps) => void;
     onSelect?: (node: ITreeNodeItemProps, isUpdate?) => void;
     onTreeClick?: () => void;

src/controller/__tests__/folderTree.test.ts

@@ -238,4 +238,14 @@ describe('The folder tree controller', () => {
         expect(mockFn).toBeCalled();
         expect(folderTreeService.get(2)?.children).toHaveLength(1);
     });
+
+    test('Should support to execute the onExpandKeys method', () => {
+        expectFnCalled((fn) => {
+            const mockExpandKeys = [1, 2];
+            folderTreeService.onExpandKeys(fn);
+            folderTreeController.onExpandKeys(mockExpandKeys);
+
+            expect(fn.mock.calls[0][0]).toBe(mockExpandKeys);
+        });
+    });
 });

src/controller/explorer/folderTree.tsx

@@ -30,6 +30,7 @@ export interface IFolderTreeController extends Partial<Controller> {
         target: IFolderTreeNodeProps
     ) => void;
     readonly onLoadData?: (treeNode: IFolderTreeNodeProps) => Promise<void>;
+    readonly onExpandKeys?: (expandKeys: UniqueId[]) => void;
     readonly onRightClick?: (
         treeNode: IFolderTreeNodeProps
     ) => IMenuItemProps[];
@@ -99,6 +100,7 @@ export class FolderTreeController
                 current: null,
                 folderPanelContextMenu: FOLDER_PANEL_CONTEXT_MENU || [],
                 data: [],
+                expandKeys: [],
             },
         });
     }
@@ -172,7 +174,6 @@ export class FolderTreeController
         source: IFolderTreeNodeProps,
         target: IFolderTreeNodeProps
     ) => {
-        // this.folderTreeService.onDropTree(treeNode);
         this.emit(FolderTreeEvent.onDrop, source, target);
     };
 
@@ -217,4 +218,8 @@ export class FolderTreeController
             return Promise.resolve();
         }
     };
+
+    public onExpandKeys = (expandedKeys: UniqueId[]) => {
+        this.emit(FolderTreeEvent.onExpandKeys, expandedKeys);
+    };
 }

src/extensions/folderTree/index.tsx

@@ -56,6 +56,10 @@ export const ExtendsFolderTree: IExtension = {
                 }
             }
         });
+
+        molecule.folderTree.onExpandKeys((expandKeys) => {
+            molecule.folderTree.setExpandKeys(expandKeys);
+        });
     },
     dispose() {},
 };

src/model/workbench/explorer/folderTree.tsx

@@ -22,6 +22,7 @@ export enum FolderTreeEvent {
     onCreate = 'folderTree.onCreate',
     onLoadData = 'folderTree.onLoadData',
     onDrop = 'folderTree.onDrop',
+    onExpandKeys = 'folderTree.onExpandKeys',
 }
 
 export interface IFolderInputEvent {
@@ -34,6 +35,7 @@ export interface IFolderTreeSubItem {
     contextMenu?: IMenuItemProps[];
     folderPanelContextMenu?: IMenuItemProps[];
     current?: IFolderTreeNodeProps | null;
+    expandKeys?: UniqueId[];
 }
 export interface IFolderTree {
     folderTree?: IFolderTreeSubItem;
@@ -98,6 +100,7 @@ export class IFolderTreeModel implements IFolderTree {
             current: null,
             folderPanelContextMenu: [],
             data: [],
+            expandKeys: [],
         },
         autoSort: Boolean = false,
         entry?: React.ReactNode

src/services/workbench/__tests__/folderTreeService.test.ts

@@ -66,6 +66,13 @@ describe('Test StatusBarService', () => {
         expect(folderTreeService.getFolderContextMenu()).toEqual(mockMenuProps);
     });
 
+    test('Should support to set expandKeys', () => {
+        expect(folderTreeService.getExpandKeys()).toEqual([]);
+
+        folderTreeService.setExpandKeys([1, 2]);
+        expect(folderTreeService.getExpandKeys()).toEqual([1, 2]);
+    });
+
     test('Should support to set active node', () => {
         const mockRootTree: IFolderTreeNodeProps = {
             id: 0,
@@ -480,4 +487,11 @@ describe('Test StatusBarService', () => {
             folderTreeService.emit(FolderTreeEvent.onDrop);
         });
     });
+
+    test('Should support to onExpandKey', () => {
+        expectFnCalled((fn) => {
+            folderTreeService.onExpandKeys(fn);
+            folderTreeService.emit(FolderTreeEvent.onExpandKeys);
+        });
+    });
 });

src/services/workbench/explorer/folderTreeService.ts

@@ -52,6 +52,14 @@ export interface IFolderTreeService extends Component<IFolderTree> {
      * Get the context menus for folder
      */
     getFolderContextMenu: () => IMenuItemProps[];
+    /**
+     * Get the expandKeys in folderTree
+     */
+    getExpandKeys: () => UniqueId[];
+    /**
+     * Set the expandKeys for folderTree
+     */
+    setExpandKeys: (expandKeys: UniqueId[]) => void;
     /**
      * Active specific node,
      * or unactive any node in folder tree
@@ -138,6 +146,11 @@ export interface IFolderTreeService extends Component<IFolderTree> {
             callback: (treeNode: IFolderTreeNodeProps) => void
         ) => void
     ): void;
+    /**
+     * Callback for expanding tree node
+     * @param callback
+     */
+    onExpandKeys(callback: (expandKeys: UniqueId[]) => void): void;
     /**
      * Toggle whether to enable sorting, which is disabled by default.
      */
@@ -226,6 +239,17 @@ export class FolderTreeService
         this.folderContextMenu = menus;
     }
 
+    public getExpandKeys() {
+        return this.state.folderTree?.expandKeys || [];
+    }
+
+    public setExpandKeys(expandKeys: UniqueId[]) {
+        const { folderTree } = this.state;
+        this.setState({
+            folderTree: { ...folderTree, expandKeys },
+        });
+    }
+
     private setCurrentFolderLocation(data: IFolderTreeNodeProps, id: UniqueId) {
         const children = data.children;
         const { tree } = this.getCurrentRootFolderInfo(id);
@@ -513,6 +537,10 @@ export class FolderTreeService
         this.subscribe(FolderTreeEvent.onLoadData, callback);
     };
 
+    public onExpandKeys = (callback: (expandKeys: UniqueId[]) => void) => {
+        this.subscribe(FolderTreeEvent.onExpandKeys, callback);
+    };
+
     public toggleAutoSort() {
         this.setState({ autoSort: !this.state.autoSort });
     }

src/workbench/sidebar/explore/folderTree.tsx

@@ -78,10 +78,11 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
         onRightClick,
         onLoadData,
         createTreeNode,
+        onExpandKeys,
         ...restProps
     } = props;
 
-    const { data = [], folderPanelContextMenu = [] } = folderTree;
+    const { data = [], folderPanelContextMenu = [], expandKeys } = folderTree;
 
     const handleAddRootFolder = () => {
         createTreeNode?.('RootFolder');
@@ -227,6 +228,7 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
             <div data-content={panel.id} style={{ height: '100%' }}>
                 <Tree
                     // root folder do not render
+                    expandKeys={expandKeys}
                     data={data[0]?.children || []}
                     className={classNames(
                         folderTreeClassName,
@@ -239,6 +241,7 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
                     onRightClick={handleRightClick}
                     renderTitle={renderTitle}
                     onLoadData={onLoadData}
+                    onExpand={onExpandKeys}
                     {...restProps}
                 />
             </div>