refactor

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

@@ -14,17 +14,10 @@ export class AbstractPanel extends HostPlugin {
   }
 
   addView (profile, view) {
+    console.log(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'
-
-    if (view.tagName === 'IFRAME') {
-      view.style.display = 'block'
-    }
-
     this.contents[profile.name] = view
-    this.contents[profile.name].style.display = 'none'
+    //this.contents[profile.name].style.display = 'none'
   }
 
   removeView (profile) {

apps/remix-ide/src/app/components/plugin-manager-component.js

@@ -96,7 +96,7 @@ class PluginManagerComponent extends ViewPlugin {
   }
 
   render () {
-    return this.htmlElement
+    return <div>test</div>
   }
 
   getAndFilterPlugins (filter) {

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

@@ -18,7 +18,7 @@ export class SidePanel extends AbstractPanel {
   constructor (appManager, verticalIcons) {
     super(sidePanel)
     this.appManager = appManager
-    this.sideelement = document.createElement('div')
+    this.sideelement = document.createElement('span')
     this.verticalIcons = verticalIcons
 
     // Toggle content
@@ -81,6 +81,7 @@ export class SidePanel extends AbstractPanel {
   }
 
   renderComponent () {
+    console.log('render side panel')
     ReactDOM.render(
       <RemixUiSidePanel
         plugin={this} contents={this.contents}

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react' // eslint-disable-line
-import parse from 'html-react-parser'
 import './remix-ui-side-panel.module.css';
+import SidePanelElement from './sidepanel-element';
 
 /* eslint-disable-next-line */
 export interface RemixUiSidePanelProps {
@@ -18,13 +18,13 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
   const [name, setName] = useState(' - ')
 
   useEffect(() => {
-    console.log()
-  }, [name])
+    console.log('load')
+  }, [])
 
-  const getProfile  = async () => {
-    console.log({active: props.plugin.active})
+  const getProfile = async () => {
+    console.log({ active: props.plugin.active })
     if (props.plugin.active) {
-      const profile =  await props.plugin.appManager.getProfile(props.plugin.active)
+      const profile = await props.plugin.appManager.getProfile(props.plugin.active)
       setProfileDocsLink(profile.documentation)
       profile.displayName ? setName(profile.displayName) : setName(profile.name)
       profile.documentation ? setDockLink(true) : setDockLink(false)
@@ -36,43 +36,38 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
       // Beta
       if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
         setVersionWarningBeta(true)
-      } else{
+      } else {
         setVersionWarningBeta(false)
       }
     }
   }
 
-  const renderHeader =  () => {
+  const renderHeader = () => {
     getProfile()
-   return (
-    <header style={{
-      display: 'flex',
-    alignItems: 'center',
-    padding: '16px 24px 15px',
-    justifyContent: 'space-between',
-    }}>
-    <h6 className="swapitTitle" data-id="sidePanelSwapitTitle">{name}</h6>
-    {dockLink ? (<a href={profileDocsLink} className="titleInfo" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
-    {versionWarning ? (<small title="Version Alpha" className="badge-light versionBadge">alpha</small>) : null }
-    {versionWarningBeta ? (<small title="Version Beta" className="badge-light versionBadge">beta</small>) : null}
-  </header>
-   )
+    return (
+      <header className='swapitHeader'>
+        <h6 className="swapitTitle" data-id="sidePanelSwapitTitle">{name}</h6>
+        {dockLink ? (<a href={profileDocsLink} className="titleInfo" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
+        {versionWarning ? (<small title="Version Alpha" className="badge-light versionBadge">alpha</small>) : null}
+        {versionWarningBeta ? (<small title="Version Beta" className="badge-light versionBadge">beta</small>) : null}
+      </header>
+    )
   }
 
-
   return (
-            <section style={{
-              position: "fixed",
-              height: "50px",
-              width: "320px",
-              backgroundColor: "var(--light)",
-              zIndex: "999",
-            }} >
-              {renderHeader()}
-              <div className="pluginsContainer">
-                {props.contents}
-              </div>
-            </section>
+    <section className='panel plugin-manager'>
+      {renderHeader()}
+      <div className="pluginsContainer">
+        {Object.values(props.contents).map((x) => {
+          if (React.isValidElement(x)) {
+            return x
+          } else {
+            return <SidePanelElement render={x} />
+          }
+        })}
+      </div>
+    </section>
+
   );
 }
 

libs/remix-ui/side-panel/src/lib/sidepanel-element.tsx

@@ -0,0 +1,16 @@
+import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
+
+const SidePanelElement = (props: any) => {
+    const sidePanelRef = useRef(null)
+    useEffect(() => {
+        if (sidePanelRef.current) {
+          if (props.render) {
+            sidePanelRef.current.appendChild(props.render)
+          }
+        }
+      }, [])
+
+      return <div ref={sidePanelRef}></div>
+}
+
+export default SidePanelElement