add proposed changes to remixappManager class to expose encapsulated functionality

pull/1344/head
joseph izang 3 years ago
parent 576acde1e0
commit e04206b826
  1. 46
      apps/remix-ide/src/app/components/plugin-manager-component.js
  2. 8
      apps/remix-ide/src/remixAppManager.js
  3. 18
      libs/remix-ui/plugin-manager/src/lib/components/button.tsx
  4. 9
      libs/remix-ui/plugin-manager/src/lib/components/pluginCard.tsx
  5. 11
      libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
  6. 14
      libs/remix-ui/plugin-manager/src/types.d.ts

@ -98,19 +98,36 @@ class PluginManagerComponent extends ViewPlugin {
this.htmlElement = document.createElement('div')
this.htmlElement.setAttribute('id', 'pluginManager')
this.props = {}
// this.views = {
// root: null,
// items: {}
// }
this.views = {
root: null,
items: {}
}
this.localPlugin = new LocalPlugin()
this.filter = ''
this.activePlugins = []
this.inactivePlugins = []
this.activePlugins = this.appManager.actives
this.activePluginNames = this.appManager.actives
// this.appManager.event.on('activate', () => { this.reRender() })
// this.appManager.event.on('deactivate', () => { this.reRender() })
// this.engine.event.on('onRegistration', () => { this.reRender() })
// const { actives, inactives } = this.getAllPlugins()
console.log('views property contents', this.views)
}
isActive (name) {
this.appManager.actives.includes(name)
}
activateP (name) {
// console.log(this.appManager)
this.appManager.turnPluginOn(name)
_paq.push(['trackEvent', 'manager', 'activate', name])
}
deactivateP (name) {
// console.log(this.appManager)
this.call('manager', 'deactivatePlugin', name)
_paq.push(['trackEvent', 'manager', 'deactivate', name])
}
onActivation () {
@ -124,27 +141,16 @@ class PluginManagerComponent extends ViewPlugin {
appManager={this.appManager}
engine={this.engine}
localPlugin={this.localPlugin}
activePlugins={this.activePlugins}
activePluginNames={this.activePluginsNames}
actives={this.activePlugins}
inactives={this.inactivePlugins}
activatePlugin={this.activateP}
deActivatePlugin={this.deactivateP}
_paq={_paq}
/>,
document.getElementById('pluginManager'))
}
isActive (name) {
return this.appManager.actives.includes(name)
}
// activateP (name) {
// this.appManager.activatePlugin(name)
// _paq.push(['trackEvent', 'manager', 'activate', name])
// }
// deactivateP (name) {
// this.call('manager', 'deactivatePlugin', name)
// _paq.push(['trackEvent', 'manager', 'deactivate', name])
// }
/***************
* SUB-COMPONENT
*/

@ -75,6 +75,14 @@ export class RemixAppManager extends PluginManager {
return await this.permissionHandler.askPermission(this.profiles[from], this.profiles[to], method, message)
}
async turnPluginOn (name) {
await this.activatePlugin(name)
}
async turnPluginOff (name) {
await this.deactivatePlugin(name)
}
onPluginActivated (plugin) {
this.pluginLoader.set(plugin, this.actives)
this.event.emit('activate', plugin)

@ -3,17 +3,25 @@ import { PluginManagerContext } from '../contexts/pluginmanagercontext'
interface ButtonProps {
buttonText: 'Activate' | 'Deactivate'
pluginName: string
}
function Button ({ buttonText }: ButtonProps) {
const { profile, deActivatePlugin, activatePlugin } = useContext(PluginManagerContext)
const dataId = `pluginManagerComponentDeactivateButton${profile.name}`
function Button ({ buttonText, pluginName }: ButtonProps) {
const { appManager, _paq } = useContext(PluginManagerContext)
const dataId = `pluginManagerComponentDeactivateButton${pluginName}`
const [needToDeactivate] = useState('btn btn-secondary btn-sm')
const [needToActivate] = useState('btn btn-success btn-sm')
return (
<button
onClick={buttonText === 'Activate' ? () => activatePlugin(profile.name) : () => deActivatePlugin(profile.name)}
onClick={buttonText === 'Activate' ? () => {
appManager.turnPluginOn(pluginName)
_paq.push(['trackEvent', 'manager', 'activate', pluginName])
buttonText = 'Deactivate'
} : () => {
appManager.turnPluginOff(pluginName)
_paq.push(['trackEvent', 'manager', 'deactivate', pluginName])
buttonText = 'Activate'
}}
className={buttonText === 'Activate' ? needToActivate : needToDeactivate}
data-id={dataId}
>

@ -9,7 +9,7 @@ interface PluginCardProps {
// eslint-disable-next-line no-empty-pattern
function PluginCard ({ profile }: PluginCardProps) {
const { activePlugins } = useContext(PluginManagerContext)
const { activePluginNames } = useContext(PluginManagerContext)
const [displayName] = useState<string>((profile.displayName) ? profile.displayName : profile.name)
const [docLink] = useState<JSX.Element>((profile.documentation) ? (
<a href={profile.documentation} className="px-1" title="link to documentation" target="_blank" rel="noreferrer">
@ -31,15 +31,16 @@ function PluginCard ({ profile }: PluginCardProps) {
{docLink}
{versionWarning}
</div>
{ activePlugins.includes(profile.name) ? (
{ activePluginNames.includes(profile.name) ? (
<Button
buttonText="Deactivate"
/>) : <Button buttonText="Activate" />
pluginName={profile.name}
/>) : <Button buttonText="Activate" pluginName={profile.name}/>
}
</h6>
</div>
<div className="remixui_description d-flex text-body plugin-text mb-2">
<img src={profile.icon} className="mr-1 mt-1 remixui_pluginIcon" alt="profile icon"/>
{ profile.icon ? <img src={profile.icon} className="mr-1 mt-1 remixui_pluginIcon" alt="profile icon"/> : null }
<span className="remixui_descriptiontext">{profile.description}</span>
</div>
</article>

@ -35,10 +35,7 @@ function ShowInactives ({ inactives, headinglabel }: ShowInactivesProps) {
}
function ShowActives ({ inactives, headinglabel }: ShowInactivesProps) {
const [plugins] = useState<any[]>([])
if (inactives.length === 0) {
plugins.map(plugin => inactives.push(plugin))
}
console.log('actived plugins are :', inactives)
return (
<Fragment>
<ModuleHeading headingLabel={headinglabel} />
@ -50,7 +47,7 @@ function ShowActives ({ inactives, headinglabel }: ShowInactivesProps) {
}
function RootView () {
const { appManager, actives, engine, inactives, localPlugin, filter } = useContext(PluginManagerContext)
const { appManager, actives, engine, inactives, localPlugin } = useContext(PluginManagerContext)
const [visible, setVisible] = useState<boolean>(true)
const [plugin, setPlugin] = useState(initialState)
@ -62,7 +59,9 @@ function RootView () {
}
const closeModal = () => setVisible(true)
useEffect(() => {
// engine.event.on('onRegistration', () => )
})
return (
<Fragment>
<form id="local-plugin-form">

@ -66,10 +66,6 @@ interface SetPluginOptionType {
queueTimeout: number
}
export interface _Paq {
_paq: Window & typeof globalThis | []
}
export class RemixEngine extends Engine {
event: EventEmitter;
setPluginOption ({ name, kind }) : SetPluginOptionType
@ -99,15 +95,17 @@ export class RemixAppManager extends PluginManager {
isDependent(name: any): any;
isRequired(name: any): any;
registeredPlugins(): Promise<any>;
turnPluginOn(name: string | string[]);
turnPluginOff(name: string);
}
export interface PluginManagerContextProviderProps {
appManager: RemixAppManager
engine: RemixEngine
localPlugin: LocalPlugin
_paq: _Paq
_paq: any
filter: string
activePlugins: string[]
activePluginNames: string[]
actives: Partial<PluginManagerProfile>[]
inactives: Partial<PluginManagerProfile>[]
activatePlugin: (name: string) => void
@ -123,9 +121,9 @@ export interface RemixUiPluginManagerProps {
appManager: RemixAppManager
engine: RemixEngine
localPlugin: LocalPlugin
_paq: _Paq
_paq: any // Window & typeof globalThis | []
filter: string
activePlugins: string[]
activePluginNames: string[]
actives: Partial<PluginManagerProfile>[]
inactives: Partial<PluginManagerProfile>[]
activatePlugin: (name: string) => void

Loading…
Cancel
Save