diff --git a/apps/remix-ide/src/app/components/main-panel.js b/apps/remix-ide/src/app/components/main-panel.js index 26a96710b9..707b36a776 100644 --- a/apps/remix-ide/src/app/components/main-panel.js +++ b/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 { , - this.element + this.mainelement ) } } diff --git a/apps/remix-ide/src/app/components/panel.js b/apps/remix-ide/src/app/components/panel.js index a15fcccfe8..93d9937338 100644 --- a/apps/remix-ide/src/app/components/panel.js +++ b/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`
` } 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` -
- -
- ` : '' - this.contents[name] = yo`
${view}${loading}
` - - 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) { diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js index 0cc09d84d4..4d681f04c0 100644 --- a/apps/remix-ide/src/app/components/side-panel.js +++ b/apps/remix-ide/src/app/components/side-panel.js @@ -149,7 +149,7 @@ export class SidePanel extends AbstractPanel {
${this.header}
- ${this.view} + ${this.element}
` } diff --git a/libs/remix-ui/abstract-panel/src/lib/abstract-panel-hoc.tsx b/libs/remix-ui/abstract-panel/src/lib/abstract-panel-hoc.tsx new file mode 100644 index 0000000000..87fe6e225e --- /dev/null +++ b/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 ( + + ) + } + return WithAbstractPanel; + } +} + +export default AbstractPanelHOC \ No newline at end of file diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css index 8061ad4a25..9ab7f8557f 100644 --- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css +++ b/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; - } \ No newline at end of file +.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; +} \ No newline at end of file diff --git a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx b/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx index dd1fbc52d5..f8d4de503b 100644 --- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx +++ b/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 (
- {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 ( +
+ {loading && ( +
+
+ Loading... +
+
+ )} +
+ ) + }) + }
- ); + ) } export default RemixUiAbstractPanel; diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css index 86ce5ed9db..bd9571c854 100644 --- a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.module.css +++ b/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; } \ No newline at end of file diff --git a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx index 2d2ce96bd8..b48f8a465c 100644 --- a/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx +++ b/libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx @@ -18,7 +18,7 @@ export const RemixUiMainPanel = (props: RemixUiMainPanelProps) => { return ( -
+