Skip to content

B
baas-ide
Commit be2341a0 authored by ioedeveloper's avatar ioedeveloper
Browse files
Options

Complete input fields functionality

parent 99395f7e
Hide whitespace changes
Inline Side-by-side
Showing with 160 additions and 71 deletions
libs/remix-ui/file-explorer/src/lib/actions/fileSystem.ts
View file @ be2341a0
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
View file @ be2341a0
......@@ -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
View file @ be2341a0
......@@ -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)
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment