mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Use single context menu

Browse Source
pull/966/head
ioedeveloper 4 years ago
parent b7068d35f6
commit dbddcce41a
1 changed files with 85 additions and 107 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 192
      libs/remix-ui/file-explorer/src/lib/file-explorer.tsx

192
libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
Unescape View File

@ -32,7 +32,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
focusContext: { focusContext: {
element: null, element: null,
x: null, x: null,
y: null y: null,
type: ''
}, },
focusEdit: { focusEdit: {
element: null, element: null,
@ -57,7 +58,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
}, },
modals: [], modals: [],
toasterMsg: '', toasterMsg: '',
mouseOverElement: null mouseOverElement: null,
showContextMenu: false
}) })
const editRef = useRef(null) const editRef = useRef(null)
@ -755,20 +757,20 @@ export const FileExplorer = (props: FileExplorerProps) => {
const handleContextMenuFile = (pageX: number, pageY: number, path: string, content: string) => { const handleContextMenuFile = (pageX: number, pageY: number, path: string, content: string) => {
if (!content) return if (!content) return
setState(prevState => { setState(prevState => {
return { ...prevState, focusContext: { element: path, x: pageX, y: pageY }, focusEdit: { ...prevState.focusEdit, lastEdit: content } } return { ...prevState, focusContext: { element: path, x: pageX, y: pageY, type: 'file' }, focusEdit: { ...prevState.focusEdit, lastEdit: content }, showContextMenu: prevState.focusEdit.element !== path }
}) })
} }
const handleContextMenuFolder = (pageX: number, pageY: number, path: string, content: string) => { const handleContextMenuFolder = (pageX: number, pageY: number, path: string, content: string) => {
if (!content) return if (!content) return
setState(prevState => { setState(prevState => {
return { ...prevState, focusContext: { element: path, x: pageX, y: pageY }, focusEdit: { ...prevState.focusEdit, lastEdit: content } } return { ...prevState, focusContext: { element: path, x: pageX, y: pageY, type: 'folder' }, focusEdit: { ...prevState.focusEdit, lastEdit: content }, showContextMenu: prevState.focusEdit.element !== path }
}) })
} }
const hideContextMenu = () => { const hideContextMenu = () => {
setState(prevState => { setState(prevState => {
return { ...prevState, focusContext: { element: null, x: 0, y: 0 } } return { ...prevState, focusContext: { element: null, x: 0, y: 0, type: '' }, showContextMenu: false }
}) })
} }
@ -907,113 +909,69 @@ export const FileExplorer = (props: FileExplorerProps) => {
if (file.isDirectory) { if (file.isDirectory) {
return ( return (
<div key={index}> <TreeViewItem
<TreeViewItem id={`treeViewItem${file.path}`}
id={`treeViewItem${file.path}`} iconX='pr-3 fa fa-folder'
iconX='pr-3 fa fa-folder' iconY='pr-3 fa fa-folder-open'
iconY='pr-3 fa fa-folder-open' key={`${file.path + index}`}
key={`${file.path + index}`} label={label(file)}
label={label(file)} onClick={(e) => {
onClick={(e) => { e.stopPropagation()
e.stopPropagation() if (state.focusEdit.element !== file.path) handleClickFolder(file.path)
if (state.focusEdit.element !== file.path) handleClickFolder(file.path) }}
}} onContextMenu={(e) => {
onContextMenu={(e) => { e.preventDefault()
e.preventDefault() e.stopPropagation()
e.stopPropagation() handleContextMenuFolder(e.pageX, e.pageY, file.path, e.target.textContent)
handleContextMenuFolder(e.pageX, e.pageY, file.path, e.target.textContent) }}
}} labelClass={labelClass}
labelClass={labelClass} controlBehaviour={ state.ctrlKey }
controlBehaviour={ state.ctrlKey } expand={state.expandPath.includes(file.path)}
expand={state.expandPath.includes(file.path)} onMouseOver={(e) => {
onMouseOver={(e) => { e.stopPropagation()
e.stopPropagation() handleMouseOver(file.path)
handleMouseOver(file.path) }}
}} onMouseOut={(e) => {
onMouseOut={(e) => { e.stopPropagation()
e.stopPropagation() if (state.mouseOverElement === file.path) handleMouseOut()
if (state.mouseOverElement === file.path) handleMouseOut() }}
}} >
> {
{ file.child ? <TreeView id={`treeView${file.path}`} key={index}>{
file.child ? <TreeView id={`treeView${file.path}`} key={index}>{ file.child.map((file, index) => {
file.child.map((file, index) => { return renderFiles(file, index)
return renderFiles(file, index) })
})
}
</TreeView> : <TreeView id={`treeView${file.path}`} key={index} />
} }
</TreeViewItem> </TreeView> : <TreeView id={`treeView${file.path}`} key={index} />
{ ((state.focusContext.element === file.path) && (state.focusEdit.element !== file.path)) &&
<FileExplorerContextMenu
actions={state.actions}
hideContextMenu={hideContextMenu}
createNewFile={handleNewFileInput}
createNewFolder={handleNewFolderInput}
deletePath={deletePath}
renamePath={editModeOn}
publishToGist={publishToGist}
emit={emitContextMenuEvent}
pageX={state.focusContext.x}
pageY={state.focusContext.y}
path={file.path}
type='folder'
onMouseOver={(e) => {
e.stopPropagation()
handleMouseOver(file.path)
}}
/>
} }
</div> </TreeViewItem>
) )
} else { } else {
return ( return (
<div key={index}> <TreeViewItem
<TreeViewItem id={`treeViewItem${file.path}`}
id={`treeViewItem${file.path}`} key={index}
key={index} label={label(file)}
label={label(file)} onClick={(e) => {
onClick={(e) => { e.stopPropagation()
e.stopPropagation() if (state.focusEdit.element !== file.path) handleClickFile(file.path)
if (state.focusEdit.element !== file.path) handleClickFile(file.path) }}
}} onContextMenu={(e) => {
onContextMenu={(e) => { e.preventDefault()
e.preventDefault() e.stopPropagation()
e.stopPropagation() handleContextMenuFile(e.pageX, e.pageY, file.path, e.target.textContent)
handleContextMenuFile(e.pageX, e.pageY, file.path, e.target.textContent) }}
}} icon={icon}
icon={icon} labelClass={labelClass}
labelClass={labelClass} onMouseOver={(e) => {
onMouseOver={(e) => { e.stopPropagation()
e.stopPropagation() handleMouseOver(file.path)
handleMouseOver(file.path) }}
}} onMouseOut={(e) => {
onMouseOut={(e) => { e.stopPropagation()
e.stopPropagation() if (state.mouseOverElement === file.path) handleMouseOut()
if (state.mouseOverElement === file.path) handleMouseOut() }}
}} />
/>
{ ((state.focusContext.element === file.path) && (state.focusEdit.element !== file.path)) &&
<FileExplorerContextMenu
actions={state.actions}
hideContextMenu={hideContextMenu}
createNewFile={handleNewFileInput}
createNewFolder={handleNewFolderInput}
deletePath={deletePath}
renamePath={editModeOn}
runScript={runScript}
emit={emitContextMenuEvent}
pageX={state.focusContext.x}
pageY={state.focusContext.y}
path={file.path}
type='file'
onMouseOver={(e) => {
e.stopPropagation()
handleMouseOver(file.path)
}}
/>
}
</div>
) )
} }
} }
@ -1073,6 +1031,26 @@ export const FileExplorer = (props: FileExplorerProps) => {
/> />
} }
<Toaster message={state.toasterMsg} /> <Toaster message={state.toasterMsg} />
{ state.showContextMenu &&
<FileExplorerContextMenu
actions={state.actions}
hideContextMenu={hideContextMenu}
createNewFile={handleNewFileInput}
createNewFolder={handleNewFolderInput}
deletePath={deletePath}
renamePath={editModeOn}
runScript={runScript}
emit={emitContextMenuEvent}
pageX={state.focusContext.x}
pageY={state.focusContext.y}
path={state.focusContext.element}
type={state.focusContext.type}
onMouseOver={(e) => {
e.stopPropagation()
handleMouseOver(state.focusContext.element)
}}
/>
}
</div> </div>
) )
} }

Write Preview
Loading…
Cancel
Save