From 00a4585cf4b96b26181626991f64805f98e7e5b9 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 17 May 2021 14:52:20 +0100 Subject: [PATCH] Expand props --- .../file-explorer/src/lib/file-explorer.tsx | 152 +++++------------- .../src/lib/remix-ui-modal-dialog.tsx | 18 +-- .../modal-dialog/src/lib/types/index.ts | 6 +- libs/remix-ui/toaster/src/lib/toaster.tsx | 6 +- .../workspace/src/lib/remix-ui-workspace.tsx | 55 ++----- 5 files changed, 76 insertions(+), 161 deletions(-) diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx index fc8c89450a..d925bc3f0b 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx @@ -88,14 +88,10 @@ export const FileExplorer = (props: FileExplorerProps) => { hide: true, title: '', message: '', - ok: { - label: '', - fn: () => {} - }, - cancel: { - label: '', - fn: () => {} - }, + okLabel: '', + okFn: () => {}, + cancelLabel: '', + cancelFn: () => {}, handleHide: null }, modals: [], @@ -122,13 +118,7 @@ export const FileExplorer = (props: FileExplorerProps) => { useEffect(() => { if (fileSystem.notification.message) { - modal(fileSystem.notification.title, fileSystem.notification.message, { - label: fileSystem.notification.labelOk, - fn: fileSystem.notification.actionOk - }, { - label: fileSystem.notification.labelCancel, - fn: fileSystem.notification.actionCancel - }) + modal(fileSystem.notification.title, fileSystem.notification.message, fileSystem.notification.labelOk, fileSystem.notification.actionOk, fileSystem.notification.labelCancel, fileSystem.notification.actionCancel) } }, [fileSystem.notification.message]) @@ -201,8 +191,10 @@ export const FileExplorer = (props: FileExplorerProps) => { hide: false, title: prevState.modals[0].title, message: prevState.modals[0].message, - ok: prevState.modals[0].ok, - cancel: prevState.modals[0].cancel, + okLabel: prevState.modals[0].okLabel, + okFn: prevState.modals[0].okFn, + cancelLabel: prevState.modals[0].cancelLabel, + cancelFn: prevState.modals[0].cancelFn, handleHide: prevState.modals[0].handleHide } @@ -248,10 +240,7 @@ export const FileExplorer = (props: FileExplorerProps) => { }) } } catch (error) { - return modal('File Creation Failed', typeof error === 'string' ? error : error.message, { - label: 'Close', - fn: async () => {} - }, null) + return modal('File Creation Failed', typeof error === 'string' ? error : error.message, 'Close', async () => {}) } } @@ -263,20 +252,14 @@ export const FileExplorer = (props: FileExplorerProps) => { const exists = await fileManager.exists(dirName) if (exists) { - return modal('Rename File Failed', `A file or folder ${extractNameFromKey(newFolderPath)} already exists at this location. Please choose a different name.`, { - label: 'Close', - fn: () => {} - }, null) + return modal('Rename File Failed', `A file or folder ${extractNameFromKey(newFolderPath)} already exists at this location. Please choose a different name.`, 'Close', () => {}) } await fileManager.mkdir(dirName) setState(prevState => { return { ...prevState, focusElement: [{ key: newFolderPath, type: 'folder' }] } }) } catch (e) { - return modal('Folder Creation Failed', typeof e === 'string' ? e : e.message, { - label: 'Close', - fn: async () => {} - }, null) + return modal('Folder Creation Failed', typeof e === 'string' ? e : e.message, 'Close', async () => {}) } } @@ -288,21 +271,15 @@ export const FileExplorer = (props: FileExplorerProps) => { } const isDir = state.fileManager.isDirectory(path) - modal(`Delete ${isDir ? 'folder' : 'file'}`, `Are you sure you want to delete ${path} ${isDir ? 'folder' : 'file'}?`, { - label: 'OK', - fn: async () => { - try { - const fileManager = state.fileManager + modal(`Delete ${isDir ? 'folder' : 'file'}`, `Are you sure you want to delete ${path} ${isDir ? 'folder' : 'file'}?`, 'OK', async () => { + try { + const fileManager = state.fileManager - await fileManager.remove(path) - } catch (e) { - toast(`Failed to remove ${isDir ? 'folder' : 'file'} ${path}.`) - } + await fileManager.remove(path) + } catch (e) { + toast(`Failed to remove ${isDir ? 'folder' : 'file'} ${path}.`) } - }, { - label: 'Cancel', - fn: () => {} - }) + }, 'Cancel', () => {}) } const renamePath = async (oldPath: string, newPath: string) => { @@ -311,18 +288,12 @@ export const FileExplorer = (props: FileExplorerProps) => { const exists = await fileManager.exists(newPath) if (exists) { - modal('Rename File Failed', `A file or folder ${extractNameFromKey(newPath)} already exists at this location. Please choose a different name.`, { - label: 'Close', - fn: () => {} - }, null) + modal('Rename File Failed', `A file or folder ${extractNameFromKey(newPath)} already exists at this location. Please choose a different name.`, 'Close', () => {}) } else { await fileManager.rename(oldPath, newPath) } } catch (error) { - modal('Rename File Failed', 'Unexpected error while renaming: ' + typeof error === 'string' ? error : error.message, { - label: 'Close', - fn: async () => {} - }, null) + modal('Rename File Failed', 'Unexpected error while renaming: ' + typeof error === 'string' ? error : error.message, 'Close', async () => {}) } } @@ -345,19 +316,13 @@ export const FileExplorer = (props: FileExplorerProps) => { fileReader.onload = async function (event) { if (helper.checkSpecialChars(file.name)) { - modal('File Upload Failed', 'Special characters are not allowed', { - label: 'Close', - fn: async () => {} - }, null) + modal('File Upload Failed', 'Special characters are not allowed', 'Close', async () => {}) return } const success = await filesProvider.set(name, event.target.result) if (!success) { - return modal('File Upload Failed', 'Failed to create file ' + name, { - label: 'Close', - fn: async () => {} - }, null) + return modal('File Upload Failed', 'Failed to create file ' + name, 'Close', async () => {}) } const config = registry.get('config').api const editor = registry.get('editor').api @@ -374,15 +339,9 @@ export const FileExplorer = (props: FileExplorerProps) => { if (!exist) { loadFile(name) } else { - modal('Confirm overwrite', `The file ${name} already exists! Would you like to overwrite it?`, { - label: 'OK', - fn: () => { - loadFile(name) - } - }, { - label: 'Cancel', - fn: () => {} - }) + modal('Confirm overwrite', `The file ${name} already exists! Would you like to overwrite it?`, 'OK', () => { + loadFile(name) + }, 'Cancel', () => {}) } }).catch(error => { if (error) console.log(error) @@ -391,41 +350,23 @@ export const FileExplorer = (props: FileExplorerProps) => { } 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?`, { - label: 'OK', - fn: toGist - }, { - label: 'Cancel', - fn: () => {} - }) + 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', () => {}) } const toGist = (id?: string) => { const filesProvider = fileSystem.provider.provider const proccedResult = function (error, data) { if (error) { - modal('Publish to gist Failed', 'Failed to manage gist: ' + error, { - label: 'Close', - fn: async () => {} - }, null) + modal('Publish to gist Failed', 'Failed to manage gist: ' + error, 'Close', () => {}) } else { 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?`, { - label: 'OK', - fn: () => { - window.open(data.html_url, '_blank') - } - }, { - label: 'Cancel', - fn: () => {} - }) + modal('Gist is ready', `The gist is at ${data.html_url}. Would you like to open it in a new window?`, 'OK', () => { + window.open(data.html_url, '_blank') + }, 'Cancel', () => {}) } else { 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 - modal('Publish to gist Failed', message + ' ' + data.documentation_url + ' ' + error, { - label: 'Close', - fn: async () => {} - }, null) + modal('Publish to gist Failed', message + ' ' + data.documentation_url + ' ' + error, 'Close', () => {}) } } } @@ -451,20 +392,14 @@ export const FileExplorer = (props: FileExplorerProps) => { packageFiles(filesProvider, folder, async (error, packaged) => { if (error) { console.log(error) - modal('Publish to gist Failed', 'Failed to create gist: ' + error.message, { - label: 'Close', - fn: async () => {} - }, null) + modal('Publish to gist Failed', 'Failed to create gist: ' + error.message, 'Close', async () => {}) } else { // check for token const config = registry.get('config').api const accessToken = config.get('settings/gist-access-token') if (!accessToken) { - modal('Authorize Token', 'Remix requires an access token (which includes gists creation permission). Please go to the settings tab to create one.', { - label: 'Close', - fn: async () => {} - }, null) + modal('Authorize Token', 'Remix requires an access token (which includes gists creation permission). Please go to the settings tab to create one.', 'Close', () => {}) } 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=' + queryParams.get().version + '&optimize=' + queryParams.get().optimize + '&runs=' + queryParams.get().runs + '&gist=' @@ -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 => { return { ...prevState, @@ -544,8 +479,10 @@ export const FileExplorer = (props: FileExplorerProps) => { { message, title, - ok, - cancel, + okLabel, + okFn, + cancelLabel, + cancelFn, handleHide: handleHideModal }] } @@ -644,10 +581,7 @@ export const FileExplorer = (props: FileExplorerProps) => { }) } if (helper.checkSpecialChars(content)) { - modal('Validation Error', 'Special characters are not allowed', { - label: 'OK', - fn: () => {} - }, null) + modal('Validation Error', 'Special characters are not allowed', 'OK', () => {}) } else { if (state.focusEdit.isNew) { state.focusEdit.type === 'file' ? createNewFile(joinPath(parentFolder, content)) : createNewFolder(joinPath(parentFolder, content)) @@ -865,8 +799,10 @@ export const FileExplorer = (props: FileExplorerProps) => { title={ state.focusModal.title } message={ state.focusModal.message } hide={ state.focusModal.hide } - ok={ state.focusModal.ok } - cancel={ state.focusModal.cancel } + okLabel={ state.focusModal.okLabel } + okFn={ state.focusModal.okFn } + cancelLabel={ state.focusModal.cancelLabel } + cancelFn={ state.focusModal.cancelFn } handleHide={ handleHideModal } /> } diff --git a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx index 2caa41219d..ec016068e9 100644 --- a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx +++ b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx @@ -18,7 +18,7 @@ export const ModalDialog = (props: ModalDialogProps) => { const modalKeyEvent = (keyCode) => { if (keyCode === 27) { // Esc - if (props.cancel && props.cancel.fn) props.cancel.fn() + if (props.cancelFn) props.cancelFn() handleHide() } else if (keyCode === 13) { // Enter enterHandler() @@ -33,9 +33,9 @@ export const ModalDialog = (props: ModalDialogProps) => { const enterHandler = () => { if (state.toggleBtn) { - if (props.ok && props.ok.fn) props.ok.fn() + if (props.okFn) props.okFn() } else { - if (props.cancel && props.cancel.fn) props.cancel.fn() + if (props.cancelFn) props.cancelFn() } handleHide() } @@ -79,29 +79,29 @@ export const ModalDialog = (props: ModalDialogProps) => {
{/* todo add autofocus ^^ */} - { props.ok && + { props.okLabel && { - if (props.ok.fn) props.ok.fn() + if (props.okFn) props.okFn() handleHide() }} > - { props.ok.label ? props.ok.label : 'OK' } + { props.okLabel ? props.okLabel : 'OK' } } - { props.cancel && + { props.cancelLabel && { - if (props.cancel.fn) props.cancel.fn() + if (props.cancelFn) props.cancelFn() handleHide() }} > - { props.cancel.label ? props.cancel.label : 'Cancel' } + { props.cancelLabel ? props.cancelLabel : 'Cancel' } }
diff --git a/libs/remix-ui/modal-dialog/src/lib/types/index.ts b/libs/remix-ui/modal-dialog/src/lib/types/index.ts index 29c4d39505..58d15cdb87 100644 --- a/libs/remix-ui/modal-dialog/src/lib/types/index.ts +++ b/libs/remix-ui/modal-dialog/src/lib/types/index.ts @@ -2,8 +2,10 @@ export interface ModalDialogProps { id?: string title?: string, message?: string, - ok?: { label: string, fn: () => void }, - cancel: { label: string, fn: () => void }, + okLabel?: string, + okFn?: () => void, + cancelLabel?: string, + cancelFn?: () => void, modalClass?: string, showCancelIcon?: boolean, hide: boolean, diff --git a/libs/remix-ui/toaster/src/lib/toaster.tsx b/libs/remix-ui/toaster/src/lib/toaster.tsx index b7573f72cc..d3cd160c5c 100644 --- a/libs/remix-ui/toaster/src/lib/toaster.tsx +++ b/libs/remix-ui/toaster/src/lib/toaster.tsx @@ -91,10 +91,8 @@ export const Toaster = (props: ToasterProps) => { <> {} - }} + cancelLabel='Close' + cancelFn={() => {}} hide={!state.showModal} handleHide={hideFullMessage} /> diff --git a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx index 1baca04eb7..8286163970 100644 --- a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx +++ b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx @@ -145,14 +145,10 @@ export const Workspace = (props: WorkspaceProps) => { hide: true, title: '', message: null, - ok: { - label: '', - fn: () => {} - }, - cancel: { - label: '', - fn: () => {} - }, + okLabel: '', + okFn: () => {}, + cancelLabel: '', + cancelFn: () => {}, handleHide: null }, loadingLocalhost: false, @@ -168,41 +164,20 @@ export const Workspace = (props: WorkspaceProps) => { /* workspace creation, renaming and deletion */ const renameCurrentWorkspace = () => { - modal('Rename Current Workspace', renameModalMessage(), { - label: 'OK', - fn: onFinishRenameWorkspace - }, { - label: '', - fn: () => {} - }) + modal('Rename Current Workspace', renameModalMessage(), 'OK', onFinishRenameWorkspace, '', () => {}) } const createWorkspace = () => { - modal('Create Workspace', createModalMessage(), { - label: 'OK', - fn: onFinishCreateWorkspace - }, { - label: '', - fn: () => {} - }) + modal('Create Workspace', createModalMessage(), 'OK', onFinishCreateWorkspace, '', () => {}) } const deleteCurrentWorkspace = () => { - modal('Delete Current Workspace', 'Are you sure to delete the current workspace?', { - label: 'OK', - fn: onFinishDeleteWorkspace - }, { - label: '', - fn: () => {} - }) + modal('Delete Current Workspace', 'Are you sure to delete the current workspace?', 'OK', onFinishDeleteWorkspace, '', () => {}) } const modalMessage = (title: string, body: string) => { setTimeout(() => { // wait for any previous modal a chance to close - modal(title, body, { - label: 'OK', - fn: () => {} - }, null) + modal(title, body, 'OK', () => {}, '', null) }, 200) } @@ -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 => { return { ...prevState, @@ -306,8 +281,10 @@ export const Workspace = (props: WorkspaceProps) => { hide: false, message, title, - ok, - cancel, + okLabel, + okFn, + cancelLabel, + cancelFn, handleHide: handleHideModal } } @@ -339,8 +316,10 @@ export const Workspace = (props: WorkspaceProps) => { title={ state.modal.title } message={ state.modal.message } hide={ state.modal.hide } - ok={ state.modal.ok } - cancel={ state.modal.cancel } + okLabel={ state.modal.okLabel } + okFn={ state.modal.okFn } + cancelLabel={ state.modal.cancelLabel } + cancelFn={ state.modal.cancelFn } handleHide={ handleHideModal }> { (typeof state.modal.message !== 'string') && state.modal.message }