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

Complete input fields functionality

Browse Source
pull/1140/head
ioedeveloper 4 years ago
parent 99395f7ead
commit be2341a0c4
3 changed files with 160 additions and 71 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. 62
      libs/remix-ui/file-explorer/src/lib/actions/fileSystem.ts
  2. 127
      libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
  3. 42
      libs/remix-ui/file-explorer/src/lib/reducers/fileSystem.ts

62
libs/remix-ui/file-explorer/src/lib/actions/fileSystem.ts
Unescape View File

@ -1,6 +1,6 @@
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
}

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

@ -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}

42
libs/remix-ui/file-explorer/src/lib/reducers/fileSystem.ts
Unescape View File

@ -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)
}

Write Preview
Loading…
Cancel
Save