implement ok and cancel and handle arrows

libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx

@@ -25,7 +25,11 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     opt: {
       debugWithGeneratedSources: false
     },
-    showModal: false
+    showModal: false,
+    modalOpt: {
+      title: '',
+      message: ''
+    }
   })
 
   useEffect(() => {
@@ -89,6 +93,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
               try {
                 content = await debuggerModule.getFile(path)
               } catch (e) {
+                showMsg('Error', e.message)
                 console.log('unable to fetch generated sources, the file probably doesn\'t exist yet', e)
               }
               if (content !== source.contents) {
@@ -146,8 +151,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     try {
       currentReceipt = await web3.eth.getTransactionReceipt(txNumber)
     } catch (e) {
-      console.log('cant get tx', e)
-      setState((prevState) => { return { ...prevState, showModal: true } })
+      showMsg('Error', e.message)
+      console.log('cant get tx', e.message)
     }
     const debuggerInstance = new Debugger({
       web3,
@@ -156,6 +161,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
         try {
           return await debuggerModule.fetchContractAndCompile(address, currentReceipt)
         } catch (e) {
+          showMsg('Error', e.message)
           console.log('cant fetch tx')
           console.error(e)
         }
@@ -175,10 +181,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
           debugger: debuggerInstance
         }
       })
-    }).catch((error) => {
-      console.log('unloading while ', error)
-      setState((prevState) => { return { ...prevState, showModal: true } })
-      // toaster(error, null, null)
+    }).catch(() => {
       unLoad()
     })
   }
@@ -215,9 +218,25 @@ const deleteHighlights = async () => {
     triggerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.trigger.bind(state.debugger.vmDebuggerLogic.event) : null
   }
 
+  const hideModal = () => {
+    setState((prevState) => { return { ...prevState, showModal: false } })
+  }
+  const showMsg = (title, message) => {
+    setState((prevState) => { return { ...prevState, showModal: true, modalOpt: { title, message } } })
+  }
+
   return (
     <div>
-      <ModalDialog title={'New Modal'} hide={!state.showModal} content={<span>Text</span>} opts={{ class: 'p-2', hideClose: true }} />
+      {state.showModal &&
+      <ModalDialog
+        title={state.modalOpt.title}
+        ok={{ label: 'Yes', fn: () => { console.log('OK') } }}
+        cancel={{ label: 'No', fn: () => { console.log('cancel') } }}
+        hide={hideModal}
+        content={<span>{state.modalOpt.message} <textarea onKeyDown={(e) => { e.stopPropagation() }} name="" id="" cols="30" rows="10" /></span>}
+        opts={{ class: 'p-2', hideClose: false }}
+      />
+      }
       <div className='px-2'>
         <div className='mt-3'>
           <p className='mt-2 debuggerLabel'>Debugger Configuration</p>

libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx

@@ -8,34 +8,40 @@ import {ModalDialogProps} from './types';
 
 export const ModalDialog = (props: ModalDialogProps) => {
   const [state, setState] = useState({
-    toggleBtn: true,
-    hideState: true
+    toggleBtn: true
   })
-  const okBtn = useRef(null)
-  const cancelBtn = useRef(null)
-  useEffect(() => {
-    setState(prevState => {
-      console.log("useeffect to ", props.hide)  
-      return {...prevState, hideState: props.hide}
-    })
-}, [props.hide])
+  const modal = useRef(null)
+  const handleHide = () => {
+    props.hide()
+  }
+  useEffect (
+    () => {
+      modal.current.focus()
+    }, []
+  )
   const modalKeyEvent = (keyCode) => {
     console.log("key is ", keyCode)
     if (keyCode === 27) { // Esc
       if (props.cancel && props.cancel.fn) props.cancel.fn()
-      setState((prevState)=>{return {...prevState, hideState: true}})
-    //} else if (keyCode === 13) { // Enter
-    //  okListener()
+      handleHide()
+    } else if (keyCode === 13) { // Enter
+      enterHandler()
     } else if (keyCode === 37) {
       // todo && footerIsActive) { // Arrow Left
       setState((prevState)=>{return {...prevState, toggleBtn: true}})
-      okBtn.current.focus()
     } else if (keyCode === 39) {
       // todo && footerIsActive) { // Arrow Right
       setState((prevState)=>{return {...prevState, toggleBtn: false}})
-      cancelBtn.current.focus()
     }
   }
+  const enterHandler = () => {
+    if (state.toggleBtn) {
+      if (props.ok && props.ok.fn) props.ok.fn()
+    } else {
+      if (props.cancel && props.cancel.fn) props.cancel.fn()
+    }
+    handleHide()
+  }
   return (<>
     <div
       id="modal-dialog"
@@ -43,18 +49,26 @@ export const ModalDialog = (props: ModalDialogProps) => {
       data-backdrop="static"  
       data-keyboard="false"
       tabIndex={-1}
-      className={"modal " + (state.hideState ? "d-none" : "d-block")}
+      className={"modal d-block"}
       role="dialog"
-      onKeyDown={({keyCode})=>{modalKeyEvent(keyCode)}}
     >
       <div id="modal-background" className="modal-dialog" role="document">
-        <div className={"modal-content remixModalContent " + (props.opts ? props.opts.class ? props.opts.class : '': '')}>
+        <div
+          tabIndex={1}
+          onBlur={(e) => {
+            e.stopPropagation()
+            handleHide()
+          }}
+          ref={modal}
+          className={"modal-content remixModalContent " + (props.opts ? props.opts.class ? props.opts.class : '': '')}
+          onKeyDown={({keyCode})=>{modalKeyEvent(keyCode)}}
+        >
           <div className="modal-header">
             <h6 className="modal-title" data-id="modalDialogModalTitle">
             {props.title && props.title}
             </h6>
             {!props.opts.hideClose &&
-            <span className="modal-close">
+            <span className="modal-close" onClick={() => handleHide()}>
               <i id="modal-close" title="Close" className="fas fa-times" aria-hidden="true"></i>
             </span>
             }
@@ -66,14 +80,31 @@ export const ModalDialog = (props: ModalDialogProps) => {
           </div>
           <div className="modal-footer" data-id="modalDialogModalFooter">
             {/* todo add autofocus ^^ */}
+            {props.ok &&
             <span
               id="modal-footer-ok"
               className={"modal-ok btn btn-sm " + (state.toggleBtn ? "btn-dark" : "btn-light")}
-              onClick={() => {if (props.ok && props.ok.fn) props.ok.fn()}}
+              onClick={() => {
+                if (props.ok && props.ok.fn) props.ok.fn()
+                handleHide()
+              }}
+              tabIndex={1}
             >
-              {props.ok&&props.ok.label ? props.ok.label: 'OK'}
+              {props.ok && props.ok.label ? props.ok.label: 'OK'}
             </span>
-            <span id="modal-footer-cancel" className={"modal-cancel btn btn-sm " + (state.toggleBtn ? "btn-light" : "btn-dark")} data-dismiss="modal">{props.cancel&&props.cancel.label ? props.cancel.label: 'Cancel'}</span>
+            }
+            <span
+              id="modal-footer-cancel"
+              className={"modal-cancel btn btn-sm " + (state.toggleBtn ? "btn-light" : "btn-dark")}
+              data-dismiss="modal"
+              onClick={() => {
+                if (props.cancel && props.cancel.fn) props.cancel.fn()
+                handleHide()
+              }}
+              tabIndex={2}
+            >
+              {props.cancel && props.cancel.label ? props.cancel.label: 'Cancel'}
+              </span>
           </div>
         </div>
       </div>

libs/remix-ui/modal-dialog/src/lib/types/index.ts

@@ -2,9 +2,9 @@
 export interface ModalDialogProps {
   title?: string,
   content?: JSX.Element,
-  ok?: {label:string, fn: Function},
-  cancel?: {label:string, fn: Function},
+  ok?: {label:string, fn: () => void},
+  cancel?: {label:string, fn: () => void},
   focusSelector?: string,
   opts?: {class: string, hideClose?: boolean},
-  hide?: boolean
+  hide: () => void
 }
\ No newline at end of file