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

Refactor modals

Browse Source
pull/924/head
ioedeveloper 4 years ago committed by yann300
parent 0dddd45312
commit 6ef49df021
2 changed files with 125 additions and 173 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. 52
      apps/remix-ide/src/app/panels/file-panel.js
  2. 246
      libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

52
apps/remix-ide/src/app/panels/file-panel.js
Unescape View File

@ -4,6 +4,7 @@ import * as packageJson from '../../../../../package.json'
import React from 'react' // eslint-disable-line
import ReactDOM from 'react-dom'
import { Workspace } from '@remix-ui/workspace' // eslint-disable-line
import ethutil from 'ethereumjs-util'
var EventManager = require('../../lib/events')
var { RemixdHandle } = require('../files/remixd-handle.js')
var { GitHandle } = require('../files/git-handle.js')
@ -61,7 +62,7 @@ module.exports = class Filepanel extends ViewPlugin {
this.registeredMenuItems = []
this.request = {}
this.workspaces = []
this.renderComponent()
this.initWorkspace()
}
render () {
@ -70,7 +71,7 @@ module.exports = class Filepanel extends ViewPlugin {
renderComponent() {
ReactDOM.render(
<Workspace
<Workspace
setWorkspace={this.setWorkspace.bind(this)}
workspaceRenamed={this.workspaceRenamed.bind(this)}
workspaceDeleted={this.workspaceDeleted.bind(this)}
@ -79,16 +80,15 @@ module.exports = class Filepanel extends ViewPlugin {
browser={this._deps.fileProviders.browser}
localhost={this._deps.fileProviders.localhost}
fileManager={this._deps.fileManager}
examples={examples}
queryParams={new QueryParams()}
gistHandler={new GistHandler()}
registry={this._components.registry}
plugin={this}
request={this.request}
examples={examples}
workspaces={this.workspaces}
setWorkspaceName={this.setWorkspaceName}
registeredMenuItems={this.registeredMenuItems}
/>
, this.el)
, this.el)
}
/**
@ -126,6 +126,45 @@ module.exports = class Filepanel extends ViewPlugin {
return this.workspaces
}
async initWorkspace () {
const queryParams = new QueryParams()
const gistHandler = new GistHandler()
const workspacesPath = this._deps.fileProviders.workspace.workspacesPath
const params = queryParams.get()
// get the file from gist
const loadedFromGist = gistHandler.loadFromGist(params, this._deps.fileManager)
if (loadedFromGist) return
if (params.code) {
try {
await this._deps.fileManager.createWorkspace('code-sample')
var hash = ethutil.bufferToHex(ethutil.keccak(params.code))
const fileName = 'contract-' + hash.replace('0x', '').substring(0, 10) + '.sol'
const path = 'browser/' + workspacesPath + '/code-sample/' + fileName
await this._deps.fileManager.writeFile(path, atob(params.code))
this.setWorkspace({ name: 'code-sample', isLocalhost: false })
await this._deps.fileManager.openFile(path)
} catch (e) {
console.error(e)
}
return
}
// insert example contracts if there are no files to show
this._deps.fileProviders.browser.resolveDirectory('/', async (error, filesList) => {
if (error) console.error(error)
if (Object.keys(filesList).length === 0) {
for (const file in examples) {
try {
await this._deps.fileManager.writeFile('browser/' + workspacesPath + '/default_workspace/' + examples[file].name, examples[file].content)
} catch (error) {
console.error(error)
}
}
}
this.getWorkspaces()
})
}
async createNewFile () {
return await this.request.createNewFile()
}
@ -146,6 +185,7 @@ module.exports = class Filepanel extends ViewPlugin {
} else if (await this.call('manager', 'isActive', 'remixd')) {
this.call('manager', 'deactivatePlugin', 'remixd')
}
this.setWorkspaceName = workspace.name
this.emit('setWorkspace', workspace)
}

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

@ -1,5 +1,4 @@
import React, { useState, useEffect, useRef } from 'react';
import ethutil from 'ethereumjs-util'
import { FileExplorer } from '@remix-ui/file-explorer' // eslint-disable-line
import './remix-ui-workspace.css';
import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
@ -18,12 +17,11 @@ export interface WorkspaceProps {
localhost: any // localhost provider
fileManager : any
examples: CodeExamples,
queryParams: any // URL parameters
gistHandler: any // handle load gist
registry: any // registry
plugin: any // plugin call and resetFocus
request: any // api request,
workspaces: any,
setWorkspaceName: string,
registeredMenuItems: [] // menu items
}
@ -68,8 +66,6 @@ export const Workspace = (props: WorkspaceProps) => {
return state.currentWorkspace
}
useEffect(() => { initWorkspace() }, [])
useEffect(() => {
const getWorkspaces = async () => {
if (props.workspaces && Array.isArray(props.workspaces)) {
@ -90,6 +86,12 @@ export const Workspace = (props: WorkspaceProps) => {
getWorkspaces()
}, [props.workspaces])
useEffect(() => {
if (props.setWorkspaceName && (props.setWorkspaceName !== state.currentWorkspace)) {
setWorkspace(props.setWorkspaceName)
}
}, [props.setWorkspaceName])
const [state, setState] = useState({
workspaces: [],
reset: false,
@ -98,41 +100,10 @@ export const Workspace = (props: WorkspaceProps) => {
displayNewFile: false,
externalUploads: null,
uploadFileEvent: null,
renameModal: {
id: 'renameWorkspace',
hide: true,
title: 'Rename Workspace',
message: 'Please choose a name for the workspace',
ok: {
label: '',
fn: () => {}
},
cancel: {
label: '',
fn: () => {}
},
handleHide: null
},
deleteModal: {
id: 'deleteWorkspace',
hide: true,
title: 'Remove Workspace',
message: 'Please confirm workspace deletion',
ok: {
label: '',
fn: () => {}
},
cancel: {
label: '',
fn: () => {}
},
handleHide: null
},
createModal: {
id: 'createWorkspace',
modal: {
hide: true,
title: 'Create Workspace',
message: 'Please choose a name for the workspace',
title: '',
message: null,
ok: {
label: '',
fn: () => {}
@ -148,77 +119,32 @@ export const Workspace = (props: WorkspaceProps) => {
/* workspace creation, renaming and deletion */
const renameCurrentWorkspace = () => {
setState(prevState => {
return {
...prevState,
renameModal: {
...prevState.renameModal,
hide: false,
ok: {
label: '',
fn: () => onFinishRenameWorkspace()
},
cancel: {
label: '',
fn: () => {}
},
handleHide: () => {
setState(prevState => {
return { ...prevState, renameModal: {...prevState.renameModal, hide: true } }
})
}
},
}
modal('Rename Workspace', renameModalMessage(), {
label: 'OK',
fn: onFinishRenameWorkspace
}, {
label: '',
fn: () => {}
})
}
const createWorkspace = () => {
setState(prevState => {
return {
...prevState,
createModal: {
...prevState.createModal,
hide: false,
ok: {
label: '',
fn: () => onFinishCreateWorkspace()
},
cancel: {
label: '',
fn: () => {}
},
handleHide: () => {
setState(prevState => {
return { ...prevState, createModal: {...prevState.createModal, hide: true } }
})
}
}
}
modal('Create Workspace', createModalMessage(), {
label: 'OK',
fn: onFinishCreateWorkspace
}, {
label: '',
fn: () => {}
})
}
const deleteCurrentWorkspace = () => {
setState(prevState => {
return {
...prevState,
deleteModal: {
...prevState.deleteModal,
hide: false,
ok: {
label: '',
fn: () => onFinishDeleteWorkspace()
},
cancel: {
label: '',
fn: () => {}
},
handleHide: () => {
setState(prevState => {
return { ...prevState, deleteModal: {...prevState.deleteModal, hide: true } }
})
}
},
}
modal('Remove Workspace', 'Please choose a name for the workspace', {
label: 'OK',
fn: onFinishDeleteWorkspace
}, {
label: '',
fn: () => {}
})
}
@ -236,7 +162,7 @@ export const Workspace = (props: WorkspaceProps) => {
}
const onFinishCreateWorkspace = async () => {
if (workspaceCreateInput.current === undefined) return
if (!workspaceCreateInput.current) return
// @ts-ignore: Object is possibly 'null'.
const workspaceName = workspaceCreateInput.current.value
const workspacesPath = props.workspace.workspacesPath
@ -279,42 +205,6 @@ export const Workspace = (props: WorkspaceProps) => {
props.setWorkspace({ name, isLocalhost: name === LOCALHOST })
}
const initWorkspace = async () => {
const workspacesPath = props.workspace.workspacesPath
const params = props.queryParams.get()
// get the file from gist
const loadedFromGist = props.gistHandler.loadFromGist(params, props.fileManager)
if (loadedFromGist) return
if (params.code) {
try {
await props.fileManager.createWorkspace('code-sample')
var hash = ethutil.bufferToHex(ethutil.keccak(params.code))
const fileName = 'contract-' + hash.replace('0x', '').substring(0, 10) + '.sol'
const path = 'browser/' + workspacesPath + '/code-sample/' + fileName
await props.fileManager.writeFile(path, atob(params.code))
setWorkspace('code-sample')
await props.fileManager.openFile(path)
} catch (e) {
console.error(e)
}
return
}
// insert example contracts if there are no files to show
props.browser.resolveDirectory('/', async (error, filesList) => {
if (error) console.error(error)
if (Object.keys(filesList).length === 0) {
for (const file in props.examples) {
try {
await props.fileManager.writeFile('browser/' + workspacesPath + '/default_workspace/' + props.examples[file].name, props.examples[file].content)
} catch (error) {
console.error(error)
}
}
props.plugin.getWorkspaces()
}
})
}
const remixdExplorer = {
hide: () => {
if (state.currentWorkspace === LOCALHOST) setWorkspace(NO_WORKSPACE)
@ -344,37 +234,59 @@ export const Workspace = (props: WorkspaceProps) => {
props.localhost.event.register('closed', (event) => {
remixdExplorer.hide()
})
const handleHideModal = () => {
setState(prevState => {
return { ...prevState, modal: { ...state.modal, hide: true } }
})
}
const modal = async (title: string, message: string | JSX.Element, ok: { label: string, fn: () => void }, cancel: { label: string, fn: () => void }) => {
await setState(prevState => {
return {
...prevState,
modal: {
...prevState.modal,
hide: false,
message,
title,
ok,
cancel,
handleHide: handleHideModal
}
}
})
}
const createModalMessage = () => {
return (
<>
<span>{ state.modal.message }</span>
<input placeholder={`workspace_${Date.now()}`} ref={workspaceCreateInput} className="form-control" />
</>
)
}
const renameModalMessage = () => {
return (
<>
<span>{ state.modal.message }</span>
<input placeholder={ state.currentWorkspace } ref={workspaceRenameInput} className="form-control" />
</>
)
}
return (
<div className='remixui_container'>
<ModalDialog
id={ state.renameModal.id }
title={ state.renameModal.title }
hide={ state.renameModal.hide }
ok={ state.renameModal.ok }
cancel={ state.renameModal.cancel }
handleHide={ state.renameModal.handleHide }>
<span>{ state.renameModal.message }</span>
<input placeholder={ state.currentWorkspace } ref={workspaceRenameInput} className="form-control" />
</ModalDialog>
<ModalDialog
id={ state.createModal.id }
title={ state.createModal.title }
hide={ state.createModal.hide }
ok={ state.createModal.ok }
cancel={ state.createModal.cancel }
handleHide={ state.createModal.handleHide }>
<span>{ state.createModal.message }</span>
<input placeholder={ `workspace_${Date.now()}` } ref={workspaceCreateInput} className="form-control" />
</ModalDialog>
<ModalDialog
id={ state.deleteModal.id }
title={ state.deleteModal.title }
message={ state.deleteModal.message }
hide={ state.deleteModal.hide }
ok={ state.deleteModal.ok }
cancel={ state.deleteModal.cancel }
handleHide={ state.deleteModal.handleHide }>
<ModalDialog
id='workspacesModalDialog'
title={ state.modal.title }
message={ state.modal.message }
hide={ state.modal.hide }
ok={ state.modal.ok }
cancel={ state.modal.cancel }
handleHide={ handleHideModal }>
{ (typeof state.modal.message !== 'string') && state.modal.message }
</ModalDialog>
<div className='remixui_fileexplorer' onClick={() => resetFocus(true)}>
<div>

Write Preview
Loading…
Cancel
Save