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

Expand props

Browse Source
pull/1193/head
ioedeveloper 4 years ago
parent f8be36a5ff
commit 00a4585cf4
5 changed files with 76 additions and 161 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. 138
      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

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

@ -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,9 +271,7 @@ 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 () => {
modal(`Delete ${isDir ? 'folder' : 'file'}`, `Are you sure you want to delete ${path} ${isDir ? 'folder' : 'file'}?`, 'OK', async () => {
try {
const fileManager = state.fileManager
@ -298,11 +279,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
} 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: () => {
modal('Confirm overwrite', `The file ${name} already exists! Would you like to overwrite it?`, 'OK', () => {
loadFile(name)
}
}, {
label: 'Cancel',
fn: () => {}
})
}, '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: () => {
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')
}
}, {
label: 'Cancel',
fn: () => {}
})
}, '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
libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
Unescape View File

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

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

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

6
libs/remix-ui/toaster/src/lib/toaster.tsx
Unescape View File

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

55
libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
Unescape View File

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

Write Preview
Loading…
Cancel
Save