Modal Dialog in react

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

@@ -22,7 +22,7 @@ export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber, de
       requestDebug(undefined, state.txNumber)
     }
   }
-  
+
   const unload = () => {
     unloadRequested()
   }
@@ -33,7 +33,6 @@ export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber, de
     // oninvalid="setCustomValidity('Please provide a valid transaction number, must start with 0x and have length of 22')"
     // pattern="^0[x,X]+[0-9a-fA-F]{22}"
     // this.state.txNumberInput.setCustomValidity('')
-
     setState(prevState => {
       return {
         ...prevState,
@@ -58,16 +57,16 @@ export const TxBrowser = ({ requestDebug, unloadRequested, transactionNumber, de
           />
         </div>
         <div className="d-flex justify-content-center w-100 btn-group py-1">
-        <button
-          className="btn btn-primary btn-sm txbutton"
-          id="load"
-          title={debugging ? 'Stop debugging' : 'Start debugging'}
-          onClick={handleSubmit}
-          data-id="debuggerTransactionStartButton"
-          disabled={!state.txNumber ? true : false }
-        >
-          { debugging ? 'Stop' : 'Start' } debugging
-        </button>
+          <button
+            className="btn btn-primary btn-sm txbutton"
+            id="load"
+            title={debugging ? 'Stop debugging' : 'Start debugging'}
+            onClick={handleSubmit}
+            data-id="debuggerTransactionStartButton"
+            disabled={!state.txNumber ? true : false }
+          >
+            { debugging ? 'Stop' : 'Start' } debugging
+          </button>
         </div>
       </div>
       <span id='error'></span>

libs/remix-ui/modal-dialog/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@nrwl/react/babel"],
+  "plugins": []
+}

libs/remix-ui/modal-dialog/.eslintrc

@@ -0,0 +1,18 @@
+{
+  "env": {
+      "browser": true,
+      "es6": true
+  },
+  "extends": "../../../.eslintrc",
+  "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+      "ecmaVersion": 11,
+      "sourceType": "module"
+  },
+  "rules": {
+      "standard/no-callback-literal": "off"
+  }
+} 

libs/remix-ui/modal-dialog/README.md

@@ -0,0 +1,7 @@
+# remix-ui-modal-dialog
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-modal-dialog` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/modal-dialog/babel-jest.config.json

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ]
+}

libs/remix-ui/modal-dialog/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  name: 'remix-ui-modal-dialog',
+  preset: '../../../jest.config.js',
+  transform: {
+    '^.+\\.[tj]sx?$': [
+      'babel-jest',
+      { cwd: __dirname, configFile: './babel-jest.config.json' }
+    ]
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
+  coverageDirectory: '../../../coverage/libs/remix-ui/modal-dialog'
+}

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

@@ -0,0 +1,2 @@
+export * from './lib/modal-dialog-custom'
+export * from './lib/remix-ui-modal-dialog'

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

@@ -0,0 +1,16 @@
+import React from 'react' // eslint-disable-line
+
+import './modal-dialog-custom.css'
+
+/* eslint-disable-next-line */
+export interface ModalDialogCustomProps {}
+
+export const ModalDialogCustom = (props: ModalDialogCustomProps) => {
+  return (
+    <div>
+      <h1>Welcome to modal-dialog-custom!</h1>
+    </div>
+  )
+}
+
+export default ModalDialogCustom

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

@@ -0,0 +1,19 @@
+.remixModalContent {
+  box-shadow: 0 0 8px 1000px rgba(0,0,0,0.6),0 6px 20px 0 rgba(0,0,0,0.19);
+  -webkit-animation-name: animatetop;
+  -webkit-animation-duration: 0.4s;
+  animation-name: animatetop;
+  animation-duration: 0.4s
+}
+.remixModalBody {
+  overflow-y: auto;
+  max-height: 600px;
+}
+@-webkit-keyframes animatetop {
+  from {top: -300px; opacity: 0}
+  to {top: 0; opacity: 1}
+}
+@keyframes animatetop {
+  from {top: -300px; opacity: 0}
+  to {top: 0; opacity: 1}
+}

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

@@ -0,0 +1,114 @@
+import React, { useRef, useState, useEffect } from 'react' // eslint-disable-line
+import { ModalDialogProps } from './types' // eslint-disable-line
+
+import './remix-ui-modal-dialog.css'
+
+export const ModalDialog = (props: ModalDialogProps) => {
+  const [state, setState] = useState({
+    toggleBtn: true
+  })
+  const modal = useRef(null)
+  const handleHide = () => {
+    props.hide()
+  }
+
+  useEffect(
+    () => {
+      modal.current.focus()
+    }, []
+  )
+
+  const modalKeyEvent = (keyCode) => {
+    if (keyCode === 27) { // Esc
+      if (props.cancel && props.cancel.fn) props.cancel.fn()
+      handleHide()
+    } else if (keyCode === 13) { // Enter
+      enterHandler()
+    } else if (keyCode === 37) {
+      // todo && footerIsActive) { // Arrow Left
+      setState((prevState) => { return { ...prevState, toggleBtn: true } })
+    } else if (keyCode === 39) {
+      // todo && footerIsActive) { // Arrow Right
+      setState((prevState) => { return { ...prevState, toggleBtn: false } })
+    }
+  }
+
+  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"
+      data-id="modalDialogContainer"
+      data-backdrop="static"
+      data-keyboard="false"
+      tabIndex={-1}
+      className="modal d-block"
+      role="dialog"
+    >
+      <div id="modal-background" className="modal-dialog" role="document">
+        <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" onClick={() => handleHide()}>
+              <i id="modal-close" title="Close" className="fas fa-times" aria-hidden="true"></i>
+            </span>
+            }
+          </div>
+          <div className="modal-body text-break remixModalBody" data-id="modalDialogModalBody">
+            {props.content &&
+            props.content
+            }
+          </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()
+                handleHide()
+              }}
+              tabIndex={1}
+            >
+              {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"
+              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>
+    </div>
+  </>)
+}
+
+export default ModalDialog

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

@@ -0,0 +1,9 @@
+export interface ModalDialogProps {
+  title?: string,
+  content?: JSX.Element,
+  ok?: {label:string, fn: () => void},
+  cancel?: {label:string, fn: () => void},
+  focusSelector?: string,
+  opts?: {class: string, hideClose?: boolean},
+  hide: () => void
+}

libs/remix-ui/modal-dialog/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/remix-ui/modal-dialog/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

libs/remix-ui/modal-dialog/tsconfig.spec.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.spec.js",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

nx.json

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

package.json

@@ -41,7 +41,7 @@
     "workspace-schematic": "nx workspace-schematic",
     "dep-graph": "nx dep-graph",
     "help": "nx help",
-    "lint:libs": "nx run-many --target=lint --projects=remixd",
+    "lint:libs": "nx run-many --target=lint --projects=remixd,remix-ui-modal-dialog",
     "build:libs": "nx run-many --target=build --parallel=false --with-deps=true --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd",
     "test:libs": "nx run-many --target=test --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd",
     "publish:libs": "npm run build:libs & lerna publish --skip-git & npm run bumpVersion:libs",
@@ -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

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