feat: support listen to onCollapseAllFolders (#673)

* feat: support listen to onCollapseAllFolders

* test: update tests

* test: update tests

Author: mortalYoung

src/components/tree/index.tsx

@@ -85,7 +85,7 @@ const TreeView = ({
     onLoadData,
     onTreeClick,
 }: ITreeProps) => {
-    const [expandKeys, setExpandKeys] = useState<string[]>([]);
+    const [expandKeys, setExpandKeys] = useState<UniqueId[]>([]);
     const [activeKey, setActiveKey] = useState<string | null>(null);
     const loadDataCache = useRef<Record<string, boolean>>({});
     const [loadingKeys, setLoadingKeys] = useState<string[]>([]);
@@ -125,15 +125,16 @@ const TreeView = ({
     };
 
     const handleExpandKey = (key: string, node: ITreeNodeItemProps) => {
-        const index = expandKeys.findIndex((e) => e === key);
+        const nextExpandKeys = (controlExpandKeys || expandKeys).concat();
+        const index = nextExpandKeys.findIndex((e) => e === key);
         if (index > -1) {
-            expandKeys.splice(index, 1);
+            nextExpandKeys.splice(index, 1);
         } else {
-            expandKeys.push(key);
+            nextExpandKeys.push(key);
         }
         onExpand
-            ? onExpand(expandKeys.concat(), node)
-            : setExpandKeys(expandKeys.concat());
+            ? onExpand(nextExpandKeys.concat(), node)
+            : setExpandKeys(nextExpandKeys.concat());
     };
 
     const handleNodeClick = (
@@ -415,7 +416,7 @@ const TreeView = ({
                     return node.id.toString();
                 });
                 const nextExpandKeys = Array.from(
-                    new Set([...keys, ...expandKeys])
+                    new Set([...keys, ...(controlExpandKeys || expandKeys)])
                 );
 
                 onExpand

src/controller/__tests__/explorer.test.ts

@@ -190,6 +190,19 @@ describe('The explorer controller', () => {
 
         expect(mockFn).toBeCalled();
 
+        // COLLAPSE_COMMAND_ID
+        mockItem.id = constants.COLLAPSE_COMMAND_ID;
+        mockFn.mockClear();
+        expect(mockFn).not.toBeCalled();
+        explorerController.subscribe(
+            ExplorerEvent.onCollapseAllFolders,
+            mockFn
+        );
+
+        explorerController.onToolbarClick(mockItem, mockParentPanel);
+
+        expect(mockFn).toBeCalled();
+
         // default
         mockItem.id = 'custom-id';
         mockFn.mockClear();

src/controller/explorer/explorer.tsx

@@ -131,6 +131,7 @@ export class ExplorerController
             NEW_FILE_COMMAND_ID,
             NEW_FOLDER_COMMAND_ID,
             REMOVE_COMMAND_ID,
+            COLLAPSE_COMMAND_ID,
             EXPLORER_TOGGLE_CLOSE_ALL_EDITORS,
             EXPLORER_TOGGLE_SAVE_ALL,
             EXPLORER_TOGGLE_VERTICAL,
@@ -149,6 +150,10 @@ export class ExplorerController
                 this.emit(ExplorerEvent.onRemovePanel, parentPanel);
                 break;
             }
+            case COLLAPSE_COMMAND_ID: {
+                this.emit(ExplorerEvent.onCollapseAllFolders);
+                break;
+            }
             case EXPLORER_TOGGLE_CLOSE_ALL_EDITORS: {
                 this.emit(EditorTreeEvent.onCloseAll);
                 break;

src/model/workbench/explorer/explorer.tsx

@@ -7,6 +7,7 @@ export enum ExplorerEvent {
     onPanelToolbarClick = 'explorer.onPanelToolbarClick',
     onCollapseChange = 'explorer.onCollapseChange',
     onRemovePanel = 'explorer.onRemovePanel',
+    onCollapseAllFolders = 'explorer.onCollapseAllFolders',
 }
 
 export type RenderFunctionProps = (props) => React.ReactNode;

src/services/__tests__/explorerService.test.ts

@@ -1,6 +1,6 @@
 import { ExplorerEvent, IExplorerPanelItem } from 'mo/model';
 import 'reflect-metadata';
-import { expectLoggerErrorToBeCalled } from '@test/utils';
+import { expectFnCalled, expectLoggerErrorToBeCalled } from '@test/utils';
 import { container } from 'tsyringe';
 import { searchById } from 'mo/common/utils';
 import { ExplorerService } from '../workbench';
@@ -290,4 +290,12 @@ describe('Test the Explorer Service', () => {
         expect(mockFn.mock.calls[0][0]).toEqual(panelData);
         expect(mockFn.mock.calls[0][1]).toEqual('toolbar-id');
     });
+
+    test('Should support to subscribe onCollapseAllFolders event', () => {
+        expectFnCalled((fn) => {
+            explorerService.onCollapseAllFolders(fn);
+
+            explorerService.emit(ExplorerEvent.onCollapseAllFolders);
+        });
+    });
 });

src/services/builtinService/const.ts

@@ -29,6 +29,7 @@ export const constants = {
     EXPLORER_TOGGLE_CLOSE_GROUP_EDITORS: 'sidebar.explore.closeGroupEditors',
     NEW_FILE_COMMAND_ID: 'explorer.newFile',
     NEW_FOLDER_COMMAND_ID: 'explorer.newFolder',
+    COLLAPSE_COMMAND_ID: 'explorer.collapse',
     RENAME_COMMAND_ID: 'explorer.rename',
     REMOVE_COMMAND_ID: 'explorer.remove',
     DELETE_COMMAND_ID: 'explorer.delete',
@@ -127,7 +128,7 @@ export const modules = {
                     icon: 'refresh',
                 },
                 {
-                    id: 'collapse',
+                    id: constants.COLLAPSE_COMMAND_ID,
                     title: localize(
                         'sidebar.explore.collapseFolders',
                         'Collapse Folders in Explorer'

src/services/workbench/explorer/explorerService.ts

@@ -68,6 +68,11 @@ export interface IExplorerService extends Component<IExplorer> {
      * @param callback
      */
     onRemovePanel(callback: (panel: IExplorerPanelItem) => void): void;
+    /**
+     * Listen to the FolderTree Panel collapse all folders event
+     * @param callback
+     */
+    onCollapseAllFolders(callback: () => void): void;
     /**
      * Listen to the Explorer panel toolbar click event
      * @param callback
@@ -313,6 +318,10 @@ export class ExplorerService
         this.subscribe(ExplorerEvent.onRemovePanel, callback);
     }
 
+    public onCollapseAllFolders(callback: () => void) {
+        this.subscribe(ExplorerEvent.onCollapseAllFolders, callback);
+    }
+
     public onPanelToolbarClick(
         callback: (panel: IExplorerPanelItem, toolbarId: string) => void
     ) {

stories/extensions/test/index.tsx

@@ -175,5 +175,9 @@ export const ExtendsTestPane: IExtension = {
         molecule.folderTree.onRemove((id) => {
             molecule.folderTree.remove(id);
         });
+
+        molecule.explorer.onCollapseAllFolders(() => {
+            molecule.folderTree.setExpandKeys([]);
+        });
     },
 };