Complete input fields functionality

libs/remix-ui/file-explorer/src/lib/actions/fileSystem.ts

 import React from 'react'
 import { File } from '../types'
-import { extractNameFromKey } from '../utils'
+import { extractNameFromKey, extractParentFromKey } from '../utils'
 
 export const fetchDirectoryError = (error: any) => {
   return {
@@ -29,7 +29,7 @@ export const fileSystemReset = () => {
   }
 }
 
-const normalize = (filesList): any => {
+const normalize = (parent, filesList, newInputType?: string): any => {
   const folders = {}
   const files = {}
 
@@ -53,14 +53,32 @@ const normalize = (filesList): any => {
     }
   })
 
+  if (newInputType === 'folder') {
+    const path = parent + '/blank'
+
+    folders[path] = {
+      path: path,
+      name: '',
+      isDirectory: true
+    }
+  } else if (newInputType === 'file') {
+    const path = parent + '/blank'
+
+    files[path] = {
+      path: path,
+      name: '',
+      isDirectory: false
+    }
+  }
+
   return Object.assign({}, folders, files)
 }
 
-const fetchDirectoryContent = async (provider, folderPath: string): Promise<any> => {
+const fetchDirectoryContent = async (provider, folderPath: string, newInputType?: string): Promise<any> => {
   return new Promise((resolve) => {
     provider.resolveDirectory(folderPath, (error, fileTree) => {
       if (error) console.error(error)
-      const files = normalize(fileTree)
+      const files = normalize(folderPath, fileTree, newInputType)
 
       resolve({ [extractNameFromKey(folderPath)]: files })
     })
@@ -153,3 +171,39 @@ export const setWorkspace = (name: string) => (dispatch: React.Dispatch<any>) =>
     dispatch(setCurrentWorkspace(name))
   }
 }
+
+export const addInputFieldSuccess = (path: string, files: File[]) => {
+  return {
+    type: 'ADD_INPUT_FIELD',
+    payload: { path, files }
+  }
+}
+
+export const addInputField = (provider, type: string, path: string) => (dispatch: React.Dispatch<any>) => {
+  const promise = fetchDirectoryContent(provider, path, type)
+
+  promise.then((files) => {
+    dispatch(addInputFieldSuccess(path, files))
+  }).catch((error) => {
+    console.error(error)
+  })
+  return promise
+}
+
+export const removeInputFieldSuccess = (path: string, files: File[]) => {
+  return {
+    type: 'REMOVE_INPUT_FIELD',
+    payload: { path, files }
+  }
+}
+
+export const removeInputField = (provider, path: string) => (dispatch: React.Dispatch<any>) => {
+  const promise = fetchDirectoryContent(provider, path)
+
+  promise.then((files) => {
+    dispatch(removeInputFieldSuccess(path, files))
+  }).catch((error) => {
+    console.error(error)
+  })
+  return promise
+}

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

@@ -8,7 +8,7 @@ import { FileExplorerMenu } from './file-explorer-menu' // eslint-disable-line
 import { FileExplorerContextMenu } from './file-explorer-context-menu' // eslint-disable-line
 import { FileExplorerProps, File } from './types'
 import { fileSystemReducer, fileSystemInitialState } from './reducers/fileSystem'
-import { fetchDirectory, setProvider, resolveDirectory, setWorkspace } from './actions/fileSystem'
+import { fetchDirectory, setProvider, resolveDirectory, setWorkspace, addInputField, removeInputField } from './actions/fileSystem'
 import * as helper from '../../../../../apps/remix-ide/src/lib/helper'
 import QueryParams from '../../../../../apps/remix-ide/src/lib/query-params'
 
@@ -713,70 +713,64 @@ export const FileExplorer = (props: FileExplorerProps) => {
   }
 
   const editModeOn = (path: string, type: string, isNew: boolean = false) => {
-    if (filesProvider.isReadOnly(path)) return
+    if (fileSystem.provider.provider.isReadOnly(path)) return
     setState(prevState => {
       return { ...prevState, focusEdit: { ...prevState.focusEdit, element: path, isNew, type } }
     })
   }
 
-  // const editModeOff = async (content: string) => {
-  //   if (typeof content === 'string') content = content.trim()
-  //   const parentFolder = extractParentFromKey(state.focusEdit.element)
+  const editModeOff = async (content: string) => {
+    if (typeof content === 'string') content = content.trim()
+    const parentFolder = extractParentFromKey(state.focusEdit.element)
 
-  //   if (!content || (content.trim() === '')) {
-  //     if (state.focusEdit.isNew) {
-  //       const files = removePath(state.focusEdit.element, state.files)
-  //       const updatedFiles = files.filter(file => file)
-
-  //       setState(prevState => {
-  //         return { ...prevState, files: updatedFiles, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } }
-  //       })
-  //     } else {
-  //       editRef.current.textContent = state.focusEdit.lastEdit
-  //       setState(prevState => {
-  //         return { ...prevState, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } }
-  //       })
-  //     }
-  //   } else {
-  //     if (state.focusEdit.lastEdit === content) {
-  //       editRef.current.textContent = content
-  //       return setState(prevState => {
-  //         return { ...prevState, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } }
-  //       })
-  //     }
-  //     if (helper.checkSpecialChars(content)) {
-  //       modal('Validation Error', 'Special characters are not allowed', {
-  //         label: 'OK',
-  //         fn: () => {}
-  //       }, null)
-  //     } else {
-  //       if (state.focusEdit.isNew) {
-  //         state.focusEdit.type === 'file' ? createNewFile(joinPath(parentFolder, content)) : createNewFolder(joinPath(parentFolder, content))
-  //         const files = removePath(state.focusEdit.element, state.files)
-  //         const updatedFiles = files.filter(file => file)
-
-  //         setState(prevState => {
-  //           return { ...prevState, files: updatedFiles }
-  //         })
-  //       } else {
-  //         const oldPath: string = state.focusEdit.element
-  //         const oldName = extractNameFromKey(oldPath)
-  //         const newPath = oldPath.replace(oldName, content)
+    if (!content || (content.trim() === '')) {
+      if (state.focusEdit.isNew) {
+        removeInputField(fileSystem.provider.provider, parentFolder)(dispatch)
+        setState(prevState => {
+          return { ...prevState, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } }
+        })
+      } else {
+        editRef.current.textContent = state.focusEdit.lastEdit
+        setState(prevState => {
+          return { ...prevState, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } }
+        })
+      }
+    } else {
+      if (state.focusEdit.lastEdit === content) {
+        editRef.current.textContent = content
+        return setState(prevState => {
+          return { ...prevState, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } }
+        })
+      }
+      if (helper.checkSpecialChars(content)) {
+        modal('Validation Error', 'Special characters are not allowed', {
+          label: 'OK',
+          fn: () => {}
+        }, null)
+      } else {
+        if (state.focusEdit.isNew) {
+          // state.focusEdit.type === 'file' ? createNewFile(joinPath(parentFolder, content)) : createNewFolder(joinPath(parentFolder, content))
+          removeInputField(fileSystem.provider.provider, parentFolder)(dispatch)
+        } else {
+          const oldPath: string = state.focusEdit.element
+          // const oldName = extractNameFromKey(oldPath)
+          // const newPath = oldPath.replace(oldName, content)
 
-  //         editRef.current.textContent = extractNameFromKey(oldPath)
-  //         renamePath(oldPath, newPath)
-  //       }
-  //       setState(prevState => {
-  //         return { ...prevState, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } }
-  //       })
-  //     }
-  //   }
-  // }
+          editRef.current.textContent = extractNameFromKey(oldPath)
+          // renamePath(oldPath, newPath)
+        }
+        setState(prevState => {
+          return { ...prevState, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } }
+        })
+      }
+    }
+  }
 
   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
+    if (!parentFolder) parentFolder = state.focusElement[0] ? state.focusElement[0].type === 'folder' ? state.focusElement[0].key ? state.focusElement[0].key : name : extractParentFromKey(state.focusElement[0].key) : name
     const expandPath = [...new Set([...state.expandPath, parentFolder])]
 
+    await addInputField(fileSystem.provider.provider, 'file', parentFolder)(dispatch)
     setState(prevState => {
       return { ...prevState, expandPath }
     })
@@ -784,22 +778,23 @@ 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
+    if (!parentFolder) parentFolder = state.focusElement[0] ? state.focusElement[0].type === 'folder' ? state.focusElement[0].key ? state.focusElement[0].key : name : extractParentFromKey(state.focusElement[0].key) : name
     else if ((parentFolder.indexOf('.sol') !== -1) || (parentFolder.indexOf('.js') !== -1)) parentFolder = extractParentFromKey(parentFolder)
     const expandPath = [...new Set([...state.expandPath, parentFolder])]
 
+    await addInputField(fileSystem.provider.provider, 'folder', parentFolder)(dispatch)
     setState(prevState => {
       return { ...prevState, expandPath }
     })
     editModeOn(parentFolder + '/blank', 'folder', true)
   }
 
-  // const handleEditInput = (event) => {
-  //   if (event.which === 13) {
-  //     event.preventDefault()
-  //     editModeOff(editRef.current.innerText)
-  //   }
-  // }
+  const handleEditInput = (event) => {
+    if (event.which === 13) {
+      event.preventDefault()
+      editModeOff(editRef.current.innerText)
+    }
+  }
 
   const handleMouseOver = (path: string) => {
     setState(prevState => {
@@ -820,11 +815,11 @@ export const FileExplorer = (props: FileExplorerProps) => {
         ref={state.focusEdit.element === file.path ? editRef : null}
         suppressContentEditableWarning={true}
         contentEditable={state.focusEdit.element === file.path}
-        // onKeyDown={handleEditInput}
-        // onBlur={(e) => {
-        //   e.stopPropagation()
-        //   editModeOff(editRef.current.innerText)
-        // }}
+        onKeyDown={handleEditInput}
+        onBlur={(e) => {
+          e.stopPropagation()
+          editModeOff(editRef.current.innerText)
+        }}
       >
         <span
           title={file.path}

libs/remix-ui/file-explorer/src/lib/reducers/fileSystem.ts

@@ -9,6 +9,7 @@ export const fileSystemInitialState = {
   files: {
     files: [],
     workspaceName: null,
+    blankPath: null,
     isRequesting: false,
     isSuccessful: false,
     error: null
@@ -134,6 +135,32 @@ export const fileSystemReducer = (state = fileSystemInitialState, action: Action
         }
       }
     }
+    case 'ADD_INPUT_FIELD': {
+      return {
+        ...state,
+        files: {
+          ...state.files,
+          files: addInputField(state.files.workspaceName, action.payload.path, state.files.files, action.payload.files),
+          blankPath: action.payload.path,
+          isRequesting: false,
+          isSuccessful: true,
+          error: null
+        }
+      }
+    }
+    case 'REMOVE_INPUT_FIELD': {
+      return {
+        ...state,
+        files: {
+          ...state.files,
+          files: removeInputField(state.files.workspaceName, state.files.blankPath, state.files.files, action.payload.files),
+          blankPath: null,
+          isRequesting: false,
+          isSuccessful: true,
+          error: null
+        }
+      }
+    }
     default:
       throw new Error()
   }
@@ -141,8 +168,8 @@ export const fileSystemReducer = (state = fileSystemInitialState, action: Action
 
 const resolveDirectory = (root, path: string, files, content) => {
   const pathArr = path.split('/')
-  if (pathArr[0] !== root) pathArr.unshift(root)
 
+  if (pathArr[0] !== root) pathArr.unshift(root)
   files = _.set(files, pathArr, {
     isDirectory: true,
     path,
@@ -152,3 +179,16 @@ const resolveDirectory = (root, path: string, files, content) => {
 
   return files
 }
+
+const addInputField = (root, path: string, files, content) => {
+  if (Object.keys(content)[0] === root) return { [Object.keys(content)[0]]: { ...content[Object.keys(content)[0]], ...files[Object.keys(content)[0]] } }
+  return resolveDirectory(root, path, files, content)
+}
+
+const removeInputField = (root, path: string, files, content) => {
+  if (Object.keys(content)[0] === root) {
+    delete files[root][path + '/' + 'blank']
+    return files
+  }
+  return resolveDirectory(root, path, files, content)
+}