From b08f56f280d90d846aa0b62eb4385a9ede9f5235 Mon Sep 17 00:00:00 2001 From: zhangtengjin <1257450210@qq.com> Date: Thu, 11 Mar 2021 11:08:36 +0800 Subject: [PATCH] feat: define contextMenu command id define contextMenu command id --- src/controller/explorer/folderTree.tsx | 62 +++++++++----------------- src/model/workbench/explorer.tsx | 47 ++++++++++++++++--- 2 files changed, 60 insertions(+), 49 deletions(-) diff --git a/src/controller/explorer/folderTree.tsx b/src/controller/explorer/folderTree.tsx index 134b4a97c..3abe09d4d 100644 --- a/src/controller/explorer/folderTree.tsx +++ b/src/controller/explorer/folderTree.tsx @@ -6,7 +6,13 @@ import { editorService, explorerService } from 'mo'; import { EditorController } from 'mo/controller/editor'; import { IMenuItem } from 'mo/components/menu'; import Modal from 'mo/components/dialog'; -import { IFolderInputEvent, TreeNodeModel } from 'mo/model'; +import { + IFolderInputEvent, TreeNodeModel, + baseContextMenu, rootFolderContextMenu, fileContextMenu, + NEW_FILE_COMMAND_ID, NEW_FOLDER_COMMAND_ID, RENAME_COMMAND_ID, + REMOVE_COMMAND_ID, DELETE_COMMAND_ID, OPEN_TO_SIDE_COMMAND_ID, + ADD_ROOT_FOLDER_COMMAND_ID +} from 'mo/model'; const confirm = Modal.confirm; export interface IFolderTreeController { @@ -35,7 +41,7 @@ export class FolderTreeController this.initView(); } - private initView() {} + private initView() { } public readonly onSelectFile = (file: ITreeNodeItem, isAuto?: boolean) => { const tabData = { @@ -90,14 +96,14 @@ export class FolderTreeController const { id: nodeId, name } = node as any; console.log('onClickContextMenu => Item', item); switch (menuId) { - case 'rename': { + case RENAME_COMMAND_ID: { explorerService.rename(nodeId, () => { events?.setValue?.(name); events?.onFocus(); }); break; } - case 'delete': { + case DELETE_COMMAND_ID: { confirm({ title: `Are you sure you want to delete '${name}' ?`, content: 'This action is irreversible!', @@ -112,23 +118,23 @@ export class FolderTreeController }); break; } - case 'newFile': { + case NEW_FILE_COMMAND_ID: { explorerService.newFile(nodeId, () => { events?.onFocus(); }); break; } - case 'newFolder': { + case NEW_FOLDER_COMMAND_ID: { explorerService.newFolder(nodeId, () => { events?.onFocus(); }); break; } - case 'remove': { + case REMOVE_COMMAND_ID: { explorerService.removeRootFolder(nodeId); break; } - case 'addRootFolder': { + case ADD_ROOT_FOLDER_COMMAND_ID: { explorerService.addRootFolder?.( new TreeNodeModel({ name: `molecule_temp${Math.random()}`, @@ -137,7 +143,7 @@ export class FolderTreeController ); break; } - case 'openTab': { + case OPEN_TO_SIDE_COMMAND_ID: { console.log('OpenTab'); break; // editorService.open(); @@ -147,48 +153,20 @@ export class FolderTreeController public readonly filterContextMenu = (menus, node) => { let menu; - const baseContextMenu = [ - { - id: 'newFile', - name: 'New File', - }, - { - id: 'newFolder', - name: 'New Folder', - }, - ]; - - const rootFolderContextMenu = [ - { - id: 'remove', - name: 'Remove Folder', - }, - ]; - - const folderContextMenu = baseContextMenu.concat(menus); - - const fileContextMenu = [ - { - id: 'openToSide', - name: 'Open to the side', - }, - ].concat(menus); - - const rootFodlerContextMenu = baseContextMenu.concat( - rootFolderContextMenu - ); switch (node.fileType) { case FileTypes.file: { - menu = fileContextMenu; + menu = fileContextMenu.concat(menus); break; } case FileTypes.folder: { - menu = folderContextMenu; + menu = baseContextMenu.concat(menus); break; } case FileTypes.rootFolder: { - menu = rootFodlerContextMenu; + menu = baseContextMenu.concat( + rootFolderContextMenu + );; break; } default: diff --git a/src/model/workbench/explorer.tsx b/src/model/workbench/explorer.tsx index 170600229..1f43eaeb2 100644 --- a/src/model/workbench/explorer.tsx +++ b/src/model/workbench/explorer.tsx @@ -30,6 +30,16 @@ export interface IExplorer { folderTree?: IFolderTree; } +export const NEW_FILE_COMMAND_ID = 'explorer.newFile'; +export const NEW_FOLDER_COMMAND_ID = 'explorer.newFolder'; +export const RENAME_COMMAND_ID = 'explorer.rename'; +export const REMOVE_COMMAND_ID = 'explorer.remove'; +export const DELETE_COMMAND_ID = 'explorer.delete'; +export const OPEN_TO_SIDE_COMMAND_ID = 'explorer.openToSide'; +export const ADD_ROOT_FOLDER_COMMAND_ID = 'addRootFolder'; +export const FIND_IN_WORKSPACE_ID = 'filesExplorer.findInWorkspace'; +export const DOWNLOAD_COMMAND_ID = 'explorer.download'; + const builtInHeaderToolbar: IActivityBarItem[] = [ { id: 'explorer-more', @@ -56,29 +66,52 @@ const builtInHeaderToolbar: IActivityBarItem[] = [ }, ]; -const commonContextMenu = [ +// TODO: name property extract, to adapt Localize +export const commonContextMenu = [ { - id: 'rename', + id: RENAME_COMMAND_ID, name: 'Rename', }, { - id: 'delete', + id: DELETE_COMMAND_ID, name: 'Delete', }, ]; +export const baseContextMenu = [ + { + id: NEW_FILE_COMMAND_ID, + name: 'New File', + }, + { + id: NEW_FOLDER_COMMAND_ID, + name: 'New Folder', + }, +]; +export const rootFolderContextMenu = [ + { + id: RENAME_COMMAND_ID, + name: 'Remove Folder', + }, +]; +export const fileContextMenu = [ + { + id: OPEN_TO_SIDE_COMMAND_ID, + name: 'Open to the Side', + }, +] // Sample folder panel area ContextMenu -const folderPanelContextMenu = [ +export const folderPanelContextMenu = [ { - id: 'addRootFolder', + id: ADD_ROOT_FOLDER_COMMAND_ID, name: 'Add Folder to Workspace...', }, { - id: 'find', + id: FIND_IN_WORKSPACE_ID, name: 'Find in Workspace...', }, { - id: 'download', + id: DOWNLOAD_COMMAND_ID, name: 'Download...', }, ];