Skip to content

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

Expand props

parent f8be36a5
Show whitespace changes
Inline Side-by-side
Showing with 69 additions and 154 deletions
libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
View file @ 00a4585c
...@@ -88,14 +88,10 @@ export const FileExplorer = (props: FileExplorerProps) => { ...@@ -88,14 +88,10 @@ export const FileExplorer = (props: FileExplorerProps) => {
hide: true, hide: true,
title: '', title: '',
message: '', message: '',
ok: { okLabel: '',
label: '', okFn: () => {},
fn: () => {} cancelLabel: '',
}, cancelFn: () => {},
cancel: {
label: '',
fn: () => {}
},
handleHide: null handleHide: null
}, },
modals: [], modals: [],
...@@ -122,13 +118,7 @@ export const FileExplorer = (props: FileExplorerProps) => { ...@@ -122,13 +118,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
useEffect(() => { useEffect(() => {
if (fileSystem.notification.message) { if (fileSystem.notification.message) {
modal(fileSystem.notification.title, fileSystem.notification.message, { modal(fileSystem.notification.title, fileSystem.notification.message, fileSystem.notification.labelOk, fileSystem.notification.actionOk, fileSystem.notification.labelCancel, fileSystem.notification.actionCancel)
label: fileSystem.notification.labelOk,
fn: fileSystem.notification.actionOk
}, {
label: fileSystem.notification.labelCancel,
fn: fileSystem.notification.actionCancel
})
} }
}, [fileSystem.notification.message]) }, [fileSystem.notification.message])
...@@ -201,8 +191,10 @@ export const FileExplorer = (props: FileExplorerProps) => { ...@@ -201,8 +191,10 @@ export const FileExplorer = (props: FileExplorerProps) => {
hide: false, hide: false,
title: prevState.modals[0].title, title: prevState.modals[0].title,
message: prevState.modals[0].message, message: prevState.modals[0].message,
ok: prevState.modals[0].ok, okLabel: prevState.modals[0].okLabel,
cancel: prevState.modals[0].cancel, okFn: prevState.modals[0].okFn,
cancelLabel: prevState.modals[0].cancelLabel,
cancelFn: prevState.modals[0].cancelFn,
handleHide: prevState.modals[0].handleHide handleHide: prevState.modals[0].handleHide
} }
...@@ -248,10 +240,7 @@ export const FileExplorer = (props: FileExplorerProps) => { ...@@ -248,10 +240,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
}) })
} }
} catch (error) { } catch (error) {
return modal('File Creation Failed', typeof error === 'string' ? error : error.message, { return modal('File Creation Failed', typeof error === 'string' ? error : error.message, 'Close', async () => {})
label: 'Close',
fn: async () => {}
}, null)
} }
} }
...@@ -263,20 +252,14 @@ export const FileExplorer = (props: FileExplorerProps) => { ...@@ -263,20 +252,14 @@ export const FileExplorer = (props: FileExplorerProps) => {
const exists = await fileManager.exists(dirName) const exists = await fileManager.exists(dirName)
if (exists) { if (exists) {
return modal('Rename File Failed', `A file or folder ${extractNameFromKey(newFolderPath)} already exists at this location. Please choose a different name.`, { return modal('Rename File Failed', `A file or folder ${extractNameFromKey(newFolderPath)} already exists at this location. Please choose a different name.`, 'Close', () => {})
label: 'Close',
fn: () => {}
}, null)
} }
await fileManager.mkdir(dirName) await fileManager.mkdir(dirName)
setState(prevState => { setState(prevState => {
return { ...prevState, focusElement: [{ key: newFolderPath, type: 'folder' }] } return { ...prevState, focusElement: [{ key: newFolderPath, type: 'folder' }] }
}) })
} catch (e) { } catch (e) {
return modal('Folder Creation Failed', typeof e === 'string' ? e : e.message, { return modal('Folder Creation Failed', typeof e === 'string' ? e : e.message, 'Close', async () => {})
label: 'Close',
fn: async () => {}
}, null)
} }
} }
...@@ -288,9 +271,7 @@ export const FileExplorer = (props: FileExplorerProps) => { ...@@ -288,9 +271,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
} }
const isDir = state.fileManager.isDirectory(path) const isDir = state.fileManager.isDirectory(path)
modal(`Delete ${isDir ? 'folder' : 'file'}`, `Are you sure you want to delete ${path} ${isDir ? 'folder' : 'file'}?`, { modal(`Delete ${isDir ? 'folder' : 'file'}`, `Are you sure you want to delete ${path} ${isDir ? 'folder' : 'file'}?`, 'OK', async () => {
label: 'OK',
fn: async () => {
try { try {
const fileManager = state.fileManager const fileManager = state.fileManager
...@@ -298,11 +279,7 @@ export const FileExplorer = (props: FileExplorerProps) => { ...@@ -298,11 +279,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
} catch (e) { } catch (e) {
toast(`Failed to remove ${isDir ? 'folder' : 'file'} ${path}.`) toast(`Failed to remove ${isDir ? 'folder' : 'file'} ${path}.`)
} }
} }, 'Cancel', () => {})
}, {
label: 'Cancel',
fn: () => {}
})
} }
const renamePath = async (oldPath: string, newPath: string) => { const renamePath = async (oldPath: string, newPath: string) => {
...@@ -311,18 +288,12 @@ export const FileExplorer = (props: FileExplorerProps) => { ...@@ -311,18 +288,12 @@ export const FileExplorer = (props: FileExplorerProps) => {
const exists = await fileManager.exists(newPath) const exists = await fileManager.exists(newPath)
if (exists) { if (exists) {
modal('Rename File Failed', `A file or folder ${extractNameFromKey(newPath)} already exists at this location. Please choose a different name.`, { modal('Rename File Failed', `A file or folder ${extractNameFromKey(newPath)} already exists at this location. Please choose a different name.`, 'Close', () => {})
label: 'Close',
fn: () => {}
}, null)
} else { } else {
await fileManager.rename(oldPath, newPath) await fileManager.rename(oldPath, newPath)
} }
} catch (error) { } catch (error) {
modal('Rename File Failed', 'Unexpected error while renaming: ' + typeof error === 'string' ? error : error.message, { modal('Rename File Failed', 'Unexpected error while renaming: ' + typeof error === 'string' ? error : error.message, 'Close', async () => {})
label: 'Close',
fn: async () => {}
}, null)
} }
} }
...@@ -345,19 +316,13 @@ export const FileExplorer = (props: FileExplorerProps) => { ...@@ -345,19 +316,13 @@ export const FileExplorer = (props: FileExplorerProps) => {
fileReader.onload = async function (event) { fileReader.onload = async function (event) {
if (helper.checkSpecialChars(file.name)) { if (helper.checkSpecialChars(file.name)) {
modal('File Upload Failed', 'Special characters are not allowed', { modal('File Upload Failed', 'Special characters are not allowed', 'Close', async () => {})
label: 'Close',
fn: async () => {}
}, null)
return return
} }
const success = await filesProvider.set(name, event.target.result) const success = await filesProvider.set(name, event.target.result)
if (!success) { if (!success) {
return modal('File Upload Failed', 'Failed to create file ' + name, { return modal('File Upload Failed', 'Failed to create file ' + name, 'Close', async () => {})
label: 'Close',
fn: async () => {}
}, null)
} }
const config = registry.get('config').api const config = registry.get('config').api
const editor = registry.get('editor').api const editor = registry.get('editor').api
...@@ -374,15 +339,9 @@ export const FileExplorer = (props: FileExplorerProps) => { ...@@ -374,15 +339,9 @@ export const FileExplorer = (props: FileExplorerProps) => {
if (!exist) { if (!exist) {
loadFile(name) loadFile(name)
} else { } else {
modal('Confirm overwrite', `The file ${name} already exists! Would you like to overwrite it?`, { modal('Confirm overwrite', `The file ${name} already exists! Would you like to overwrite it?`, 'OK', () => {
label: 'OK',
fn: () => {
loadFile(name) loadFile(name)
} }, 'Cancel', () => {})
}, {
label: 'Cancel',
fn: () => {}
})
} }
}).catch(error => { }).catch(error => {
if (error) console.log(error) if (error) console.log(error)
...@@ -391,41 +350,23 @@ export const FileExplorer = (props: FileExplorerProps) => { ...@@ -391,41 +350,23 @@ export const FileExplorer = (props: FileExplorerProps) => {
} }
const publishToGist = () => { const publishToGist = () => {
modal('Create a public gist', `Are you sure you want to anonymously publish all your files in the ${name} workspace as a public gist on github.com?`, { modal('Create a public gist', `Are you sure you want to anonymously publish all your files in the ${name} workspace as a public gist on github.com?`, 'OK', toGist, 'Cancel', () => {})
label: 'OK',
fn: toGist
}, {
label: 'Cancel',
fn: () => {}
})
} }
const toGist = (id?: string) => { const toGist = (id?: string) => {
const filesProvider = fileSystem.provider.provider const filesProvider = fileSystem.provider.provider
const proccedResult = function (error, data) { const proccedResult = function (error, data) {
if (error) { if (error) {
modal('Publish to gist Failed', 'Failed to manage gist: ' + error, { modal('Publish to gist Failed', 'Failed to manage gist: ' + error, 'Close', () => {})
label: 'Close',
fn: async () => {}
}, null)
} else { } else {
if (data.html_url) { if (data.html_url) {
modal('Gist is ready', `The gist is at ${data.html_url}. Would you like to open it in a new window?`, { modal('Gist is ready', `The gist is at ${data.html_url}. Would you like to open it in a new window?`, 'OK', () => {
label: 'OK',
fn: () => {
window.open(data.html_url, '_blank') window.open(data.html_url, '_blank')
} }, 'Cancel', () => {})
}, {
label: 'Cancel',
fn: () => {}
})
} else { } else {
const error = JSON.stringify(data.errors, null, '\t') || '' const error = JSON.stringify(data.errors, null, '\t') || ''
const message = data.message === 'Not Found' ? data.message + '. Please make sure the API token has right to create a gist.' : data.message const message = data.message === 'Not Found' ? data.message + '. Please make sure the API token has right to create a gist.' : data.message
modal('Publish to gist Failed', message + ' ' + data.documentation_url + ' ' + error, { modal('Publish to gist Failed', message + ' ' + data.documentation_url + ' ' + error, 'Close', () => {})
label: 'Close',
fn: async () => {}
}, null)
} }
} }
} }
...@@ -451,20 +392,14 @@ export const FileExplorer = (props: FileExplorerProps) => { ...@@ -451,20 +392,14 @@ export const FileExplorer = (props: FileExplorerProps) => {
packageFiles(filesProvider, folder, async (error, packaged) => { packageFiles(filesProvider, folder, async (error, packaged) => {
if (error) { if (error) {
console.log(error) console.log(error)
modal('Publish to gist Failed', 'Failed to create gist: ' + error.message, { modal('Publish to gist Failed', 'Failed to create gist: ' + error.message, 'Close', async () => {})
label: 'Close',
fn: async () => {}
}, null)
} else { } else {
// check for token // check for token
const config = registry.get('config').api const config = registry.get('config').api
const accessToken = config.get('settings/gist-access-token') const accessToken = config.get('settings/gist-access-token')
if (!accessToken) { if (!accessToken) {
modal('Authorize Token', 'Remix requires an access token (which includes gists creation permission). Please go to the settings tab to create one.', { modal('Authorize Token', 'Remix requires an access token (which includes gists creation permission). Please go to the settings tab to create one.', 'Close', () => {})
label: 'Close',
fn: async () => {}
}, null)
} else { } else {
const description = 'Created using remix-ide: Realtime Ethereum Contract Compiler and Runtime. \n Load this file by pasting this gists URL or ID at https://remix.ethereum.org/#version=' + const description = 'Created using remix-ide: Realtime Ethereum Contract Compiler and Runtime. \n Load this file by pasting this gists URL or ID at https://remix.ethereum.org/#version=' +
queryParams.get().version + '&optimize=' + queryParams.get().optimize + '&runs=' + queryParams.get().runs + '&gist=' queryParams.get().version + '&optimize=' + queryParams.get().optimize + '&runs=' + queryParams.get().runs + '&gist='
...@@ -536,7 +471,7 @@ export const FileExplorer = (props: FileExplorerProps) => { ...@@ -536,7 +471,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
}) })
} }
const modal = (title: string, message: string, ok: { label: string, fn: () => void }, cancel: { label: string, fn: () => void }) => { const modal = (title: string, message: string, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
setState(prevState => { setState(prevState => {
return { return {
...prevState, ...prevState,
...@@ -544,8 +479,10 @@ export const FileExplorer = (props: FileExplorerProps) => { ...@@ -544,8 +479,10 @@ export const FileExplorer = (props: FileExplorerProps) => {
{ {
message, message,
title, title,
ok, okLabel,
cancel, okFn,
cancelLabel,
cancelFn,
handleHide: handleHideModal handleHide: handleHideModal
}] }]
} }
...@@ -644,10 +581,7 @@ export const FileExplorer = (props: FileExplorerProps) => { ...@@ -644,10 +581,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
}) })
} }
if (helper.checkSpecialChars(content)) { if (helper.checkSpecialChars(content)) {
modal('Validation Error', 'Special characters are not allowed', { modal('Validation Error', 'Special characters are not allowed', 'OK', () => {})
label: 'OK',
fn: () => {}
}, null)
} else { } else {
if (state.focusEdit.isNew) { if (state.focusEdit.isNew) {
state.focusEdit.type === 'file' ? createNewFile(joinPath(parentFolder, content)) : createNewFolder(joinPath(parentFolder, content)) state.focusEdit.type === 'file' ? createNewFile(joinPath(parentFolder, content)) : createNewFolder(joinPath(parentFolder, content))
...@@ -865,8 +799,10 @@ export const FileExplorer = (props: FileExplorerProps) => { ...@@ -865,8 +799,10 @@ export const FileExplorer = (props: FileExplorerProps) => {
title={ state.focusModal.title } title={ state.focusModal.title }
message={ state.focusModal.message } message={ state.focusModal.message }
hide={ state.focusModal.hide } hide={ state.focusModal.hide }
ok={ state.focusModal.ok } okLabel={ state.focusModal.okLabel }
cancel={ state.focusModal.cancel } okFn={ state.focusModal.okFn }
cancelLabel={ state.focusModal.cancelLabel }
cancelFn={ state.focusModal.cancelFn }
handleHide={ handleHideModal } handleHide={ handleHideModal }
/> />
} }
......
libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
View file @ 00a4585c
...@@ -18,7 +18,7 @@ export const ModalDialog = (props: ModalDialogProps) => { ...@@ -18,7 +18,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
const modalKeyEvent = (keyCode) => { const modalKeyEvent = (keyCode) => {
if (keyCode === 27) { // Esc if (keyCode === 27) { // Esc
if (props.cancel && props.cancel.fn) props.cancel.fn() if (props.cancelFn) props.cancelFn()
handleHide() handleHide()
} else if (keyCode === 13) { // Enter } else if (keyCode === 13) { // Enter
enterHandler() enterHandler()
...@@ -33,9 +33,9 @@ export const ModalDialog = (props: ModalDialogProps) => { ...@@ -33,9 +33,9 @@ export const ModalDialog = (props: ModalDialogProps) => {
const enterHandler = () => { const enterHandler = () => {
if (state.toggleBtn) { if (state.toggleBtn) {
if (props.ok && props.ok.fn) props.ok.fn() if (props.okFn) props.okFn()
} else { } else {
if (props.cancel && props.cancel.fn) props.cancel.fn() if (props.cancelFn) props.cancelFn()
} }
handleHide() handleHide()
} }
...@@ -79,29 +79,29 @@ export const ModalDialog = (props: ModalDialogProps) => { ...@@ -79,29 +79,29 @@ export const ModalDialog = (props: ModalDialogProps) => {
</div> </div>
<div className="modal-footer" data-id={`${props.id}ModalDialogModalFooter-react`}> <div className="modal-footer" data-id={`${props.id}ModalDialogModalFooter-react`}>
{/* todo add autofocus ^^ */} {/* todo add autofocus ^^ */}
{ props.ok && { props.okLabel &&
<span <span
data-id={`${props.id}-modal-footer-ok-react`} data-id={`${props.id}-modal-footer-ok-react`}
className={'modal-ok btn btn-sm ' + (state.toggleBtn ? 'btn-dark' : 'btn-light')} className={'modal-ok btn btn-sm ' + (state.toggleBtn ? 'btn-dark' : 'btn-light')}
onClick={() => { onClick={() => {
if (props.ok.fn) props.ok.fn() if (props.okFn) props.okFn()
handleHide() handleHide()
}} }}
> >
{ props.ok.label ? props.ok.label : 'OK' } { props.okLabel ? props.okLabel : 'OK' }
</span> </span>
} }
{ props.cancel && { props.cancelLabel &&
<span <span
data-id={`${props.id}-modal-footer-cancel-react`} data-id={`${props.id}-modal-footer-cancel-react`}
className={'modal-cancel btn btn-sm ' + (state.toggleBtn ? 'btn-light' : 'btn-dark')} className={'modal-cancel btn btn-sm ' + (state.toggleBtn ? 'btn-light' : 'btn-dark')}
data-dismiss="modal" data-dismiss="modal"
onClick={() => { onClick={() => {
if (props.cancel.fn) props.cancel.fn() if (props.cancelFn) props.cancelFn()
handleHide() handleHide()
}} }}
> >
{ props.cancel.label ? props.cancel.label : 'Cancel' } { props.cancelLabel ? props.cancelLabel : 'Cancel' }
</span> </span>
} }
</div> </div>
......
libs/remix-ui/modal-dialog/src/lib/types/index.ts
View file @ 00a4585c
...@@ -2,8 +2,10 @@ export interface ModalDialogProps { ...@@ -2,8 +2,10 @@ export interface ModalDialogProps {
id?: string id?: string
title?: string, title?: string,
message?: string, message?: string,
ok?: { label: string, fn: () => void }, okLabel?: string,
cancel: { label: string, fn: () => void }, okFn?: () => void,
cancelLabel?: string,
cancelFn?: () => void,
modalClass?: string, modalClass?: string,
showCancelIcon?: boolean, showCancelIcon?: boolean,
hide: boolean, hide: boolean,
......
libs/remix-ui/toaster/src/lib/toaster.tsx
View file @ 00a4585c
...@@ -91,10 +91,8 @@ export const Toaster = (props: ToasterProps) => { ...@@ -91,10 +91,8 @@ export const Toaster = (props: ToasterProps) => {
<> <>
<ModalDialog <ModalDialog
message={props.message} message={props.message}
cancel={{ cancelLabel='Close'
label: 'Close', cancelFn={() => {}}
fn: () => {}
}}
hide={!state.showModal} hide={!state.showModal}
handleHide={hideFullMessage} handleHide={hideFullMessage}
/> />
......
libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
View file @ 00a4585c
...@@ -145,14 +145,10 @@ export const Workspace = (props: WorkspaceProps) => { ...@@ -145,14 +145,10 @@ export const Workspace = (props: WorkspaceProps) => {
hide: true, hide: true,
title: '', title: '',
message: null, message: null,
ok: { okLabel: '',
label: '', okFn: () => {},
fn: () => {} cancelLabel: '',
}, cancelFn: () => {},
cancel: {
label: '',
fn: () => {}
},
handleHide: null handleHide: null
}, },
loadingLocalhost: false, loadingLocalhost: false,
...@@ -168,41 +164,20 @@ export const Workspace = (props: WorkspaceProps) => { ...@@ -168,41 +164,20 @@ export const Workspace = (props: WorkspaceProps) => {
/* workspace creation, renaming and deletion */ /* workspace creation, renaming and deletion */
const renameCurrentWorkspace = () => { const renameCurrentWorkspace = () => {
modal('Rename Current Workspace', renameModalMessage(), { modal('Rename Current Workspace', renameModalMessage(), 'OK', onFinishRenameWorkspace, '', () => {})
label: 'OK',
fn: onFinishRenameWorkspace
}, {
label: '',
fn: () => {}
})
} }
const createWorkspace = () => { const createWorkspace = () => {
modal('Create Workspace', createModalMessage(), { modal('Create Workspace', createModalMessage(), 'OK', onFinishCreateWorkspace, '', () => {})
label: 'OK',
fn: onFinishCreateWorkspace
}, {
label: '',
fn: () => {}
})
} }
const deleteCurrentWorkspace = () => { const deleteCurrentWorkspace = () => {
modal('Delete Current Workspace', 'Are you sure to delete the current workspace?', { modal('Delete Current Workspace', 'Are you sure to delete the current workspace?', 'OK', onFinishDeleteWorkspace, '', () => {})
label: 'OK',
fn: onFinishDeleteWorkspace
}, {
label: '',
fn: () => {}
})
} }
const modalMessage = (title: string, body: string) => { const modalMessage = (title: string, body: string) => {
setTimeout(() => { // wait for any previous modal a chance to close setTimeout(() => { // wait for any previous modal a chance to close
modal(title, body, { modal(title, body, 'OK', () => {}, '', null)
label: 'OK',
fn: () => {}
}, null)
}, 200) }, 200)
} }
...@@ -297,7 +272,7 @@ export const Workspace = (props: WorkspaceProps) => { ...@@ -297,7 +272,7 @@ export const Workspace = (props: WorkspaceProps) => {
}) })
} }
const modal = async (title: string, message: string | JSX.Element, ok: { label: string, fn: () => void }, cancel: { label: string, fn: () => void }) => { const modal = async (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel: string, cancelFn: () => void) => {
await setState(prevState => { await setState(prevState => {
return { return {
...prevState, ...prevState,
...@@ -306,8 +281,10 @@ export const Workspace = (props: WorkspaceProps) => { ...@@ -306,8 +281,10 @@ export const Workspace = (props: WorkspaceProps) => {
hide: false, hide: false,
message, message,
title, title,
ok, okLabel,
cancel, okFn,
cancelLabel,
cancelFn,
handleHide: handleHideModal handleHide: handleHideModal
} }
} }
...@@ -339,8 +316,10 @@ export const Workspace = (props: WorkspaceProps) => { ...@@ -339,8 +316,10 @@ export const Workspace = (props: WorkspaceProps) => {
title={ state.modal.title } title={ state.modal.title }
message={ state.modal.message } message={ state.modal.message }
hide={ state.modal.hide } hide={ state.modal.hide }
ok={ state.modal.ok } okLabel={ state.modal.okLabel }
cancel={ state.modal.cancel } okFn={ state.modal.okFn }
cancelLabel={ state.modal.cancelLabel }
cancelFn={ state.modal.cancelFn }
handleHide={ handleHideModal }> handleHide={ handleHideModal }>
{ (typeof state.modal.message !== 'string') && state.modal.message } { (typeof state.modal.message !== 'string') && state.modal.message }
</ModalDialog> </ModalDialog>
......
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