refactoring abstract panel

apps/remix-ide/src/app/components/main-panel.js

@@ -16,13 +16,15 @@ const profile = {
 export class MainPanel extends AbstractPanel {
   constructor (config) {
     super(profile)
-    this.element = document.createElement('div')
+    this.mainelement = document.createElement('div')
+    this.element.setAttribute('class', 'mainPanelPluginsContainer')
     this.config = config
   }
 
   focus (name) {
     this.emit('focusChanged', name)
     super.focus(name)
+    this.renderComponent()
   }
 
   onActivation () {
@@ -38,7 +40,7 @@ export class MainPanel extends AbstractPanel {
       <RemixUiMainPanel
         plugin={this}
       />,
-      this.element
+      this.mainelement
     )
   }
 }

apps/remix-ide/src/app/components/panel.js

@@ -4,31 +4,6 @@ import { RemixUiAbstractPanel } from '@remix-ui/abstract-panel' // eslint-disabl
 import { EventEmitter } from 'events'
 const EventManager = require('../../lib/events')
 import { HostPlugin } from '@remixproject/engine-web' // eslint-disable-line
-const csjs = require('csjs-inject')
-const yo = require('yo-yo')
-
-const css = csjs`
-  .plugins        {
-    height: 100%;
-  }
-  .plugItIn       {
-    display        : none;
-    height         : 100%;
-  }
-  .plugItIn > div {
-    overflow-y     : auto;
-    overflow-x     : hidden;
-    height         : 100%;
-    width          : 100%;
-  }
-  .plugItIn.active     {
-    display        : block;
-  }
-  .pluginsContainer {
-    height         : 100%;
-    overflow-y     : hidden;
-  }
-`
 
 /** Abstract class used for hosting the view of a plugin */
 export class AbstractPanel extends HostPlugin {
@@ -41,51 +16,21 @@ export class AbstractPanel extends HostPlugin {
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'plugins')
     this.element.setAttribute('class', 'abstract-panel-plugins')
-
-    // View where the plugin HTMLElement leaves
-    this.view = yo`<div id="plugins" class="${css.plugins}"></div>`
   }
 
   onActivation () {
     this.renderComponent()
   }
 
-  /**
-   * Add the plugin to the panel
-   * @param {String} name the name of the plugin
-   * @param {HTMLElement} content the HTMLContent of the plugin
-   */
-  add (view, name) {
-    if (this.contents[name]) throw new Error(`Plugin ${name} already rendered`)
+  addView (profile, view) {
+    if (this.contents[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`)
     view.style.height = '100%'
     view.style.width = '100%'
     view.style.border = '0'
-
-    const isIframe = view.tagName === 'IFRAME'
-    view.style.display = isIframe ? 'none' : 'block'
-    const loading = isIframe ? yo`
-      <div class="d-flex justify-content-center align-items-center">
-        <div class="spinner-border" role="status">
-          <span class="sr-only">Loading...</span>
-        </div>
-      </div>  
-    ` : ''
-    this.contents[name] = yo`<div class="${css.plugItIn}" >${view}${loading}</div>`
-
-    if (view.tagName === 'IFRAME') {
-      view.addEventListener('load', () => {
-        if (this.contents[name].contains(loading)) {
-          this.contents[name].removeChild(loading)
-        }
-        view.style.display = 'block'
-      })
-    }
-    this.contents[name].style.display = 'none'
-    this.view.appendChild(this.contents[name])
-  }
-
-  addView (profile, view) {
-    this.add(view, profile.name)
+    this.contents[profile.name] = view
+    this.showContent(profile.name)
+    this.element.appendChild(this.contents[profile.name])
+    this.renderComponent()
   }
 
   removeView (profile) {
@@ -101,6 +46,7 @@ export class AbstractPanel extends HostPlugin {
     delete this.contents[name]
     if (el) el.parentElement.removeChild(el)
     if (name === this.active) this.active = undefined
+    this.renderComponent()
   }
 
   /**
@@ -113,8 +59,10 @@ export class AbstractPanel extends HostPlugin {
     if (this.active) {
       this.contents[this.active].style.display = 'none'
     }
+
     this.contents[name].style.display = 'flex'
     this.active = name
+    this.renderComponent()
   }
 
   focus (name) {

apps/remix-ide/src/app/components/side-panel.js

@@ -149,7 +149,7 @@ export class SidePanel extends AbstractPanel {
       <section class="${css.panel} plugin-manager">
         ${this.header}
         <div class="${css.pluginsContainer}">
-          ${this.view}
+          ${this.element}
         </div>
       </section>`
   }

libs/remix-ui/abstract-panel/src/lib/abstract-panel-hoc.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+function AbstractPanelHOC (WrappedComponent: any) {
+    return (WrappedComponent: any) => {
+        const WithAbstractPanel = (props: any) => {
+            return (
+                <WrappedComponent
+                    {...props}
+                />
+            )
+        }
+        return WithAbstractPanel;
+    }
+}
+
+export default AbstractPanelHOC

libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css

@@ -1,20 +1,20 @@
-.abstract-panel-plugins        {
-    height: 100%;
-  }
-  .abstract-panel-plugItIn       {
-    display        : none;
-    height         : 100%;
-  }
-  .abstract-panel-plugItIn > div {
-    overflow-y     : auto;
-    overflow-x     : hidden;
-    height         : 100%;
-    width          : 100%;
-  }
-  .abstract-panel-plugItIn.active     {
-    display        : block;
-  }
-  .abstract-panel-pluginsContainer {
-    height         : 100%;
-    overflow-y     : hidden;
-  }
+.plugins        {
+  height: 100%;
+}
+.plugItIn       {
+  display        : none;
+  height         : 100%;
+}
+.plugItIn > div {
+  overflow-y     : auto;
+  overflow-x     : hidden;
+  height         : 100%;
+  width          : 100%;
+}
+.plugItIn.active     {
+  display        : block;
+}
+.pluginsContainer {
+  height         : 100%;
+  overflow-y     : hidden;
+}

libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx

@@ -1,19 +1,56 @@
-import React from 'react' // eslint-disable-line
+import React, { useEffect, useState } from 'react' // eslint-disable-line
 import './remix-ui-abstract-panel.module.css';
+import parse from 'html-react-parser'
 
 /* eslint-disable-next-line */
 export interface RemixUiAbstractPanelProps {
-  reactView: any
+  reactView: any,
   plugin: any
 }
 
 export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) {
+
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    console.log({ activePlugin: props.plugin.active })
+  },[props.plugin.active])
+
+  useEffect(() => {
+      Object.keys(props.plugin.contents).map((key: string) => {
+        const view = props.plugin.contents[key]
+
+        view.addEventListener('load', () => {
+          setLoading(true)
+        })
+        setLoading(false)
+      })
+    }
+  , [loading])
+
   return (
     <div id="plugins" className="plugins">
-      {console.log({ view: props.plugin })}
-      good
+      {
+        Object.keys(props.plugin.contents).map((key: string, index: number) => {
+          
+          const plugin = props.plugin.contents[key]
+          const active = props.plugin.active === key
+          console.log({ plugin: plugin.id, active: props.plugin.active })
+
+          return (
+            <div className="plugItIn" key={ index }>
+              {loading && (
+                 <div className="d-flex justify-content-center align-items-center">
+                 <div className="spinner-border" role="status">
+                   <span className="sr-only">Loading...</span>
+                 </div>
+               </div>
+              )}
+            </div>
+          )
+        })
+      }
     </div>
-  );
+  )
 }
 
 export default RemixUiAbstractPanel;

libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css

@@ -14,7 +14,13 @@
   .plugItIn.active     {
     display        : block;
   }
-  .pluginsContainer {
+  /* .pluginsContainer {
     height         : 100%;
     overflow-y     : hidden;
+  } */
+
+  .pluginsContainer {
+    height: 100%;
+    display: flex;
+    overflow-y: hidden;
   }

libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx

@@ -18,7 +18,7 @@ export const RemixUiMainPanel = (props: RemixUiMainPanelProps) =>  {
 
 
   return (
-    <div className="plugItIn_2byTty" style={{ display: "block" }} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'>
+    <div className="plugItIn pluginsContainer" style={{ display: "block" }} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'>
     <div data-id="landingPageHomeContainer" className="homeContainer d-flex" style={{ height: "100%", width: "100%", border: "0px", display: "block" }}>
             <div className="mainContent_2A2Ew bg-light">
           <div className="d-flex justify-content-between">