From 2cb01ff79f8511c80fb92108d2eb1d9d6c00e95a Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 19 Jan 2021 16:33:33 +0100 Subject: [PATCH] Use event emitter for ciontext menu action --- apps/remix-ide/src/app/panels/file-panel.js | 8 ++++---- .../src/lib/file-explorer-context-menu.tsx | 4 ++-- .../remix-ui/file-explorer/src/lib/file-explorer.tsx | 12 ++++++++++++ libs/remix-ui/file-explorer/src/lib/types/index.ts | 3 ++- 4 files changed, 20 insertions(+), 7 deletions(-) diff --git a/apps/remix-ide/src/app/panels/file-panel.js b/apps/remix-ide/src/app/panels/file-panel.js index d9ddbe078e..dfdf8c7e01 100644 --- a/apps/remix-ide/src/app/panels/file-panel.js +++ b/apps/remix-ide/src/app/panels/file-panel.js @@ -108,11 +108,11 @@ module.exports = class Filepanel extends ViewPlugin { * @param item { name: string, type?: string[], path?: string[], extension?: string[], pattern?: string[] } * @param callback (...args) => void */ - registerContextMenuItem (item, callback) { - if (!item.name || !callback) return console.error('menu name and callback is mandatory') - if (!item.type && !item.path && !item.extension && !item.pattern) return console.error('invalid file matching criteria provided') + registerContextMenuItem (item) { + if (!item) throw new Error('Invalid register context menu argument') + if (!item.name || !item.id) throw new Error('Item name and id is mandatory') + if (!item.type && !item.path && !item.extension && !item.pattern) throw new Error('Invalid file matching criteria provided') - item.action = callback this.registeredMenuItems = [...this.registeredMenuItems, item] this.renderComponent() } diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx index 6f884221e1..3a842d91b3 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx @@ -4,7 +4,7 @@ import { FileExplorerContextMenuProps } from './types' import './css/file-explorer-context-menu.css' export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) => { - const { actions, createNewFile, createNewFolder, deletePath, renamePath, hideContextMenu, publishToGist, runScript, pageX, pageY, path, type, ...otherProps } = props + const { actions, createNewFile, createNewFolder, deletePath, renamePath, hideContextMenu, publishToGist, runScript, emit, pageX, pageY, path, type, ...otherProps } = props const contextMenuRef = useRef(null) useEffect(() => { @@ -56,7 +56,7 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) => runScript(path) break default: - item.action && item.action(path) + emit && emit(item.id, path) break } hideContextMenu() diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx index c476e8b853..e7e2f6e31f 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx @@ -76,36 +76,42 @@ export const FileExplorer = (props: FileExplorerProps) => { const accessToken = config.get('settings/gist-access-token') const files = await fetchDirectoryContent(name) const actions = [{ + id: 'newFile', name: 'New File', type: ['folder'], path: [], extension: [], pattern: [] }, { + id: 'newFolder', name: 'New Folder', type: ['folder'], path: [], extension: [], pattern: [] }, { + id: 'rename', name: 'Rename', type: ['file', 'folder'], path: [], extension: [], pattern: [] }, { + id: 'delete', name: 'Delete', type: ['file', 'folder'], path: [], extension: [], pattern: [] }, { + id: 'pushChangesToGist', name: 'Push changes to gist', type: [], path: [], extension: [], pattern: ['^browser/gists/([0-9]|[a-z])*$'] }, { + id: 'run', name: 'Run', type: [], path: [], @@ -614,6 +620,10 @@ export const FileExplorer = (props: FileExplorerProps) => { }) } + const emitContextMenuEvent = (id: string, path: string) => { + plugin.emit(id, path) + } + const handleHideModal = () => { setState(prevState => { return { ...prevState, modalOptions: { ...state.modalOptions, hide: true } } @@ -850,6 +860,7 @@ export const FileExplorer = (props: FileExplorerProps) => { deletePath={deletePath} renamePath={editModeOn} publishToGist={publishToGist} + emit={emitContextMenuEvent} pageX={state.focusContext.x} pageY={state.focusContext.y} path={file.path} @@ -886,6 +897,7 @@ export const FileExplorer = (props: FileExplorerProps) => { deletePath={deletePath} renamePath={editModeOn} runScript={runScript} + emit={emitContextMenuEvent} pageX={state.focusContext.x} pageY={state.focusContext.y} path={file.path} diff --git a/libs/remix-ui/file-explorer/src/lib/types/index.ts b/libs/remix-ui/file-explorer/src/lib/types/index.ts index 27bb218336..caa203ab7b 100644 --- a/libs/remix-ui/file-explorer/src/lib/types/index.ts +++ b/libs/remix-ui/file-explorer/src/lib/types/index.ts @@ -27,7 +27,7 @@ export interface FileExplorerMenuProps { } export interface FileExplorerContextMenuProps { - actions: { name: string, type: string[], path: string[], extension: string[], pattern: string[], action?: (...args) => void }[], + actions: { name: string, type: string[], path: string[], extension: string[], pattern: string[], id: string }[], createNewFile: (folder?: string) => void, createNewFolder: (parentFolder?: string) => void, deletePath: (path: string) => void, @@ -35,6 +35,7 @@ export interface FileExplorerContextMenuProps { hideContextMenu: () => void, publishToGist?: () => void, runScript?: (path: string) => void, + emit?: (id: string, path: string) => void, pageX: number, pageY: number, path: string,