Move recorderUI to react

libs/remix-ui/run-tab/src/lib/components/card.tsx

@@ -0,0 +1,36 @@
+// eslint-disable-next-line no-use-before-define
+import React, { useRef, useState } from 'react'
+import { CardProps } from '../types'
+import '../css/card.css'
+
+export function Card (props: CardProps) {
+
+  return (
+    self._view.statusBar = yo``
+
+    function trigger (el) {
+      var body = self._view.cardBody
+      var status = self._view.statusBar
+      if (el.classList) {
+        el.classList.toggle('fa-angle-up')
+        var arrow = el.classList.toggle('fa-angle-down') ? 'up' : 'down'
+        self.event.trigger('expandCollapseCard', [arrow, body, status])
+      }
+    }
+
+    <div class="${css.cardContainer} list-group-item border-0">
+      <div class="d-flex justify-content-between align-items-center" onclick=${() => trigger(self._view.arrow)}>
+        <div class="pr-1 d-flex flex-row">
+          <div>${self._opts.title}</div>
+          <div>${self._opts.collapsedView}</div>
+        </div>
+        <div>
+          <div>
+            <i class="${css.arrow} fas fa-angle-down" onclick="${() => trigger(this)}"></i>
+          </div>
+        </div>
+    </div>
+      <div></div>
+    </div>
+  )
+}

libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx

@@ -0,0 +1,64 @@
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
+import { RecorderProps } from '../types'
+
+export function RecorderUI (props: RecorderProps) {
+  const card = (title: string, recorderCount: number) => {
+    return (
+      <div className="d-flex justify-content-between align-items-center" onClick={() => {}}>
+        <div className="pr-1 d-flex flex-row">
+          <div>{title}</div>
+          <div>
+            <div className="d-flex flex-column">
+              <div className="ml-2 badge badge-pill badge-primary" title="The number of recorded transactions">{recorderCount}</div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div><i className="udapp_arrow fas fa-angle-down"></i></div>
+        </div>
+      </div>
+    )
+  }
+
+  const triggerRecordButton = () => {
+    // dispatch saveScenario()
+    // this.saveScenario(
+    //   (path, cb) => {
+    //     modalDialogCustom.prompt('Save transactions as scenario', 'Transactions will be saved in a file under ' + path, 'scenario.json', cb)
+    //   },
+    //   (error) => {
+    //     if (error) return modalDialogCustom.alert(error)
+    //   }
+    // )
+  }
+
+  const handleClickRunButton = () => {
+    // dispatchRunButtonClickHandler
+    // const file = this.config.get('currentFile')
+    // if (!file) return modalDialogCustom.alert('A scenario file has to be selected')
+    // this.runScenario(file)
+  }
+
+  return (
+    <div className="udapp_cardContainer list-group-item border-0">
+      <TreeView>
+        <TreeViewItem label={card('Transactions recorded', 0)} showIcon={false} labelClass="ml-n1">
+          <div className="d-flex flex-column">
+            <div className="udapp_recorderDescription mt-2">
+              All transactions (deployed contracts and function executions) in this environment can be saved and replayed in
+              another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3.
+            </div>
+            <div className="udapp_transactionActions">
+              <i className="fas fa-save savetransaction udapp_recorder udapp_icon"
+                onClick={triggerRecordButton} title="Save Transactions" aria-hidden="true">
+              </i>
+              <i className="fas fa-play runtransaction udapp_runTxs udapp_icon" title="Run Transactions" aria-hidden="true" onClick={handleClickRunButton}></i>
+            </div>
+          </div>
+        </TreeViewItem>
+      </TreeView>
+    </div>
+  )
+}

libs/remix-ui/run-tab/src/lib/css/card.css

@@ -0,0 +1,12 @@
+.udapp_cardContainer {
+  padding             : 0 24px 16px;
+  margin              : 0;
+  background          : none;
+}
+.udapp_arrow {
+  font-weight         : bold;
+  cursor              : pointer;
+  font-size           : 14px;
+}
+.udapp_arrow:hover {
+}

libs/remix-ui/run-tab/src/lib/run-tab.tsx

@@ -1,6 +1,7 @@
 // eslint-disable-next-line no-use-before-define
 import React, { useState } from 'react'
 import { ContractDropdownUI } from './components/contractDropdownUI'
+import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import './css/run-tab.css'
 import { RunTabProps } from './types'
@@ -17,8 +18,8 @@ export function RunTabUI (props: RunTabProps) {
       <div className="list-group list-group-flush">
         <SettingsUI selectExEnv={selectExEnv} updateExEnv={updateExEnv} />
         <ContractDropdownUI exEnvironment={selectExEnv} />
-        {/* ${this.recorderCard.render()}
-        ${this.instanceContainer} */}
+        <RecorderUI />
+        {/* ${this.instanceContainer} */}
       </div>
     </div>
   )

libs/remix-ui/run-tab/src/lib/types/index.ts

@@ -30,3 +30,7 @@ export interface ValueProps {
 export interface ContractDropdownProps {
   exEnvironment: string
 }
+
+export interface RecorderProps {
+
+}

libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx

@@ -4,7 +4,7 @@ import { TreeViewItemProps } from '../../types'
 import './tree-view-item.css'
 
 export const TreeViewItem = (props: TreeViewItemProps) => {
-  const { id, children, label, labelClass, expand, iconX = 'fas fa-caret-right', iconY = 'fas fa-caret-down', icon, controlBehaviour = false, innerRef, ...otherProps } = props
+  const { id, children, label, labelClass, expand, iconX = 'fas fa-caret-right', iconY = 'fas fa-caret-down', icon, controlBehaviour = false, innerRef, showIcon = true, ...otherProps } = props
   const [isExpanded, setIsExpanded] = useState(false)
 
   useEffect(() => {
@@ -14,7 +14,7 @@ export const TreeViewItem = (props: TreeViewItemProps) => {
   return (
     <li ref={innerRef} key={`treeViewLi${id}`} data-id={`treeViewLi${id}`} className='li_tv' {...otherProps}>
       <div key={`treeViewDiv${id}`} data-id={`treeViewDiv${id}`} className={`d-flex flex-row align-items-center ${labelClass}`} onClick={() => !controlBehaviour && setIsExpanded(!isExpanded)}>
-        { children ? <div className={isExpanded ? `px-1 ${iconY} caret caret_tv` : `px-1 ${iconX} caret caret_tv`} style={{ visibility: children ? 'visible' : 'hidden' }}></div> : icon ? <div className={`pr-3 pl-1 ${icon} caret caret_tv`}></div> : null }
+        { children && showIcon ? <div className={isExpanded ? `px-1 ${iconY} caret caret_tv` : `px-1 ${iconX} caret caret_tv`} style={{ visibility: children ? 'visible' : 'hidden' }}></div> : icon ? <div className={`pr-3 pl-1 ${icon} caret caret_tv`}></div> : null }
         <span className='w-100 pl-1'>
           { label }
         </span>

libs/remix-ui/tree-view/src/types/index.ts

@@ -21,5 +21,6 @@ export interface TreeViewItemProps {
     controlBehaviour?: boolean
     innerRef?: any,
     onContextMenu?: (...args: any) => void,
-    onBlur?: (...args: any) => void
+    onBlur?: (...args: any) => void,
+    showIcon?: boolean
 }