From 68cb1f8bff79e2c2051839d13b60b41ce41bb95f Mon Sep 17 00:00:00 2001 From: yann300 Date: Mon, 20 Dec 2021 14:45:42 +0100 Subject: [PATCH] fix_using_abstract_panel --- .../src/app/components/hidden-panel.js | 18 ++- .../src/app/components/main-panel.js | 12 +- apps/remix-ide/src/app/components/panel.js | 21 ---- .../src/app/components/side-panel.js | 5 +- libs/remix-ui/abstract-panel/.babelrc | 12 -- libs/remix-ui/abstract-panel/.eslintrc.json | 18 --- libs/remix-ui/abstract-panel/README.md | 7 -- libs/remix-ui/abstract-panel/package.json | 4 - libs/remix-ui/abstract-panel/src/index.ts | 1 - .../src/lib/abstract-panel-hoc.tsx | 16 --- .../lib/remix-ui-abstract-panel.module.css | 16 --- .../src/lib/remix-ui-abstract-panel.tsx | 22 ---- libs/remix-ui/abstract-panel/tsconfig.json | 20 ---- .../remix-ui/abstract-panel/tsconfig.lib.json | 13 --- .../src/lib/remix-ui-main-panel.tsx | 110 +----------------- .../src/lib/remix-ui-side-panel.tsx | 4 + nx.json | 3 - tsconfig.base.json | 1 - workspace.json | 18 --- 19 files changed, 35 insertions(+), 286 deletions(-) delete mode 100644 libs/remix-ui/abstract-panel/.babelrc delete mode 100644 libs/remix-ui/abstract-panel/.eslintrc.json delete mode 100644 libs/remix-ui/abstract-panel/README.md delete mode 100644 libs/remix-ui/abstract-panel/package.json delete mode 100644 libs/remix-ui/abstract-panel/src/index.ts delete mode 100644 libs/remix-ui/abstract-panel/src/lib/abstract-panel-hoc.tsx delete mode 100644 libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css delete mode 100644 libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx delete mode 100644 libs/remix-ui/abstract-panel/tsconfig.json delete mode 100644 libs/remix-ui/abstract-panel/tsconfig.lib.json diff --git a/apps/remix-ide/src/app/components/hidden-panel.js b/apps/remix-ide/src/app/components/hidden-panel.js index 77f67c6f4c..65a13be773 100644 --- a/apps/remix-ide/src/app/components/hidden-panel.js +++ b/apps/remix-ide/src/app/components/hidden-panel.js @@ -1,7 +1,7 @@ +import React from 'react' // eslint-disable-line import { AbstractPanel } from './panel' import * as packageJson from '../../../../../package.json' const csjs = require('csjs-inject') -const yo = require('yo-yo') const css = csjs` .pluginsContainer { @@ -20,12 +20,20 @@ const profile = { export class HiddenPanel extends AbstractPanel { constructor () { super(profile) + this.container = document.createElement('div') } render () { - return yo` -
- ${this.view} -
` + return this.container + } + + renderComponent () { + return ReactDOM.render( +
+ {this.element} +
+ , + this.container + ) } } diff --git a/apps/remix-ide/src/app/components/main-panel.js b/apps/remix-ide/src/app/components/main-panel.js index dd9269a27c..f1568228db 100644 --- a/apps/remix-ide/src/app/components/main-panel.js +++ b/apps/remix-ide/src/app/components/main-panel.js @@ -21,6 +21,10 @@ export class MainPanel extends AbstractPanel { this.config = config } + onActivation () { + this.renderComponent() + } + focus (name) { this.emit('focusChanged', name) super.focus(name) @@ -30,6 +34,12 @@ export class MainPanel extends AbstractPanel { addView (profile, view) { super.addView(profile, view) view.style.height = '100%' + this.renderComponent() + } + + removeView (profile) { + super.removeView(profile) + this.renderComponent() } onActivation () { @@ -43,7 +53,7 @@ export class MainPanel extends AbstractPanel { renderComponent () { ReactDOM.render( , this.mainelement ) diff --git a/apps/remix-ide/src/app/components/panel.js b/apps/remix-ide/src/app/components/panel.js index daa211a121..113db9438d 100644 --- a/apps/remix-ide/src/app/components/panel.js +++ b/apps/remix-ide/src/app/components/panel.js @@ -1,6 +1,4 @@ import React from 'react' // eslint-disable-line -import ReactDOM from 'react-dom' -import { RemixUiAbstractPanel } from '@remix-ui/abstract-panel' // eslint-disable-line import { EventEmitter } from 'events' const EventManager = require('../../lib/events') import { HostPlugin } from '@remixproject/engine-web' // eslint-disable-line @@ -13,11 +11,6 @@ export class AbstractPanel extends HostPlugin { this.event = new EventManager() this.contents = {} this.active = undefined - this.element = document.createElement('div') - } - - onActivation () { - this.renderComponent() } addView (profile, view) { @@ -32,8 +25,6 @@ export class AbstractPanel extends HostPlugin { this.contents[profile.name] = view this.contents[profile.name].style.display = 'none' - this.element.appendChild(this.contents[profile.name]) - this.renderComponent() } removeView (profile) { @@ -49,9 +40,7 @@ export class AbstractPanel extends HostPlugin { remove (name) { const el = this.contents[name] delete this.contents[name] - if (el) el.parentElement.removeChild(el) if (name === this.active) this.active = undefined - this.renderComponent() } /** @@ -64,7 +53,6 @@ export class AbstractPanel extends HostPlugin { if (this.active) { this.contents[this.active].style.display = 'none' } - console.log({ name, active: this.active, contents: this.contents }) this.contents[name].style.display = 'flex' this.contents[name].style.paddingTop = '20%' this.contents[name].style.flexDirection = 'column' @@ -75,13 +63,4 @@ export class AbstractPanel extends HostPlugin { focus (name) { this.showContent(name) } - - renderComponent () { - ReactDOM.render( - , - this.element - ) - } } diff --git a/apps/remix-ide/src/app/components/side-panel.js b/apps/remix-ide/src/app/components/side-panel.js index f39dd7963d..a57165b564 100644 --- a/apps/remix-ide/src/app/components/side-panel.js +++ b/apps/remix-ide/src/app/components/side-panel.js @@ -18,9 +18,7 @@ export class SidePanel extends AbstractPanel { constructor (appManager, verticalIcons) { super(sidePanel) this.appManager = appManager - // this.sideelement = this.element this.sideelement = document.createElement('div') - this.element = this.sideelement this.verticalIcons = verticalIcons // Toggle content @@ -60,6 +58,7 @@ export class SidePanel extends AbstractPanel { super.removeView(profile) this.emit('pluginDisabled', profile.name) this.verticalIcons.unlinkContent(profile) + this.renderComponent() } addView (profile, view) { @@ -84,7 +83,7 @@ export class SidePanel extends AbstractPanel { renderComponent () { ReactDOM.render( , this.sideelement diff --git a/libs/remix-ui/abstract-panel/.babelrc b/libs/remix-ui/abstract-panel/.babelrc deleted file mode 100644 index ccae900be4..0000000000 --- a/libs/remix-ui/abstract-panel/.babelrc +++ /dev/null @@ -1,12 +0,0 @@ -{ - "presets": [ - [ - "@nrwl/react/babel", - { - "runtime": "automatic", - "useBuiltIns": "usage" - } - ] - ], - "plugins": [] -} diff --git a/libs/remix-ui/abstract-panel/.eslintrc.json b/libs/remix-ui/abstract-panel/.eslintrc.json deleted file mode 100644 index 50e59482cf..0000000000 --- a/libs/remix-ui/abstract-panel/.eslintrc.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"], - "ignorePatterns": ["!**/*"], - "overrides": [ - { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], - "rules": {} - }, - { - "files": ["*.ts", "*.tsx"], - "rules": {} - }, - { - "files": ["*.js", "*.jsx"], - "rules": {} - } - ] -} diff --git a/libs/remix-ui/abstract-panel/README.md b/libs/remix-ui/abstract-panel/README.md deleted file mode 100644 index afe064e666..0000000000 --- a/libs/remix-ui/abstract-panel/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# remix-ui-abstract-panel - -This library was generated with [Nx](https://nx.dev). - -## Running unit tests - -Run `nx test remix-ui-abstract-panel` to execute the unit tests via [Jest](https://jestjs.io). diff --git a/libs/remix-ui/abstract-panel/package.json b/libs/remix-ui/abstract-panel/package.json deleted file mode 100644 index d2d23f51ff..0000000000 --- a/libs/remix-ui/abstract-panel/package.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "@remix-ui/abstract-panel", - "version": "0.0.1" -} diff --git a/libs/remix-ui/abstract-panel/src/index.ts b/libs/remix-ui/abstract-panel/src/index.ts deleted file mode 100644 index 2cc84aaa4c..0000000000 --- a/libs/remix-ui/abstract-panel/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './lib/remix-ui-abstract-panel'; 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 deleted file mode 100644 index 87fe6e225e..0000000000 --- a/libs/remix-ui/abstract-panel/src/lib/abstract-panel-hoc.tsx +++ /dev/null @@ -1,16 +0,0 @@ -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 deleted file mode 100644 index 8ab5f0b1c8..0000000000 --- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.module.css +++ /dev/null @@ -1,16 +0,0 @@ -.plugins { - height: 100%; -} -.plugItIn { - display : none; - height : 100%; -} -.plugItIn > div { - overflow-y : auto; - overflow-x : hidden; - height : 100%; - width : 100%; -} -.plugItIn.active { - display : block; -} \ 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 deleted file mode 100644 index 629543aa5a..0000000000 --- a/libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx +++ /dev/null @@ -1,22 +0,0 @@ -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, - plugin: any -} - -export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) { - - const [loading, setLoading] = useState(false); - - return ( -
- -
- ) -} - -export default RemixUiAbstractPanel; diff --git a/libs/remix-ui/abstract-panel/tsconfig.json b/libs/remix-ui/abstract-panel/tsconfig.json deleted file mode 100644 index 8bd701c578..0000000000 --- a/libs/remix-ui/abstract-panel/tsconfig.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "extends": "../../../tsconfig.base.json", - "compilerOptions": { - "jsx": "react-jsx", - "allowJs": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - } - ] -} diff --git a/libs/remix-ui/abstract-panel/tsconfig.lib.json b/libs/remix-ui/abstract-panel/tsconfig.lib.json deleted file mode 100644 index b560bc4dec..0000000000 --- a/libs/remix-ui/abstract-panel/tsconfig.lib.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "types": ["node"] - }, - "files": [ - "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts", - "../../../node_modules/@nrwl/react/typings/image.d.ts" - ], - "exclude": ["**/*.spec.ts", "**/*.spec.tsx"], - "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"] -} 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 376841d2f3..dd3cd5820b 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 @@ -1,117 +1,17 @@ -import React, { useEffect, useState } from 'react' // eslint-disable-line +import React, { useEffect, useState, useRef } from 'react' // eslint-disable-line import './remix-ui-main-panel.module.css'; /* eslint-disable-next-line */ export interface RemixUiMainPanelProps { plugin: any + contents: [any] } export const RemixUiMainPanel = (props: RemixUiMainPanelProps) => { - - const [invertNumber, setInvertNumber] = useState(0) - - const handlePluginCall = (pluginName: string) => { - props.plugin.call('menuicons', 'select', pluginName) - props.plugin.call(pluginName, pluginName, '') - } - - - + const dom = useRef(null) return ( -
-
-
-
-
-
- - -
-
Quicklinks
- Guidefor migrating the old File System -

Migration tools:

-
  • - Basic migration -
    • -
  • Download all Files as a backup zip
    • -
  • Restore filesfrom backup zip
    • -

    Help:

    - -
    -
    -
    -
    -
    -
    -

    Featured Plugins

    -
    - - - - - -
    -
    -
    -
    -

    File

    -

    New File

    -

    -

    Connect to Localhost

    -

    -
    - {/* */} -
    - {/* */} -
    -

    Resources

    -

    Documentation

    -

    Gitter channel

    -

    Featuring website

    -

    Old experience

    -
    -
    -
    -
    - {/* */} -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - {/* */} -
    -
    -
    -
    -
    -
    -
    +
    +
    ) } diff --git a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx index 129a3068b1..bdccedc6fc 100644 --- a/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx +++ b/libs/remix-ui/side-panel/src/lib/remix-ui-side-panel.tsx @@ -5,6 +5,7 @@ import './remix-ui-side-panel.module.css'; /* eslint-disable-next-line */ export interface RemixUiSidePanelProps { plugin: any + contents: any } export function RemixUiSidePanel(props: RemixUiSidePanelProps) { @@ -68,6 +69,9 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) { zIndex: "999", }} > {renderHeader()} +
    + {props.contents} +
    ); } diff --git a/nx.json b/nx.json index decbde03bd..bf26ace9d8 100644 --- a/nx.json +++ b/nx.json @@ -142,9 +142,6 @@ "remix-ui-main-panel": { "tags": [] }, - "remix-ui-abstract-panel": { - "tags": [] - }, "remix-ui-side-panel": { "tags": [] } diff --git a/tsconfig.base.json b/tsconfig.base.json index 8c956056c7..dd7f9d7c37 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -69,7 +69,6 @@ "@remix-ui/helper": ["libs/remix-ui/helper/src/index.ts"], "@remix-ui/vertical-icons-panel": ["libs/remix-ui/vertical-icons-panel/src/index.ts"], "@remix-ui/main-panel": ["libs/remix-ui/main-panel/src/index.ts"], - "@remix-ui/abstract-panel": ["libs/remix-ui/abstract-panel/src/index.ts"], "@remix-ui/side-panel": ["libs/remix-ui/side-panel/src/index.ts"] } }, diff --git a/workspace.json b/workspace.json index c6b94ddad8..76e06a7334 100644 --- a/workspace.json +++ b/workspace.json @@ -1150,24 +1150,6 @@ } } }, - "remix-ui-abstract-panel": { - "root": "libs/remix-ui/abstract-panel", - "sourceRoot": "libs/remix-ui/abstract-panel/src", - "projectType": "library", - "architect": { - "lint": { - "builder": "@nrwl/linter:lint", - "options": { - "linter": "eslint", - "tsConfig": ["libs/remix-ui/abstract-panel/tsconfig.lib.json"], - "exclude": [ - "**/node_modules/**", - "!libs/remix-ui/abstract-panel/**/*" - ] - } - } - } - }, "remix-ui-side-panel": { "root": "libs/remix-ui/side-panel", "sourceRoot": "libs/remix-ui/side-panel/src",