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

modal dialog in react

Browse Source
pull/620/head
LianaHus 4 years ago
parent 455c4e1fd8
commit 21fc778ceb
6 changed files with 95 additions and 50 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. 33
      apps/remix-ide/src/app/ui/modaldialog.js
  2. 69
      libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
  3. 3
      nx.json
  4. 3
      package.json
  5. 5
      tsconfig.json
  6. 32
      workspace.json

33
apps/remix-ide/src/app/ui/modaldialog.js
Unescape View File

@ -2,8 +2,8 @@ var yo = require('yo-yo')
var css = require('./styles/modaldialog-styles')
let incomingModal = false // in case modals are queued, ensure we are not hiding the last one.
module.exports = (title, content, ok, cancel, focusSelector, opts) => {
let agreed = true
module.exports = (title, content, ok, cancel, focusSelector, opts) => { //props
let agreed = true //state vars
let footerIsActive = false
opts = opts || {}
var container = document.querySelector('.modal')
@ -130,21 +130,22 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => {
function html (opts) {
return yo`
<div id="modal-dialog" data-id="modalDialogContainer" data-backdrop="static" data-keyboard="false" class="modal" tabindex="-1" role="dialog">
<div id="modal-background" class="modal-dialog" role="document">
<div class="modal-content ${css.modalContent} ${opts.class}">
<div class="modal-header">
<h6 class="modal-title" data-id="modalDialogModalTitle"></h6>
<span class="modal-close">
<i id="modal-close" title="Close" class="fas fa-times" aria-hidden="true"></i>
</span>
</div>
<div class="modal-body ${css.modalBody}" data-id="modalDialogModalBody"> - </div>
<div class="modal-footer" data-id="modalDialogModalFooter" autofocus>
<span id="modal-footer-ok" class="${css.modalFooterOk} modal-ok btn btn-sm btn-light" tabindex='5'>OK</span>
<span id="modal-footer-cancel" class="${css.modalFooterCancel} modal-cancel btn btn-sm btn-light" tabindex='10' data-dismiss="modal">Cancel</span>
<div id="modal-dialog" data-id="modalDialogContainer" data-backdrop="static" data-keyboard="false" class="modal" tabindex="-1" role="dialog">
<div id="modal-background" class="modal-dialog" role="document">
<div class="modal-content ${css.modalContent} ${opts.class}">
<div class="modal-header">
<h6 class="modal-title" data-id="modalDialogModalTitle"></h6>
<span class="modal-close">
<i id="modal-close" title="Close" class="fas fa-times" aria-hidden="true"></i>
</span>
</div>
<div class="modal-body ${css.modalBody}" data-id="modalDialogModalBody"> - </div>
<div class="modal-footer" data-id="modalDialogModalFooter" autofocus>
<span id="modal-footer-ok" class="${css.modalFooterOk} modal-ok btn btn-sm btn-light" tabindex='5'>OK</span>
<span id="modal-footer-cancel" class="${css.modalFooterCancel} modal-cancel btn btn-sm btn-light" tabindex='10' data-dismiss="modal">Cancel</span>
</div>
</div>
</div>
</div>
</div>`
`
}

69
libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
Unescape View File

@ -5,6 +5,7 @@ import VmDebugger from './vm-debugger/vm-debugger'
import VmDebuggerHead from './vm-debugger/vm-debugger-head'
import { TransactionDebugger as Debugger } from '@remix-project/remix-debug'
import { DebuggerAPI, DebuggerUIProps } from './DebuggerAPI'
import { ModalDialog } from '@remix-ui/modal-dialog'
/* eslint-disable-next-line */
import './debugger-ui.css'
@ -23,7 +24,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
debugging: false,
opt: {
debugWithGeneratedSources: false
}
},
showModal: false
})
useEffect(() => {
@ -114,10 +116,6 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
unLoad()
}
const isDebuggerActive = () => {
return state.isActive
}
const unLoad = () => {
if (state.debugger) state.debugger.unload()
setState(prevState => {
@ -148,7 +146,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
try {
currentReceipt = await web3.eth.getTransactionReceipt(txNumber)
} catch (e) {
// throw modal
console.log('cant get tx', e)
setState((prevState) => { return { ...prevState, showModal: true } })
}
const debuggerInstance = new Debugger({
web3,
@ -157,6 +156,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
try {
return await debuggerModule.fetchContractAndCompile(address, currentReceipt)
} catch (e) {
console.log('cant fetch tx')
console.error(e)
}
return null
@ -176,48 +176,55 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
}
})
}).catch((error) => {
console.log('unloading while ', error)
setState((prevState) => { return { ...prevState, showModal: true } })
// toaster(error, null, null)
unLoad()
})
}
const debug = (txHash) => {
startDebugging(null, txHash, null)
}
}
const debug = (txHash) => {
startDebugging(null, txHash, null)
}
<<<<<<< HEAD
const deleteHighlights = async () => {
await debuggerModule.discardHighlight()
}
const stepManager = {
jumpTo: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpTo.bind(state.debugger.step_manager) : null,
stepOverBack: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepOverBack.bind(state.debugger.step_manager) : null,
stepIntoBack: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepIntoBack.bind(state.debugger.step_manager) : null,
stepIntoForward: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepIntoForward.bind(state.debugger.step_manager) : null,
stepOverForward: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepOverForward.bind(state.debugger.step_manager) : null,
jumpOut: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpOut.bind(state.debugger.step_manager) : null,
jumpPreviousBreakpoint: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpPreviousBreakpoint.bind(state.debugger.step_manager) : null,
jumpNextBreakpoint: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpNextBreakpoint.bind(state.debugger.step_manager) : null,
jumpToException: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpToException.bind(state.debugger.step_manager) : null,
traceLength: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.traceLength : null,
registerEvent: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.event.register.bind(state.debugger.step_manager.event) : null,
}
const vmDebugger = {
registerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.register.bind(state.debugger.vmDebuggerLogic.event) : null,
triggerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.trigger.bind(state.debugger.vmDebuggerLogic.event) : null
}
=======
const deleteHighlights = async () => {
await debuggerModule.call('editor', 'discardHighlight')
}
>>>>>>> 1b1d8f0c7... modal dialog in react
const stepManager = {
jumpTo: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpTo.bind(state.debugger.step_manager) : null,
stepOverBack: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepOverBack.bind(state.debugger.step_manager) : null,
stepIntoBack: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepIntoBack.bind(state.debugger.step_manager) : null,
stepIntoForward: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepIntoForward.bind(state.debugger.step_manager) : null,
stepOverForward: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepOverForward.bind(state.debugger.step_manager) : null,
jumpOut: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpOut.bind(state.debugger.step_manager) : null,
jumpPreviousBreakpoint: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpPreviousBreakpoint.bind(state.debugger.step_manager) : null,
jumpNextBreakpoint: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpNextBreakpoint.bind(state.debugger.step_manager) : null,
jumpToException: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpToException.bind(state.debugger.step_manager) : null,
traceLength: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.traceLength : null,
registerEvent: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.event.register.bind(state.debugger.step_manager.event) : null,
}
const vmDebugger = {
registerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.register.bind(state.debugger.vmDebuggerLogic.event) : null,
triggerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.trigger.bind(state.debugger.vmDebuggerLogic.event) : null
}
return (
<div>
<ModalDialog title={'New Modal'} hide={!state.showModal} content={<span>Text</span>} opts={{ class: 'p-2', hideClose: true }} />
<div className='px-2'>
<div className='mt-3'>
<p className='mt-2 debuggerLabel'>Debugger Configuration</p>
<div className='mt-2 debuggerConfig custom-control custom-checkbox'>
<input className='custom-control-input' id='debugGeneratedSourcesInput' onChange={({ target: { checked } }) => {
setState(prevState => {
return { ...prevState, opt: { debugWithGeneratedSources: checked }}
return { ...prevState, opt: { debugWithGeneratedSources: checked } }
})
}} type='checkbox' title='Debug with generated sources' />
<label data-id='debugGeneratedSourcesLabel' className='form-check-label custom-control-label' htmlFor='debugGeneratedSourcesInput'>Use generated sources (from Solidity v0.7.2)</label>

3
nx.json
Unescape View File

@ -78,6 +78,9 @@
},
"remix-ui-clipboard": {
"tags": []
},
"remix-ui-modal-dialog": {
"tags": []
}
}
}

3
package.json
Unescape View File

@ -279,6 +279,7 @@
"webworkify-webpack": "^2.1.5",
"worker-loader": "^2.0.0",
"yo-yo": "github:ioedeveloper/yo-yo",
"yo-yoify": "^3.7.3"
"yo-yoify": "^3.7.3",
"@types/jest": "25.1.4"
}
}

5
tsconfig.json
Unescape View File

@ -23,13 +23,16 @@
"@remix-project/remix-simulator": ["dist/libs/remix-simulator/src/index.js"],
"@remix-project/remix-solidity": ["dist/libs/remix-solidity/index.js"],
"@remix-project/remix-tests": ["dist/libs/remix-tests/src/index.js"],
"@remix-project/remix-url-resolver": ["dist/libs/remix-url-resolver/index.js"],
"@remix-project/remix-url-resolver": [
"dist/libs/remix-url-resolver/index.js"
],
"@remix-project/remixd": ["dist/libs/remixd/index.js"],
"@remix-ui/tree-view": ["libs/remix-ui/tree-view/src/index.ts"],
"@remix-ui/debugger-ui": ["libs/remix-ui/debugger-ui/src/index.ts"],
"@remix-ui/utils": ["libs/remix-ui/utils/src/index.ts"],
"@remix-ui/clipboard": ["libs/remix-ui/clipboard/src/index.ts"],
"@remix-project/remix-solidity-ts": ["libs/remix-solidity/src/index.ts"],
"@remix-ui/modal-dialog": ["libs/remix-ui/modal-dialog/src/index.ts"]
}
},
"exclude": ["node_modules", "tmp"]

32
workspace.json
Unescape View File

@ -424,7 +424,7 @@
"projectType": "library",
"schematics": {},
"architect": {
"lint": {
"lint": {
"builder": "@nrwl/linter:lint",
"options": {
"linter": "eslint",
@ -572,6 +572,36 @@
}
}
}
},
"remix-ui-modal-dialog": {
"root": "libs/remix-ui/modal-dialog",
"sourceRoot": "libs/remix-ui/modal-dialog/src",
"projectType": "library",
"schematics": {},
"architect": {
"lint": {
"builder": "@nrwl/linter:lint",
"options": {
"linter": "eslint",
"tsConfig": [
"libs/remix-ui/modal-dialog/tsconfig.lib.json",
"libs/remix-ui/modal-dialog/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**",
"!libs/remix-ui/modal-dialog/**/*"
]
}
},
"test": {
"builder": "@nrwl/jest:jest",
"options": {
"jestConfig": "libs/remix-ui/modal-dialog/jest.config.js",
"tsConfig": "libs/remix-ui/modal-dialog/tsconfig.spec.json",
"passWithNoTests": true
}
}
}
}
},
"cli": {

Write Preview
Loading…
Cancel
Save