trying to import react component

pull/1344/head
joseph izang 3 years ago
parent 38320e2bc4
commit a0dc968d33
  1. 79
      apps/remix-ide/src/app/components/plugin-manager-component.js
  2. 9
      libs/remix-ui/plugin-manager/src/customTypes.ts
  3. 9
      libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx
  4. 2
      libs/remix-ui/plugin-manager/tsconfig.json
  5. 50
      tsconfig.base.json
  6. 4
      tsconfig.json

@ -1,5 +1,8 @@
import { IframePlugin, ViewPlugin, WebsocketPlugin } from '@remixproject/engine-web'
import { PluginManagerSettings } from './plugin-manager-settings'
import React from 'react'
import { ReactDOM } from 'react-dom'
import { RemixUIPluginManager } from '@remix-ui/plugin-manager'
import * as packageJson from '../../../../../package.json'
const yo = require('yo-yo')
const csjs = require('csjs-inject')
@ -96,6 +99,12 @@ class PluginManagerComponent extends ViewPlugin {
this.appManager.event.on('deactivate', () => { this.reRender() })
this.engine = engine
this.engine.event.on('onRegistration', () => { this.reRender() })
this.htmlElement = document.createElement('div')
this.htmlElement.setAttribute('id', 'pluginManager')
}
onActivation () {
this.renderComponent()
}
isActive (name) {
@ -188,8 +197,14 @@ class PluginManagerComponent extends ViewPlugin {
}
}
// return this.htmlElement()
// render () {
// return this.htmlElement()
// }
render () {
// Filtering helpers
// Filtering helpers
const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(this.filter)
const isNotRequired = (profile) => !this.appManager.isRequired(profile.name)
const isNotDependent = (profile) => !this.appManager.isDependent(profile.name)
@ -215,46 +230,52 @@ class PluginManagerComponent extends ViewPlugin {
const activeTile = actives.length !== 0
? yo`
<nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
<span class="navbar-brand plugins-list-title">Active Modules</span>
<span class="badge badge-primary" data-id="pluginManagerComponentActiveTilesCount">${actives.length}</span>
</nav>`
<nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
<span class="navbar-brand plugins-list-title">Active Modules</span>
<span class="badge badge-primary" data-id="pluginManagerComponentActiveTilesCount">${actives.length}</span>
</nav>
`
: ''
const inactiveTile = inactives.length !== 0
? yo`
<nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
<span class="navbar-brand plugins-list-title h6 mb-0 mr-2">Inactive Modules</span>
<span class="badge badge-primary" style = "cursor: default;" data-id="pluginManagerComponentInactiveTilesCount">${inactives.length}</span>
</nav>`
<nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
<span class="navbar-brand plugins-list-title h6 mb-0 mr-2">Inactive Modules</span>
<span class="badge badge-primary" style = "cursor: default;" data-id="pluginManagerComponentInactiveTilesCount">${inactives.length}</span>
</nav>
`
: ''
const settings = new PluginManagerSettings().render()
const rootView = yo`
<div id='pluginManager' data-id="pluginManagerComponentPluginManager">
<header class="form-group ${css.pluginSearch} plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
<input onkeyup="${e => this.filterPlugins(e)}" class="${css.pluginSearchInput} form-control" placeholder="Search" data-id="pluginManagerComponentSearchInput">
<button onclick="${_ => this.openLocalPlugin()}" class="${css.pluginSearchButton} btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">
Connect to a Local Plugin
</button>
</header>
<section data-id="pluginManagerComponentPluginManagerSection">
${activeTile}
<div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
${actives.map(profile => this.renderItem(profile))}
</div>
${inactiveTile}
<div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentInactiveTile">
${inactives.map(profile => this.renderItem(profile))}
</div>
</section>
${settings}
</div>
`
<div id='pluginManager' data-id="pluginManagerComponentPluginManager">
<header class="form-group ${css.pluginSearch} plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
<input onkeyup="${e => this.filterPlugins(e)}" class="${css.pluginSearchInput} form-control" placeholder="Search" data-id="pluginManagerComponentSearchInput">
<button onclick="${_ => this.openLocalPlugin()}" class="${css.pluginSearchButton} btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">
Connect to a Local Plugin
</button>
</header>
<section data-id="pluginManagerComponentPluginManagerSection">
${activeTile}
<div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
${actives.map(profile => this.renderItem(profile))}
</div>
${inactiveTile}
<div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentInactiveTile">
${inactives.map(profile => this.renderItem(profile))}
</div>
</section>
${settings}
</div>
`
if (!this.views.root) this.views.root = rootView
return rootView
}
renderComponent () {
ReactDOM.render(<RemixUIPluginManager />, this.htmElement)
}
reRender () {
if (this.views.root) {
yo.update(this.views.root, this.render())

@ -18,3 +18,12 @@ export type Profile = {
documentation: 'https://remix-ide.readthedocs.io/en/latest/plugin_manager.html',
version: string
}
export type LocalPlugin = {
create: () => Profile
updateName: (target: string) => void
updateDisplayName: (displayName: string) => void
updateProfile: (key: string, e: Event) => void
updateMethods: (target: any) => void
form: () => HTMLElement
}

@ -1,9 +1,16 @@
import React from 'react'
import { Profile } from '../customTypes'
import './remix-ui-plugin-manager.css'
/* eslint-disable-next-line */
export interface RemixUiPluginManagerProps {
activatePlugin: (name: string) => void
deActivatePlugin: (name: string) => void
isActive: () => void
openLocalPlugin: () => Promise<void>
filterPlugins: () => void
reRender: () => void
profile: Profile
}
export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {

@ -1,5 +1,5 @@
{
"extends": "../../../tsconfig.base.json",
"extends": "../../../tsconfig.json",
"compilerOptions": {
"jsx": "react",
"allowJs": true,

@ -1,50 +0,0 @@
{
"compileOnSave": false,
"compilerOptions": {
"rootDir": ".",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"module": "commonjs",
"typeRoots": ["node_modules/@types"],
"lib": ["es2017", "es2019", "dom"],
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"baseUrl": ".",
"paths": {
"@remix-project/remix-analyzer": ["dist/libs/remix-analyzer/index.js"],
"@remix-project/remix-astwalker": ["dist/libs/remix-astwalker/index.js"],
"@remix-project/remix-debug": ["dist/libs/remix-debug/src/index.js"],
"@remix-project/remix-lib": ["dist/libs/remix-lib/src/index.js"],
"@remix-project/remix-simulator": [
"dist/libs/remix-simulator/src/index.js"
],
"@remix-project/remix-solidity": ["dist/libs/remix-solidity/index.js"],
"@remix-project/remix-tests": ["dist/libs/remix-tests/src/index.js"],
"@remix-project/remix-url-resolver": [
"dist/libs/remix-url-resolver/index.js"
],
"@remixproject/debugger-plugin": ["apps/debugger/src/index.ts"],
"@remix-project/remixd": ["dist/libs/remixd/index.js"],
"@remix-ui/tree-view": ["libs/remix-ui/tree-view/src/index.ts"],
"@remix-ui/debugger-ui": ["libs/remix-ui/debugger-ui/src/index.ts"],
"@remix-ui/utils": ["libs/remix-ui/utils/src/index.ts"],
"@remix-ui/clipboard": ["libs/remix-ui/clipboard/src/index.ts"],
"@remix-project/remix-solidity-ts": ["libs/remix-solidity/src/index.ts"],
"@remix-ui/modal-dialog": ["libs/remix-ui/modal-dialog/src/index.ts"],
"@remix-ui/toaster": ["libs/remix-ui/toaster/src/index.ts"],
"@remix-ui/file-explorer": ["libs/remix-ui/file-explorer/src/index.ts"],
"@remix-ui/workspace": ["libs/remix-ui/workspace/src/index.ts"],
"@remix-ui/static-analyser": [
"libs/remix-ui/static-analyser/src/index.ts"
],
"@remix-ui/checkbox": ["libs/remix-ui/checkbox/src/index.ts"],
"@remix-ui/project-manager": ["libs/remix-ui/plugin-manager/src/index.ts"]
}
},
"exclude": ["node_modules", "tmp"]
}

@ -39,10 +39,10 @@
"@remix-ui/toaster": ["libs/remix-ui/toaster/src/index.ts"],
"@remix-ui/file-explorer": ["libs/remix-ui/file-explorer/src/index.ts"],
"@remix-ui/workspace": ["libs/remix-ui/workspace/src/index.ts"],
"@remix-ui/settings": ["libs/remix-ui/settings/src/index.ts"],
"@remix-ui/static-analyser": ["libs/remix-ui/static-analyser/src/index.ts"],
"@remix-ui/checkbox": ["libs/remix-ui/checkbox/src/index.ts"],
"@remix-ui/settings": ["libs/remix-ui/settings/src/index.ts"]
"@remix-ui/settings": ["libs/remix-ui/settings/src/index.ts"],
"@remix-ui/plugin-manager": ["libs/remix-ui/plugin-manager/src/index.ts"]
}
},
"exclude": ["node_modules", "tmp"]

Loading…
Cancel
Save