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 06cd4af7e5..aba532f4f1 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx @@ -11,7 +11,6 @@ import './css/file-explorer.css' export const FileExplorer = (props: FileExplorerProps) => { const { filesProvider, name, registry, plugin } = props - const containerRef = useRef(null) const [state, setState] = useState({ focusElement: [{ key: name, @@ -32,7 +31,8 @@ export const FileExplorer = (props: FileExplorerProps) => { focusEdit: { element: null, type: '', - isNew: false + isNew: false, + lastEdit: '' }, fileExternallyChanged: false, expandPath: [], @@ -180,12 +180,6 @@ export const FileExplorer = (props: FileExplorerProps) => { } const createNewFolder = async (parentFolder: string, newFolderPath: string) => { - // const self = this - // modalDialogCustom.prompt('Create new folder', '', 'New folder', (input) => { - // if (!input) { - // return tooltip('Failed to create folder. The name can not be empty') - // } - const fileManager = state.fileManager const dirName = newFolderPath + '/' // if (error) return tooltip('Unexpected error while creating folder: ' + error) @@ -198,18 +192,14 @@ export const FileExplorer = (props: FileExplorerProps) => { } catch (e) { // tooltip('Failed to create file ' + newName) } - // }, null, true) } const deletePath = async (path: string) => { // if (self.files.isReadOnly(key)) { return tooltip('cannot delete file. ' + self.files.type + ' is a read only explorer') } if (filesProvider.isReadOnly(path)) return - // modalDialogCustom.confirm( - // 'Delete file', `Are you sure you want to delete ${currentFilename} file?`, - // async () => { const isDir = state.fileManager.isDirectory(path) - showModal('Delete file', `Are you sure you want to delete ${path} ${isDir ? 'folder' : 'file'}?`, { + modal('Delete file', `Are you sure you want to delete ${path} ${isDir ? 'folder' : 'file'}?`, { label: 'Ok', fn: async () => { try { @@ -236,14 +226,19 @@ export const FileExplorer = (props: FileExplorerProps) => { const fileManager = state.fileManager const exists = fileManager.exists(newPath) - if (exists) return - // modalDialogCustom.alert(File already exists.) - await fileManager.rename(oldPath, newPath) - const files = replacePath(oldPath, newPath, state.files) + if (exists) { + return modal('Create File Failed', 'File already exists', { + label: 'Ok', + fn: async () => {} + }, null) + } else { + await fileManager.rename(oldPath, newPath) + const files = replacePath(oldPath, newPath, state.files) - setState(prevState => { - return { ...prevState, files } - }) + setState(prevState => { + return { ...prevState, files } + }) + } } catch (error) { // modalDialogCustom.alert('Unexpected error while renaming: ' + error) } @@ -504,7 +499,7 @@ export const FileExplorer = (props: FileExplorerProps) => { }) } - const showModal = (title: string, message: string, ok: { label: string, fn: () => void }, cancel: { label: string, fn: () => void }) => { + const modal = (title: string, message: string, ok: { label: string, fn: () => void }, cancel: { label: string, fn: () => void }) => { setState(prevState => { return { ...prevState, @@ -555,15 +550,17 @@ export const FileExplorer = (props: FileExplorerProps) => { } } - const handleContextMenuFile = (pageX: number, pageY: number, path: string) => { + const handleContextMenuFile = (pageX: number, pageY: number, path: string, content: string) => { + if (!content) return setState(prevState => { - return { ...prevState, focusContext: { element: path, x: pageX, y: pageY } } + return { ...prevState, focusContext: { element: path, x: pageX, y: pageY }, focusEdit: { ...prevState.focusEdit, lastEdit: content } } }) } - const handleContextMenuFolder = (pageX: number, pageY: number, path: string) => { + const handleContextMenuFolder = (pageX: number, pageY: number, path: string, content: string) => { + if (!content) return setState(prevState => { - return { ...prevState, focusContext: { element: path, x: pageX, y: pageY } } + return { ...prevState, focusContext: { element: path, x: pageX, y: pageY }, focusEdit: { ...prevState.focusEdit, lastEdit: content } } }) } @@ -576,7 +573,7 @@ export const FileExplorer = (props: FileExplorerProps) => { const editModeOn = (path: string, type: string, isNew: boolean = false) => { if (filesProvider.isReadOnly(path)) return setState(prevState => { - return { ...prevState, focusEdit: { element: path, isNew, type } } + return { ...prevState, focusEdit: { ...prevState.focusEdit, element: path, isNew, type } } }) } @@ -589,23 +586,16 @@ export const FileExplorer = (props: FileExplorerProps) => { const updatedFiles = files.filter(file => file) setState(prevState => { - return { ...prevState, files: updatedFiles, focusEdit: { element: null, isNew: false, type: '' } } + return { ...prevState, files: updatedFiles, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } } }) } else { - // modalDialogCustom.alert('Are you sure you want to delete this file?') - if (true) { // eslint-disable-line - await deletePath(state.focusEdit.element) - - setState(prevState => { - return { ...prevState, focusEdit: { element: null, isNew: false, type: '' } } - }) - } else { - - } + setState(prevState => { + return { ...prevState, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } } + }) } } else { if (helper.checkSpecialChars(content)) { - showModal('Validation Error', 'Special characters are not allowed', { + modal('Validation Error', 'Special characters are not allowed', { label: 'Ok', fn: () => {} }, null) @@ -626,7 +616,7 @@ export const FileExplorer = (props: FileExplorerProps) => { renamePath(oldPath, newPath) } setState(prevState => { - return { ...prevState, focusEdit: { element: null, isNew: false, type: '' } } + return { ...prevState, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } } }) } } @@ -693,7 +683,7 @@ export const FileExplorer = (props: FileExplorerProps) => { onContextMenu={(e) => { e.preventDefault() e.stopPropagation() - handleContextMenuFolder(e.pageX, e.pageY, file.path) + handleContextMenuFolder(e.pageX, e.pageY, file.path, e.target.textContent) }} labelClass={ state.focusEdit.element === file.path ? 'bg-light' : state.focusElement.findIndex(item => item.key === file.path) !== -1 ? 'bg-secondary' : '' } editable={state.focusEdit.element === file.path} @@ -740,7 +730,7 @@ export const FileExplorer = (props: FileExplorerProps) => { onContextMenu={(e) => { e.preventDefault() e.stopPropagation() - handleContextMenuFile(e.pageX, e.pageY, file.path) + handleContextMenuFile(e.pageX, e.pageY, file.path, e.target.textContent) }} icon='fa fa-file' labelClass={ state.focusEdit.element === file.path ? 'bg-light' : state.focusElement.findIndex(item => item.key === file.path) !== -1 ? 'bg-secondary' : '' } @@ -767,22 +757,7 @@ export const FileExplorer = (props: FileExplorerProps) => { } return ( -
{ - if (e.ctrlKey) { - setState(prevState => { - return { ...prevState, ctrlKey: true } - }) - } - }} - onKeyUp={() => { - setState(prevState => { - return { ...prevState, ctrlKey: false } - }) - }} - > +