Skip to content

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

Display modal on delete

parent 489a1d96
Hide whitespace changes
Inline Side-by-side
Showing with 137 additions and 86 deletions
libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
View file @ f08a72ef
......@@ -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,27 +204,31 @@ 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 () => {
try {
const fileManager = state.fileManager
const isDir = state.fileManager.isDirectory(path)
await fileManager.remove(path)
const files = removePath(path, state.files)
const updatedFiles = files.filter(file => file)
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)
setState(prevState => {
return { ...prevState, files: updatedFiles }
})
} catch (e) {
// tooltip(`Failed to remove file ${key}.`)
}
// },
// () => {}
// )
setState(prevState => {
return { ...prevState, files: updatedFiles }
})
} 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,28 +603,33 @@ export const FileExplorer = (props: FileExplorerProps) => {
}
}
return
}
if (state.focusEdit.isNew) {
state.focusEdit.type === 'file' ? createNewFile(parentFolder, parentFolder + '/' + content) : createNewFolder(parentFolder, parentFolder + '/' + content)
const files = removePath(state.focusEdit.element, state.files)
const updatedFiles = files.filter(file => file)
setState(prevState => {
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)
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)
const updatedFiles = files.filter(file => file)
renamePath(oldPath, newPath)
setState(prevState => {
return { ...prevState, files: updatedFiles }
})
} else {
const oldPath: string = state.focusEdit.element
const oldName = extractNameFromKey(oldPath)
const newPath = oldPath.replace(oldName, content)
renamePath(oldPath, newPath)
}
setState(prevState => {
return { ...prevState, focusEdit: { element: null, isNew: false, type: '' } }
})
}
}
setState(prevState => {
return { ...prevState, focusEdit: { element: null, isNew: false, type: '' } }
})
}
const handleNewFileInput = async (parentFolder?: string) => {
......@@ -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
View file @ f08a72ef
......@@ -9,14 +9,12 @@ export const ModalDialog = (props: ModalDialogProps) => {
})
const modal = useRef(null)
const handleHide = () => {
props.hide()
props.handleHide()
}
useEffect(
() => {
modal.current.focus()
}, []
)
useEffect(() => {
modal.current.focus()
}, [props.hide])
const modalKeyEvent = (keyCode) => {
if (keyCode === 27) { // Esc
......@@ -41,74 +39,73 @@ 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 ^^ */}
{props.ok &&
<span
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()
handleHide()
}}
tabIndex={1}
>
{props.ok && props.ok.label ? props.ok.label : 'OK'}
</span>
{ props.ok &&
<span
id="modal-footer-ok"
className={'modal-ok btn btn-sm ' + (state.toggleBtn ? 'btn-dark' : 'btn-light')}
onClick={() => {
if (props.ok.fn) props.ok.fn()
handleHide()
}}
>
{ 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.fn) props.cancel.fn()
handleHide()
}}
>
{ props.cancel.label ? props.cancel.label : 'Cancel' }
</span>
}
<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()
handleHide()
}}
tabIndex={2}
>
{props.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
View file @ f08a72ef
export interface ModalDialogProps {
title?: string,
content?: JSX.Element,
ok?: {label:string, fn: () => void},
cancel?: {label:string, fn: () => void},
focusSelector?: string,
opts?: {class: string, hideClose?: boolean},
hide: () => void
message?: string,
ok?: { label: string, fn: () => void },
cancel: { label: string, fn: () => void },
modalClass?: string,
showCancelIcon?: boolean,
hide: boolean,
handleHide: (hideState?: boolean) => void,
children?: React.ReactNode
}
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