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

Display modal on delete

Browse Source
pull/668/head
ioedeveloper 4 years ago
parent 489a1d96a8
commit f08a72ef58
3 changed files with 137 additions and 86 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. 132
      libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
  2. 77
      libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
  3. 14
      libs/remix-ui/modal-dialog/src/lib/types/index.ts

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

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

77
libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
Unescape View File

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

14
libs/remix-ui/modal-dialog/src/lib/types/index.ts
Unescape View File

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

Write Preview
Loading…
Cancel
Save