Display modal on delete

libs/remix-ui/file-explorer/src/lib/file-explorer.tsx

@@ -3,6 +3,7 @@ import { TreeView, TreeViewItem } from '@remix-ui/tree-view' // eslint-disable-l
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd' // eslint-disable-line
 import { FileExplorerMenu } from './file-explorer-menu' // eslint-disable-line
 import { FileExplorerContextMenu } from './file-explorer-context-menu' // eslint-disable-line
+import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
 import { FileExplorerProps, File } from './types'
 import * as helper from '../../../../../apps/remix-ide/src/lib/helper'
 
@@ -34,7 +35,21 @@ export const FileExplorer = (props: FileExplorerProps) => {
       isNew: false
     },
     fileExternallyChanged: false,
-    expandPath: []
+    expandPath: [],
+    modalOptions: {
+      hide: true,
+      title: '',
+      message: '',
+      ok: {
+        label: 'Ok',
+        fn: null
+      },
+      cancel: {
+        label: 'Cancel',
+        fn: null
+      },
+      handleHide: null
+    }
   })
 
   useEffect(() => {
@@ -147,7 +162,6 @@ export const FileExplorer = (props: FileExplorerProps) => {
   }
 
   const createNewFile = (parentFolder: string, newFilePath: string) => {
-    // if (!parentFolder) parentFolder = state.focusElement[0] ? state.focusElement[0].type === 'folder' ? state.focusElement[0].key : extractParentFromKey(state.focusElement[0].key) : name
     const fileManager = state.fileManager
 
     helper.createNonClashingName(newFilePath, filesProvider, async (error, newName) => {
@@ -166,8 +180,6 @@ export const FileExplorer = (props: FileExplorerProps) => {
   }
 
   const createNewFolder = async (parentFolder: string, newFolderPath: string) => {
-    // if (!parentFolder) parentFolder = state.focusElement[0] ? state.focusElement[0].type === 'folder' ? state.focusElement[0].key : extractParentFromKey(state.focusElement[0].key) : name
-    // else if (parentFolder.indexOf('.sol') !== -1) parentFolder = extractParentFromKey(parentFolder)
     // const self = this
     // modalDialogCustom.prompt('Create new folder', '', 'New folder', (input) => {
     //   if (!input) {
@@ -192,14 +204,16 @@ export const FileExplorer = (props: FileExplorerProps) => {
   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
-    // const currentFilename = extractNameFromKey(path)
-
     // 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'}?`, {
+      label: 'Ok',
+      fn: async () => {
         try {
           const fileManager = state.fileManager
-
           await fileManager.remove(path)
           const files = removePath(path, state.files)
           const updatedFiles = files.filter(file => file)
@@ -210,9 +224,11 @@ export const FileExplorer = (props: FileExplorerProps) => {
         } catch (e) {
           // tooltip(`Failed to remove file ${key}.`)
         }
-    // },
-    // () => {}
-    // )
+      }
+    }, {
+      label: 'Cancel',
+      fn: () => {}
+    })
   }
 
   const renamePath = async (oldPath: string, newPath: string) => {
@@ -482,6 +498,29 @@ export const FileExplorer = (props: FileExplorerProps) => {
   //   }
   // })
 
+  const handleHideModal = () => {
+    setState(prevState => {
+      return { ...prevState, modalOptions: { ...state.modalOptions, hide: true } }
+    })
+  }
+
+  const showModal = (title: string, message: string, ok: { label: string, fn: () => void }, cancel: { label: string, fn: () => void }) => {
+    setState(prevState => {
+      return {
+        ...prevState,
+        modalOptions: {
+          ...prevState.modalOptions,
+          hide: false,
+          message,
+          title,
+          ok,
+          cancel,
+          handleHide: handleHideModal
+        }
+      }
+    })
+  }
+
   const handleClickFile = (path: string) => {
     state.fileManager.open(path)
     setState(prevState => {
@@ -564,8 +603,13 @@ export const FileExplorer = (props: FileExplorerProps) => {
 
         }
       }
-      return
-    }
+    } else {
+      if (helper.checkSpecialChars(content)) {
+        showModal('Validation Error', 'Special characters are not allowed', {
+          label: 'Ok',
+          fn: () => {}
+        }, null)
+      } else {
         if (state.focusEdit.isNew) {
           state.focusEdit.type === 'file' ? createNewFile(parentFolder, parentFolder + '/' + content) : createNewFolder(parentFolder, parentFolder + '/' + content)
           const files = removePath(state.focusEdit.element, state.files)
@@ -575,8 +619,6 @@ export const FileExplorer = (props: FileExplorerProps) => {
             return { ...prevState, files: updatedFiles }
           })
         } else {
-      if (helper.checkSpecialChars(content)) return
-      // modalDialogCustom.alert('Special characters are not allowed')
           const oldPath: string = state.focusEdit.element
           const oldName = extractNameFromKey(oldPath)
           const newPath = oldPath.replace(oldName, content)
@@ -587,6 +629,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
           return { ...prevState, focusEdit: { element: null, isNew: false, type: '' } }
         })
       }
+    }
+  }
 
   const handleNewFileInput = async (parentFolder?: string) => {
     if (!parentFolder) parentFolder = state.focusElement[0] ? state.focusElement[0].type === 'folder' ? state.focusElement[0].key : extractParentFromKey(state.focusElement[0].key) : name
@@ -602,7 +646,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
 
   const handleNewFolderInput = async (parentFolder?: string) => {
     if (!parentFolder) parentFolder = state.focusElement[0] ? state.focusElement[0].type === 'folder' ? state.focusElement[0].key : extractParentFromKey(state.focusElement[0].key) : name
-    else if (parentFolder.indexOf('.sol') !== -1) parentFolder = extractParentFromKey(parentFolder)
+    else if ((parentFolder.indexOf('.sol') !== -1) || (parentFolder.indexOf('.js') !== -1)) parentFolder = extractParentFromKey(parentFolder)
     let files = await resolveDirectory(parentFolder, state.files)
     const expandPath = [...state.expandPath, parentFolder]
 
@@ -765,6 +809,14 @@ export const FileExplorer = (props: FileExplorerProps) => {
           </div>
         </TreeViewItem>
       </TreeView>
+      <ModalDialog
+        title={ state.modalOptions.title }
+        message={ state.modalOptions.message }
+        hide={ state.modalOptions.hide }
+        ok={ state.modalOptions.ok }
+        cancel={ state.modalOptions.cancel }
+        handleHide={ handleHideModal }
+      />
     </div>
   )
 }

libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx

@@ -9,14 +9,12 @@ export const ModalDialog = (props: ModalDialogProps) => {
   })
   const modal = useRef(null)
   const handleHide = () => {
-    props.hide()
+    props.handleHide()
   }
 
-  useEffect(
-    () => {
+  useEffect(() => {
     modal.current.focus()
-    }, []
-  )
+  }, [props.hide])
 
   const modalKeyEvent = (keyCode) => {
     if (keyCode === 27) { // Esc
@@ -41,41 +39,40 @@ export const ModalDialog = (props: ModalDialogProps) => {
     }
     handleHide()
   }
-  return (<>
+
+  return (
     <div
       id="modal-dialog"
       data-id="modalDialogContainer"
       data-backdrop="static"
       data-keyboard="false"
-      tabIndex={-1}
-      className="modal d-block"
+      className='modal'
+      style={{ display: props.hide ? 'none' : 'block' }}
       role="dialog"
     >
       <div id="modal-background" className="modal-dialog" role="document">
         <div
-          tabIndex={1}
           onBlur={(e) => {
             e.stopPropagation()
             handleHide()
           }}
           ref={modal}
-          className={'modal-content remixModalContent ' + (props.opts ? props.opts.class ? props.opts.class : '' : '')}
+          tabIndex={-1}
+          className={'modal-content remixModalContent ' + (props.modalClass ? props.modalClass : '')}
           onKeyDown={({ keyCode }) => { modalKeyEvent(keyCode) }}
         >
           <div className="modal-header">
             <h6 className="modal-title" data-id="modalDialogModalTitle">
               {props.title && props.title}
             </h6>
-            {!props.opts.hideClose &&
+            {!props.showCancelIcon &&
             <span className="modal-close" onClick={() => handleHide()}>
               <i id="modal-close" title="Close" className="fas fa-times" aria-hidden="true"></i>
             </span>
             }
           </div>
           <div className="modal-body text-break remixModalBody" data-id="modalDialogModalBody">
-            {props.content &&
-            props.content
-            }
+            { props.children ? props.children : props.message }
           </div>
           <div className="modal-footer" data-id="modalDialogModalFooter">
             {/* todo add autofocus ^^ */}
@@ -84,31 +81,31 @@ export const ModalDialog = (props: ModalDialogProps) => {
                 id="modal-footer-ok"
                 className={'modal-ok btn btn-sm ' + (state.toggleBtn ? 'btn-dark' : 'btn-light')}
                 onClick={() => {
-                if (props.ok && props.ok.fn) props.ok.fn()
+                  if (props.ok.fn) props.ok.fn()
                   handleHide()
                 }}
-              tabIndex={1}
               >
-              {props.ok && props.ok.label ? props.ok.label : 'OK'}
+                { props.ok.label ? props.ok.label : 'OK' }
               </span>
             }
+            { props.cancel &&
               <span
                 id="modal-footer-cancel"
                 className={'modal-cancel btn btn-sm ' + (state.toggleBtn ? 'btn-light' : 'btn-dark')}
                 data-dismiss="modal"
                 onClick={() => {
-                if (props.cancel && props.cancel.fn) props.cancel.fn()
+                  if (props.cancel.fn) props.cancel.fn()
                   handleHide()
                 }}
-              tabIndex={2}
               >
-              {props.cancel && props.cancel.label ? props.cancel.label : 'Cancel'}
+                { props.cancel.label ? props.cancel.label : 'Cancel' }
               </span>
+            }
           </div>
         </div>
       </div>
     </div>
-  </>)
+  )
 }
 
 export default ModalDialog

libs/remix-ui/modal-dialog/src/lib/types/index.ts

@@ -1,9 +1,11 @@
 export interface ModalDialogProps {
   title?: string,
-  content?: JSX.Element,
+  message?: string,
   ok?: { label: string, fn: () => void },
-  cancel?: {label:string, fn: () => void},
-  focusSelector?: string,
-  opts?: {class: string, hideClose?: boolean},
-  hide: () => void
+  cancel: { label: string, fn: () => void },
+  modalClass?: string,
+  showCancelIcon?: boolean,
+  hide: boolean,
+  handleHide: (hideState?: boolean) => void,
+  children?: React.ReactNode
 }