Skip to content

B
baas-ide
Commit 21fc778c authored by LianaHus's avatar LianaHus
Browse files
Options

modal dialog in react

parent 455c4e1f
Hide whitespace changes
Inline Side-by-side
Showing with 95 additions and 50 deletions
apps/remix-ide/src/app/ui/modaldialog.js
View file @ 21fc778c
......@@ -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>`
`
}
libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
View file @ 21fc778c
......@@ -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>
......
nx.json
View file @ 21fc778c
......@@ -78,6 +78,9 @@
},
"remix-ui-clipboard": {
"tags": []
},
"remix-ui-modal-dialog": {
"tags": []
}
}
}
package.json
View file @ 21fc778c
......@@ -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"
}
}
tsconfig.json
View file @ 21fc778c
......@@ -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"]
......
workspace.json
View file @ 21fc778c
......@@ -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": {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment