feat: support space keybinding on filetree (#2119)

opensumi · Dec 26, 2022 · 4854f4f · 4854f4f
1 parent 5ce4a12
commit 4854f4f
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 1 deletion.
diff --git a/packages/core-browser/src/common/common.command.ts b/packages/core-browser/src/common/common.command.ts
@@ -189,6 +189,11 @@ export namespace FILE_COMMANDS {
     id: 'filetree.revealInExplorer',
     category: CATEGORY,
   };
+
+  export const TOGGLE_OR_OPEN: Command = {
+    id: 'filetree.toggleOrOpen',
+    category: CATEGORY,
+  };
 }
 
 export namespace OPEN_EDITORS_COMMANDS {

diff --git a/packages/file-tree-next/__tests__/browser/file-tree-model.service.test.ts b/packages/file-tree-next/__tests__/browser/file-tree-model.service.test.ts
@@ -1,4 +1,4 @@
-import { TreeNodeType } from '@opensumi/ide-components';
+import { ICompositeTreeNode, TreeNodeType } from '@opensumi/ide-components';
 import {
   URI,
   Disposable,
@@ -7,6 +7,7 @@ import {
   IApplicationService,
   Emitter,
   OS,
+  EDITOR_COMMANDS,
 } from '@opensumi/ide-core-browser';
 import { ICtxMenuRenderer } from '@opensumi/ide-core-browser/lib/menu/next';
 import { LabelService } from '@opensumi/ide-core-browser/lib/services';
@@ -28,6 +29,7 @@ import styles from '../../src/browser/file-tree-node.modules.less';
 import { Directory, File } from '../../src/common/file-tree-node.define';
 
 class TempDirectory {}
+class TempFile {}
 
 describe('FileTreeModelService should be work', () => {
   (global as any).monaco = createMockedMonaco() as any;
@@ -38,6 +40,20 @@ describe('FileTreeModelService should be work', () => {
   const mockWatcher = {
     callback: jest.fn(),
   };
+  const newFileByName = (name) => {
+    const file = {
+      uri: rootUri.resolve(name),
+      name,
+      filestat: {
+        uri: rootUri.resolve(name).toString(),
+        isDirectory: false,
+        lastModification: new Date().getTime(),
+      },
+      type: TreeNodeType.TreeNode,
+    } as File;
+    file.constructor = new TempFile().constructor;
+    return file;
+  };
   const newDirectoryByName = (name) => {
     const directory = {
       uri: rootUri.resolve(name),
@@ -47,6 +63,8 @@ describe('FileTreeModelService should be work', () => {
         isDirectory: true,
         lastModification: new Date().getTime(),
       },
+      expanded: false,
+      children: null,
       type: TreeNodeType.CompositeTreeNode,
     } as Directory;
     directory.constructor = new TempDirectory().constructor;
@@ -97,6 +115,7 @@ describe('FileTreeModelService should be work', () => {
     resolveChildren: jest.fn(() => [mockRoot]),
     startWatchFileEvent: jest.fn(),
     refresh: jest.fn(),
+    openFile: jest.fn(),
     contextMenuContextKeyService: new MockContextKeyService().createScoped({} as any),
     get contextKey() {
       return contextKey;
@@ -358,6 +377,7 @@ describe('FileTreeModelService should be work', () => {
     expect(mockEvent.stopPropagation).toBeCalledTimes(1);
     expect(mockEvent.preventDefault).toBeCalledTimes(1);
   });
+
   it('should set correct context key', () => {
     const mockNode: Directory = newDirectoryByName('testDirectory');
     const mockEvent = {
@@ -383,4 +403,20 @@ describe('FileTreeModelService should be work', () => {
     fileTreeModelService.handleContextMenu(mockEvent, undefined);
     expect(fileTreeModelService.contextKey.explorerResourceIsFolder.get()).toBeTruthy();
   });
+
+  it('toggleOrOpenCurrentFile method should be work', async () => {
+    const errorEmitter = new Emitter();
+    const treeHandle = { collapseNode: jest.fn(), expandNode: jest.fn(), onError: errorEmitter.event } as any;
+    // Toggle Directory
+    const directory = newDirectoryByName('test');
+    fileTreeModelService.activeFileDecoration(directory);
+    fileTreeModelService.handleTreeHandler(treeHandle);
+    await fileTreeModelService.toggleOrOpenCurrentFile();
+    expect(treeHandle.expandNode).toBeCalledTimes(1);
+    // Open File
+    const file = newFileByName('test.js');
+    fileTreeModelService.activeFileDecoration(file);
+    await fileTreeModelService.toggleOrOpenCurrentFile();
+    expect(mockFileTreeService.openFile).toBeCalledTimes(1);
+  });
 });
diff --git a/packages/file-tree-next/src/browser/file-tree-contribution.ts b/packages/file-tree-next/src/browser/file-tree-contribution.ts
@@ -1006,6 +1006,12 @@ export class FileTreeContribution
       },
     });
 
+    commands.registerCommand(FILE_COMMANDS.TOGGLE_OR_OPEN, {
+      execute: () => {
+        this.fileTreeModelService.toggleOrOpenCurrentFile();
+      },
+    });
+
     commands.registerCommand(WORKSPACE_COMMANDS.REMOVE_WORKSPACE_FOLDER, {
       execute: async (_: URI, uris: URI[]) => {
         exitFilterMode();
@@ -1099,6 +1105,12 @@ export class FileTreeContribution
       when: `${FilesExplorerFocusedContext.raw} && !${FilesExplorerInputFocusedContext.raw}`,
     });
 
+    bindings.registerKeybinding({
+      command: FILE_COMMANDS.TOGGLE_OR_OPEN.id,
+      keybinding: 'space',
+      when: `${FilesExplorerFocusedContext.raw} && !${FilesExplorerInputFocusedContext.raw}`,
+    });
+
     bindings.registerKeybinding({
       command: FILE_COMMANDS.REVEAL_IN_EXPLORER.id,
       keybinding: 'ctrlcmd+shift+e',

diff --git a/packages/file-tree-next/src/browser/services/file-tree-model.service.ts b/packages/file-tree-next/src/browser/services/file-tree-model.service.ts
@@ -870,6 +870,24 @@ export class FileTreeModelService {
     }
   };
 
+  public toggleOrOpenCurrentFile() {
+    let node;
+    if (this.focusedFile) {
+      node = this.focusedFile;
+    } else if (this.contextMenuFile) {
+      node = this.contextMenuFile;
+    }
+    if (!node) {
+      return;
+    }
+    this.activeFileDecoration(node);
+    if (Directory.is(node)) {
+      this.toggleDirectory(node as Directory);
+    } else {
+      this.fileTreeService.openFile(node.uri);
+    }
+  }
+
   public moveToNext() {
     let node;
     if (this.focusedFile) {