Expand props

pull/1193/head
ioedeveloper 4 years ago
parent f8be36a5ff
commit 00a4585cf4
  1. 152
      libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
  2. 18
      libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
  3. 6
      libs/remix-ui/modal-dialog/src/lib/types/index.ts
  4. 6
      libs/remix-ui/toaster/src/lib/toaster.tsx
  5. 55
      libs/remix-ui/workspace/src/lib/remix-ui-workspace.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 }
/>
}

@ -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) => {
</div>
<div className="modal-footer" data-id={`${props.id}ModalDialogModalFooter-react`}>
{/* todo add autofocus ^^ */}
{ props.ok &&
{ props.okLabel &&
<span
data-id={`${props.id}-modal-footer-ok-react`}
className={'modal-ok btn btn-sm ' + (state.toggleBtn ? 'btn-dark' : 'btn-light')}
onClick={() => {
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' }
</span>
}
{ props.cancel &&
{ props.cancelLabel &&
<span
data-id={`${props.id}-modal-footer-cancel-react`}
className={'modal-cancel btn btn-sm ' + (state.toggleBtn ? 'btn-light' : 'btn-dark')}
data-dismiss="modal"
onClick={() => {
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' }
</span>
}
</div>

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

@ -91,10 +91,8 @@ export const Toaster = (props: ToasterProps) => {
<>
<ModalDialog
message={props.message}
cancel={{
label: 'Close',
fn: () => {}
}}
cancelLabel='Close'
cancelFn={() => {}}
hide={!state.showModal}
handleHide={hideFullMessage}
/>

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

Loading…
Cancel
Save