fixes in Grid view and updates for remix guide

apps/remix-ide/src/app.js

@@ -345,7 +345,7 @@ class AppComponent {
       solidityumlgen,
       compilationDetails,
       vyperCompilationDetails,
-      // remixGuide,
+      remixGuide,
       contractFlattener,
       solidityScript,
       templates,

apps/remix-ide/src/app/plugins/remixGuide.tsx

@@ -1,12 +1,12 @@
 
-import React from 'react'
+import React, {useState} from 'react' // eslint-disable-line
 import { ViewPlugin } from '@remixproject/engine-web'
 import { PluginViewWrapper } from '@remix-ui/helper'
 import { RemixAppManager } from '../../remixAppManager'
 import { RemixUIGridView } from '@remix-ui/remix-ui-grid-view'
 import { RemixUIGridSection } from '@remix-ui/remix-ui-grid-section'
 import { RemixUIGridCell } from '@remix-ui/remix-ui-grid-cell'
-import { ThemeKeys, ThemeObject } from '@microlink/react-json-view'
+import * as Data from './remixGuideData.json'
 //@ts-ignore
 const _paq = (window._paq = window._paq || [])
 
@@ -15,7 +15,6 @@ const profile = {
   displayName: 'Remix Guide',
   description: 'Learn remix with videos',
   location: 'mainPanel',
-  methods: ['showDetails'],
   events: []
 }
 
@@ -24,13 +23,22 @@ export class RemixGuidePlugin extends ViewPlugin {
   appManager: RemixAppManager
   element: HTMLDivElement
   payload: any
-  themeStyle: any
+  showVideo: boolean
-  theme: ThemeKeys | ThemeObject
+  videoID: string
+  handleKeyDown: any
+  handleEscape: any
+
+  //sectionToExpandedCell: [string, string][]; // Array of pairs where key is the section name and the second value is the name of the cell
+
   constructor(appManager: RemixAppManager) {
     super(profile)
     this.appManager = appManager
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'remixGuideEl')
+    this.payload = {
+      sectionToExpandedCell: [['', '']],
+      data: {}
+    }
   }
 
   async onActivation() {
@@ -38,24 +46,24 @@ export class RemixGuidePlugin extends ViewPlugin {
     await this.call('tabs', 'focus', 'remixGuide')
     this.renderComponent()
     _paq.push(['trackEvent', 'plugin', 'activated', 'remixGuide'])
+    // Read the data
+    this.payload.data = Data
+    this.handleKeyDown = (event) => {
+      console.log("key down")
+      if (event.key === 'Escape') {
+        this.showVideo = false
+        this.renderComponent()
       }
-
+    }
-  onDeactivation(): void {
+    document.addEventListener('keydown', this.handleKeyDown);
   }
 
-  async showDetails(sentPayload: any) {
+  onDeactivation(): void {
-    const contractName = Object.entries(sentPayload).find(([key, value]) => key)
+    document.removeEventListener('keydown', this.handleKeyDown);
-    await this.call('tabs', 'focus', 'remixGuide')
-    this.profile.displayName = `${contractName[0]}`
-    this.payload = sentPayload
-    const active = await this.call('theme', 'currentTheme')
-
-    this.renderComponent()
   }
 
   private handleThemeChange() {
     this.on('theme', 'themeChanged', (theme: any) => {
-
       this.renderComponent()
     })
   }
@@ -64,6 +72,7 @@ export class RemixGuidePlugin extends ViewPlugin {
     this.dispatch = dispatch
     this.renderComponent()
   }
+
   render() {
     return (
       <div className="bg-dark" id="remixGuide">
@@ -76,13 +85,14 @@ export class RemixGuidePlugin extends ViewPlugin {
     this.dispatch({
       ...this,
       ...this.payload,
-      themeStyle: this.themeStyle,
+      showVideo: this.showVideo,
-      theme: this.theme
+      videoID: this.videoID
     })
   }
 
   updateComponent(state: any) {
     return (
+      <div className='d-flex'>
         <RemixUIGridView
           plugin={this}
           styleList={""}
@@ -99,145 +109,62 @@ export class RemixGuidePlugin extends ViewPlugin {
             ['vyper', 'info'],
             ['L2', 'danger']
           ]}
-        title='Remix Guide'
+          title={Data.title}
-        description="Streamlined access to categorized video tutorials for mastering Remix IDE. From fundamentals to advanced techniques, level up your development skills with ease."
+          description={Data.description}
-      //themeStyle={state.themeStyle}
         >
-        <RemixUIGridSection
+          { Data.sections.map(section => {
+            return <RemixUIGridSection
               plugin={this}
-          title='Basics'
+              title={section.title}
               hScrollable= {true}
             >
-          <RemixUIGridCell
+              { section.cells.map(cell => {
-            plugin={this}
+                return <RemixUIGridCell
-            title="first item"
-            tagList={['L2', 'AI']}
-            logo='/assets/img/soliditySurvey2023.webp'
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="next"
-            pinned={true}
-            tagList={['L2', 'plugins']}
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell> <RemixUIGridCell
-            plugin={this}
-            title="something"
-            pinned={false}
-            tagList={['solidity', 'plugins']}
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="1"
-            tagList={['solidity']}
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell> <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
                   plugin={this}
-            title="Something very very long"
+                  title={cell.title}
-          >
+                  tagList={cell.tagList}
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
+                  expandViewEl={
-          </RemixUIGridCell> <RemixUIGridCell
+                    cell.expandViewElement
-            plugin={this}
+                  }
-            title="1"
+                  handleExpand={() => {
-          >
+                    this.showVideo = true
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
+                    this.videoID = cell.expandViewElement.videoID
-          </RemixUIGridCell>
+                    this.renderComponent()
-          <RemixUIGridCell
+                  }}
-            plugin={this}
+                  logo={cell.expandViewElement.logo}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-        </RemixUIGridSection>
-        <RemixUIGridSection
-          plugin={this}
-          title='Basics not scrollable'
-          hScrollable= {false}
-        >
-          <RemixUIGridCell
-            plugin={this}
-            title="first item"
-            logo='/assets/img/soliditySurvey2023.webp'
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="next"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell> <RemixUIGridCell
-            plugin={this}
-            title="something"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell> <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell> <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="1"
-          >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
-          </RemixUIGridCell>
-          <RemixUIGridCell
-            plugin={this}
-            title="1"
                 >
-            <img src={'/assets/img/soliditySurvey2023.webp'} style={{ height: '70px', width: '70px' }} alt=""></img>
+                  <img src={"//img.youtube.com/vi/" + this.videoID + "/0.jpg"} style={{ height: '70px', width: '70px' }}></img>
                 </RemixUIGridCell>
+              })}
             </RemixUIGridSection>
+          })}
         </RemixUIGridView>
+        { state.showVideo && <div
+          data-id={`EnterModalDialogContainer-react`}
+          data-backdrop="static"
+          data-keyboard="false"
+          className={"modal d-flex"}
+          role="dialog"
+          style={{ justifyContent: "center" }}
+        >
+          <div className="align-self-center pb-4" role="document">
+            <div
+              tabIndex={-1}
+              className={'modal-content remixModalContent mb-4'}
+            >
+              <div className="text-break remixModalBody d-flex flex-column p-3 justify-content-between" data-id={`EnterModalDialogModalBody-react`}>
+                <iframe style={{ minHeight: "500px", minWidth: "1000px" }} width="1000" height="500" src={"https://www.youtube.com/embed/" + this.videoID + "?si=ZdckOaSPR7VsLj_2"} allowFullScreen></iframe>
+              </div>
+              <div className="modal-footer d-flex flex-column">
+                <button onClick={() => {
+                  this.showVideo = false
+                  this.renderComponent()
+                }}>Close</button>
+              </div>
+            </div>
+          </div>
+        </div>}
+      </div>
     )
   }
 

apps/remix-ide/src/app/plugins/remixGuideData.json

@@ -0,0 +1,46 @@
+{
+  "logo": "/assets/img/YouTubeLogo.webp",
+  "title": "Remix Guide",
+  "description": "Streamlined access to categorized video tutorials for mastering Remix IDE. From fundamentals to advanced techniques, level up your development skills with ease.",
+  "sections": [
+    {
+      "title": "Basics",
+      "hScrollable": "true",
+      "cells": [
+        {
+          "title": "first item",
+          "tagList": [
+            "L2",
+            "AI" 
+          ],
+          "expandViewElement": {
+            "videoID": "vH8T3In6ZkE",
+            "logo": "https://yt3.ggpht.com/9NFZbC9mkA152sSWJJgNBls6GlBdknsF-9gi6ZVk_xsHjmc82j3q1Pd5a--GCnOKUrP-YtNbHls=s48-c-k-c0x00ffffff-no-rj"
+          }
+        },
+        {
+          "title": "second item",
+          "tagList": [
+            "solidity",
+            "AI" 
+          ],
+          "expandViewElement": {
+            "videoID": "vH8T3In6ZkE",
+            "logo": "https://yt3.ggpht.com/9NFZbC9mkA152sSWJJgNBls6GlBdknsF-9gi6ZVk_xsHjmc82j3q1Pd5a--GCnOKUrP-YtNbHls=s48-c-k-c0x00ffffff-no-rj"
+          }
+        },
+        {
+          "title": "third item",
+          "tagList": [
+            "vyper",
+            "AI" 
+          ],
+          "expandViewElement": {
+            "videoID": "vH8T3In6ZkE",
+            "logo": "https://yt3.ggpht.com/9NFZbC9mkA152sSWJJgNBls6GlBdknsF-9gi6ZVk_xsHjmc82j3q1Pd5a--GCnOKUrP-YtNbHls=s48-c-k-c0x00ffffff-no-rj"
+          }
+        }
+      ]
+    }
+  ]
+}

apps/remix-ide/src/remixAppManager.js

@@ -128,7 +128,7 @@ export function isNative(name) {
     'circuit-compiler',
     'compilationDetails',
     'vyperCompilationDetails',
-    'remixGuide',
+    //'remixGuide',
     'walletconnect'
   ]
   return nativePlugins.includes(name) || requiredModules.includes(name) || isInjectedProvider(name) || isVM(name)

libs/remix-ui/grid-view/src/lib/components/customCheckbox.tsx

@@ -16,15 +16,16 @@ export const CustomCheckbox = (props: CustomCheckboxProps) => {
   if (!textColor || textColor == '') textColor = filterCon.keyValueMap[props.label].color
 
   return (
-    <div id={textColor + props.label} className="h-80 mx-1 align-items-center custom-control custom-checkbox" style={{ minWidth: '4rem' }}>
+    <div id={textColor + props.label}
+      className="h-80 mx-1 align-items-center custom-control custom-checkbox"
+      style={{ minWidth: '4rem' }}
+    >
       <input
         className="custom-control-input"
         id={"GVCheckbox" + props.label}
         defaultChecked={defChecked}
         onChange={e => {
-          if (props.label == 'no tag')
+          filterCon.updateValue(props.label, e.target.checked, textColor)}}
-            filterCon.showUntagged = ! filterCon.showUntagged
-          else filterCon.updateValue(props.label, e.target.checked, textColor)}}
         type="checkbox"
       />
       <label

libs/remix-ui/grid-view/src/lib/filtersContext.tsx

@@ -3,9 +3,10 @@ import React, { createContext, useState, useContext } from 'react';
 interface FilterContextType {
   showUntagged: boolean
   showPin: boolean
-  keyValueMap: Record<string, { enabled: boolean; color: string; }>;
+  keyValueMap: Record<string, { enabled: boolean; color: string; }>
   updateValue: (key: string, enabled: boolean, color: string) => void
   addValue: (key: string, enabled: boolean, color: string) => void
+  filter: string
 }
 const FiltersContext = createContext<FilterContextType>({
   showUntagged: false,
@@ -13,6 +14,7 @@ const FiltersContext = createContext<FilterContextType>({
   keyValueMap: {},
   updateValue: () => {},
   addValue: () => {},
+  filter: ""
 });
 
 export default FiltersContext

libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useContext, useRef, ReactNode} from 'react' // eslint-disable-line
+import React, {useState, useEffect, useContext, useRef, ReactNode, ReactHTMLElement} from 'react' // eslint-disable-line
 
 import './remix-ui-grid-cell.css'
 import FiltersContext from "./filtersContext"
@@ -16,26 +16,49 @@ interface RemixUIGridCellProps {
   pinned?: boolean
   pinStateCallback?: any
   logo?: string
-  title?: string
+  title: string
   tagList?: string[] // max 8, others will be ignored
   classList?: string
   styleList?: any
   children?: ReactNode
+  expandViewEl?: any
+  handleExpand?: any
 }
 
 export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
   const filterCon = useContext(FiltersContext)
   const [anyEnabled, setAnyEnabled] = useState(false)
+  const [expand, setExpand] = useState(false)
   const [pinned, setPinned] = useState<boolean>(props.pinned)
 
   useEffect(() => {
     if (props.tagList) setAnyEnabled(props.tagList.some((key) => filterCon.keyValueMap[key]?.enabled))
-    else setAnyEnabled(filterCon.showUntagged)
+    else setAnyEnabled(filterCon?.keyValueMap['no tag']?.enabled)
+    if (filterCon.filter != '') setAnyEnabled(anyEnabled && props.title.toLowerCase().includes(filterCon.filter))
   }, [filterCon, props.tagList])
 
+  /*const listenOnExpand = (key) => {
+    if (key === props.key) setExpand(props.toggleExpandView)
+    console.log('expand ----> ', key)
+  }
+
+  // The expanded widged should go to the grid-segment and be updated based on the expandedItem state variable of the plugin. 
+  // The state var will work like theme dispattching is working.
+
+  useEffect(() => {
+    // TODO should be refactored to update based on state of plugin.
+    props.plugin.on(props.plugin.name, 'expandGridCell', listenOnExpand)
+  }, [])
+  */
+
   return (
-    <div className='mr-2 mt-3'>
+    <div className='mr-2 mt-3' onClick={() => {
-      { anyEnabled && <div className='d-flex flex-grid'>
+      if (props.expandViewEl)
+        props.handleExpand(!expand)
+      else return
+    }}>
+      { anyEnabled && <div className='d-flex flex-column'>
+        <div className='d-flex flex-grid'>
           <div className={"d-flex mx-0 p-2 bg-light border border-secondary remixui_grid_cell_container " + props.classList || ''} data-id={"remixUIGS" + props.title}>
             <div className="d-flex remixui_grid_cell flex-column">
               <div className='d-flex flex-row pb-1 align-items-end' style={{width: '8rem', height: '1rem'}}>
@@ -77,6 +100,11 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
           { !props.tagList && <span
             className={'remixui_grid_cell_tags'}>
           </span> }
+        </div>
+        { expand && <div>
+          { props.expandViewEl }
+        </div>
+        }
       </div> }
     </div>
   )

libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx

@@ -16,6 +16,7 @@ interface RemixUIGridSectionProps {
   classList?: string
   styleList?: any
   children?: ReactNode
+  expandedCell?: any
 }
 
 export const RemixUIGridSection = (props: RemixUIGridSectionProps) => {
@@ -30,6 +31,10 @@ export const RemixUIGridSection = (props: RemixUIGridSectionProps) => {
         <div className={(props.hScrollable) ? `d-flex flex-row pb-2  overflow-auto` : `d-flex flex-wrap`}>
           { props.children }
         </div>
+        { props.expandedCell && <div>
+          { props.expandedCell }
+        </div>
+        }
       </div>
     </div>
   )

libs/remix-ui/grid-view/src/lib/remix-ui-grid-view.tsx

@@ -1,7 +1,6 @@
 import React, {useState, useEffect, useContext, useRef, ReactNode} from 'react' // eslint-disable-line
 
 import './remix-ui-grid-view.css'
-import { ThemeContext, themes } from './themeContext'
 import CustomCheckbox from './components/customCheckbox'
 import FiltersContext from "./filtersContext"
 
@@ -28,7 +27,7 @@ interface RemixUIGridViewProps {
 
 export const RemixUIGridView = (props: RemixUIGridViewProps) => {
   const [keyValueMap, setKeyValueMap] = useState<Record<string, { enabled: boolean; color: string; }>>({});
-
+  const [filter, setFilter] = useState("")
   const showUntagged = props.showUntagged || false
   const showPin = props.showPin || false
   const updateValue = (key: string, enabled: boolean, color?: string) => {
@@ -39,6 +38,30 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
     }))
   }
 
+  const [state, setState] = useState<{
+    searchDisable: boolean
+  }>({
+    searchDisable: true
+  })
+  const searchInputRef = useRef(null)
+
+  const handleSearchKeyDown = (e: KeyboardEvent) => {
+    if (e.target !== searchInputRef.current) return
+    if (e.key === 'Enter') {
+      searchInputRef.current.value = ''
+    } else {
+      setState((prevState) => {
+        console.log("update filter", searchInputRef.current.value)
+        return {
+          ...prevState,
+          searchDisable: searchInputRef.current.value === '',
+          filter: searchInputRef.current.value
+        }
+      })
+      setFilter(searchInputRef.current.value)
+    }
+  }
+
   const addValue = (key: string, enabled: boolean, color: string) => {
     // Check if the key already exists, if so, do not add
     if (key in keyValueMap) {
@@ -52,17 +75,10 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
     }))
   }
 
-  const { plugin } = props.plugin
-  const searchInputRef = useRef(null)
-
-  const [state, setState] = useState<{
-    themeQuality: {filter: string; name: string}
-  }>({
-    themeQuality: themes.light
-  })
-
   // Initialize filters context with data from props
   useEffect(() => {
+    document.addEventListener('keyup', (e) => handleSearchKeyDown(e))
+
     if (props.tagList && Array.isArray(props.tagList)) {
       const initialKeyValueMap: Record<string, { enabled: boolean; color: string; }> = {};
 
@@ -74,33 +90,14 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
       if (showUntagged) initialKeyValueMap['no tag'] = { enabled: true, color: 'primary' }
       setKeyValueMap(initialKeyValueMap)
     }
-  }, [])
+    return () => {
-
+      document.removeEventListener('keyup', handleSearchKeyDown)
-  useEffect(() => {
-    plugin?.call('theme', 'currentTheme').then((theme) => {
-      // update theme quality. To be used for for images
-      setState((prevState) => {
-        return {
-          ...prevState,
-          themeQuality: theme.quality === 'dark' ? themes.dark : themes.light
-        }
-      })
-    })
-    plugin?.on('theme', 'themeChanged', (theme) => {
-      // update theme quality. To be used for for images
-      setState((prevState) => {
-        return {
-          ...prevState,
-          themeQuality: theme.quality === 'dark' ? themes.dark : themes.light
     }
-      })
+  }, [])
-    })
-  }, [plugin])
 
   return (
-    <FiltersContext.Provider value={{ showUntagged, showPin, keyValueMap, updateValue, addValue }}>
+    <FiltersContext.Provider value={{ showUntagged, showPin, keyValueMap, updateValue, addValue, filter }}>
       <div className={"d-flex flex-column bg-dark w-100 h-100 remixui_grid_view_container " + props.classList || ''} data-id="remixUIGV">
-        <ThemeContext.Provider value={state.themeQuality}>
         <div className="d-flex flex-column w-100 remixui_grid_view">
           <div className='d-flex p-4 bg-light flex-column  remixui_grid_view_titlebar'>
             <div className='d-flex flex-row align-items-center mb-2'>
@@ -112,10 +109,11 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
               <div className="d-flex flex-row pr-2 pb-1 align-items-center justify-content-between">
                 <div className='d-flex' id="GVFilter">
                   <button
+                    disabled={state.searchDisable}
                     className="remixui_grid_view_btn text-secondary form-control bg-light border d-flex align-items-center p-2 justify-content-center fas fa-filter bg-light"
                     onClick={(e) => {
+                      setFilter(searchInputRef.current.value)
                       _paq.push(['trackEvent', 'GridView' + props.title ? props.title : '', 'filter', searchInputRef.current.value])
-                        //setstate
                     }}
                   ></button>
                   <input
@@ -138,7 +136,6 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
           </div>
           { props.children }
         </div>
-        </ThemeContext.Provider>
       </div>
     </FiltersContext.Provider>
   )

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

@@ -47,6 +47,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
   }
 
   const modalKeyEvent = (keyCode) => {
+    console.log("modal key", keyCode)
     if (keyCode === 27) {
       // Esc
       if (props.cancelFn) props.cancelFn()