Use event emitter for ciontext menu action

pull/752/head
ioedeveloper 4 years ago
parent 9f4599eb7c
commit 2cb01ff79f
  1. 8
      apps/remix-ide/src/app/panels/file-panel.js
  2. 4
      libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx
  3. 12
      libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
  4. 3
      libs/remix-ui/file-explorer/src/lib/types/index.ts

@ -108,11 +108,11 @@ module.exports = class Filepanel extends ViewPlugin {
* @param item { name: string, type?: string[], path?: string[], extension?: string[], pattern?: string[] } * @param item { name: string, type?: string[], path?: string[], extension?: string[], pattern?: string[] }
* @param callback (...args) => void * @param callback (...args) => void
*/ */
registerContextMenuItem (item, callback) { registerContextMenuItem (item) {
if (!item.name || !callback) return console.error('menu name and callback is mandatory') if (!item) throw new Error('Invalid register context menu argument')
if (!item.type && !item.path && !item.extension && !item.pattern) return console.error('invalid file matching criteria provided') 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.registeredMenuItems = [...this.registeredMenuItems, item]
this.renderComponent() this.renderComponent()
} }

@ -4,7 +4,7 @@ import { FileExplorerContextMenuProps } from './types'
import './css/file-explorer-context-menu.css' import './css/file-explorer-context-menu.css'
export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) => { 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) const contextMenuRef = useRef(null)
useEffect(() => { useEffect(() => {
@ -56,7 +56,7 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
runScript(path) runScript(path)
break break
default: default:
item.action && item.action(path) emit && emit(item.id, path)
break break
} }
hideContextMenu() hideContextMenu()

@ -76,36 +76,42 @@ export const FileExplorer = (props: FileExplorerProps) => {
const accessToken = config.get('settings/gist-access-token') const accessToken = config.get('settings/gist-access-token')
const files = await fetchDirectoryContent(name) const files = await fetchDirectoryContent(name)
const actions = [{ const actions = [{
id: 'newFile',
name: 'New File', name: 'New File',
type: ['folder'], type: ['folder'],
path: [], path: [],
extension: [], extension: [],
pattern: [] pattern: []
}, { }, {
id: 'newFolder',
name: 'New Folder', name: 'New Folder',
type: ['folder'], type: ['folder'],
path: [], path: [],
extension: [], extension: [],
pattern: [] pattern: []
}, { }, {
id: 'rename',
name: 'Rename', name: 'Rename',
type: ['file', 'folder'], type: ['file', 'folder'],
path: [], path: [],
extension: [], extension: [],
pattern: [] pattern: []
}, { }, {
id: 'delete',
name: 'Delete', name: 'Delete',
type: ['file', 'folder'], type: ['file', 'folder'],
path: [], path: [],
extension: [], extension: [],
pattern: [] pattern: []
}, { }, {
id: 'pushChangesToGist',
name: 'Push changes to gist', name: 'Push changes to gist',
type: [], type: [],
path: [], path: [],
extension: [], extension: [],
pattern: ['^browser/gists/([0-9]|[a-z])*$'] pattern: ['^browser/gists/([0-9]|[a-z])*$']
}, { }, {
id: 'run',
name: 'Run', name: 'Run',
type: [], type: [],
path: [], path: [],
@ -614,6 +620,10 @@ export const FileExplorer = (props: FileExplorerProps) => {
}) })
} }
const emitContextMenuEvent = (id: string, path: string) => {
plugin.emit(id, path)
}
const handleHideModal = () => { const handleHideModal = () => {
setState(prevState => { setState(prevState => {
return { ...prevState, modalOptions: { ...state.modalOptions, hide: true } } return { ...prevState, modalOptions: { ...state.modalOptions, hide: true } }
@ -850,6 +860,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
deletePath={deletePath} deletePath={deletePath}
renamePath={editModeOn} renamePath={editModeOn}
publishToGist={publishToGist} publishToGist={publishToGist}
emit={emitContextMenuEvent}
pageX={state.focusContext.x} pageX={state.focusContext.x}
pageY={state.focusContext.y} pageY={state.focusContext.y}
path={file.path} path={file.path}
@ -886,6 +897,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
deletePath={deletePath} deletePath={deletePath}
renamePath={editModeOn} renamePath={editModeOn}
runScript={runScript} runScript={runScript}
emit={emitContextMenuEvent}
pageX={state.focusContext.x} pageX={state.focusContext.x}
pageY={state.focusContext.y} pageY={state.focusContext.y}
path={file.path} path={file.path}

@ -27,7 +27,7 @@ export interface FileExplorerMenuProps {
} }
export interface FileExplorerContextMenuProps { 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, createNewFile: (folder?: string) => void,
createNewFolder: (parentFolder?: string) => void, createNewFolder: (parentFolder?: string) => void,
deletePath: (path: string) => void, deletePath: (path: string) => void,
@ -35,6 +35,7 @@ export interface FileExplorerContextMenuProps {
hideContextMenu: () => void, hideContextMenu: () => void,
publishToGist?: () => void, publishToGist?: () => void,
runScript?: (path: string) => void, runScript?: (path: string) => void,
emit?: (id: string, path: string) => void,
pageX: number, pageX: number,
pageY: number, pageY: number,
path: string, path: string,

Loading…
Cancel
Save