diff --git a/apps/remix-ide/src/app/components/plugin-manager-component.js b/apps/remix-ide/src/app/components/plugin-manager-component.js index cea87ed9ed..799e841088 100644 --- a/apps/remix-ide/src/app/components/plugin-manager-component.js +++ b/apps/remix-ide/src/app/components/plugin-manager-component.js @@ -116,9 +116,9 @@ class PluginManagerComponent extends ViewPlugin { ReactDOM.render(, document.getElementById('pluginManager')) } - // isActive (name) { - // return this.appManager.actives.includes(name) - // } + isActive (name) { + return this.appManager.actives.includes(name) + } activateP (name) { this.appManager.activatePlugin(name) @@ -219,17 +219,17 @@ class PluginManagerComponent extends ViewPlugin { } // // Filter all active and inactive modules that are not required - // const { actives, inactives } = this.appManager.getAll() - // .filter(isFiltered) - // .filter(isNotRequired) - // .filter(isNotDependent) - // .filter(isNotHome) - // .sort(sortByName) - // .reduce(({ actives, inactives }, profile) => { - // return this.isActive(profile.name) - // ? { actives: [...actives, profile], inactives } - // : { inactives: [...inactives, profile], actives } - // }, { actives: [], inactives: [] }) + const { actives, inactives } = this.appManager.getAll() + .filter(isFiltered) + .filter(isNotRequired) + .filter(isNotDependent) + .filter(isNotHome) + .sort(sortByName) + .reduce(({ actives, inactives }, profile) => { + return this.isActive(profile.name) + ? { actives: [...actives, profile], inactives } + : { inactives: [...inactives, profile], actives } + }, { actives: [], inactives: [] }) // const activeTile = actives.length !== 0 // ? yo` diff --git a/libs/remix-ui/plugin-manager/src/lib/components/activeTile.tsx b/libs/remix-ui/plugin-manager/src/lib/components/activeTile.tsx index fa1ea10316..7bb42ca5ad 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/activeTile.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/activeTile.tsx @@ -12,7 +12,7 @@ function ActiveTile ({ inactivesCount, activesCount, tileLabel }: ActiveTileProp ) diff --git a/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx b/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx index e4d2aeffbb..28c822d1df 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx @@ -1,25 +1,14 @@ -import React from 'react' -import { Profile, TileLabel } from '../../customTypes' +import React, { useContext } from 'react' +import { PluginManagerContext } from '../remix-ui-plugin-manager' import ActiveTile from './activeTile' import ListGroupItem from './listGroupItem' interface RootViewProps { localPluginButtonText: string - activeProfiles: Profile[] - inactiveProfiles?: Profile[] - filterPlugins: () => void - openLocalPlugins: () => void - tileLabel: TileLabel } -function RootView ({ - localPluginButtonText, - activeProfiles, - inactiveProfiles, - filterPlugins, - openLocalPlugins, - tileLabel -}: RootViewProps) { +function RootView ({ localPluginButtonText }: RootViewProps) { + const { actives, inactives, tileLabel } = useContext(PluginManagerContext) return (
@@ -28,13 +17,13 @@ function RootView ({
diff --git a/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx b/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx index ab845dc6dc..9c7fd7be6a 100644 --- a/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx @@ -1,69 +1,51 @@ import React, { createContext, useEffect, useState } from 'react' -import { Profile } from '../customTypes' +import { Profile, TileLabel } from '../customTypes' import { RemixAppManager, RemixEngine, _Paq } from '../types' import RootView from './components/rootView' import './remix-ui-plugin-manager.css' /* eslint-disable-next-line */ -export interface RemixUiPluginManagerProps { +export interface PluginManagerContextProviderProps { appManager: RemixAppManager engine: RemixEngine _paq: _Paq filter: string + actives: Profile[] + inactives: Profile[] activatePlugin: (name: string) => void deActivatePlugin: (name: string) => void - isActive: (name: string) => void + isActive: (name: string) => any openLocalPlugin: () => Promise filterPlugins: () => void profile: Profile + tileLabel: TileLabel } -export const PluginManagerContext = createContext({}) - -function PluginManagerContextProvider ({ children }) { - const [globalState] = useState({} as RemixUiPluginManagerProps) - return ( - - {children} - - ) +export interface RemixUiPluginManagerProps { + appManager: RemixAppManager + engine: RemixEngine + _paq: _Paq + filter: string + actives: Profile[] + inactives: Profile[] + activatePlugin: (name: string) => void + deActivatePlugin: (name: string) => void + isActive: (name: string) => any + openLocalPlugin: () => Promise + filterPlugins: () => void + profile: Profile + tileLabel: TileLabel } -// // 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) -// const isNotHome = (profile) => profile.name !== 'home' -// const sortByName = (profileA, profileB) => { -// const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase() -// const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase() -// return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0 -// } - -// // Filter all active and inactive modules that are not required -// const { actives, inactives } = this.appManager.getAll() -// .filter(isFiltered) -// .filter(isNotRequired) -// .filter(isNotDependent) -// .filter(isNotHome) -// .sort(sortByName) -// .reduce(({ actives, inactives }, profile) => { -// return this.isActive(profile.name) -// ? { actives: [...actives, profile], inactives } -// : { inactives: [...inactives, profile], actives } -// }, { actives: [], inactives: [] }) +export const PluginManagerContext = createContext>({}) -export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => { +function PluginManagerContextProvider ({ children, props }) { const [isFiltered] = useState((profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(props.filter)) - const [isNotRequired, setIsNotRequired] = useState(false) - const [isNotDependent, setIsNotDependent] = useState((profile) => !props.appManager.isDependent(profile.name)) - const [isNotHome, setIsNotHome] = useState((profile) => profile.name !== 'home') - const [sortByName, setSortByName] = useState<1 | -1 | 0>((profileA, profileB) => { - const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase() - const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase() - return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0 - }) + const [isNotRequired, setIsNotRequired] = useState() + const [isNotDependent, setIsNotDependent] = useState() + const [isNotHome, setIsNotHome] = useState() + const [sortByName, setSortByName] = useState() const { actives, inactives } = props.appManager.getAll() .filter(isFiltered) .filter(isNotRequired) @@ -71,21 +53,38 @@ export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => { .filter(isNotHome) .sort(sortByName) .reduce(({ actives, inactives }, profile) => { - return this.isActive(profile.name) + return props.isActive(profile.name) ? { actives: [...actives, profile], inactives } : { inactives: [...inactives, profile], actives } }, { actives: [], inactives: [] }) + props.actives = actives + props.inactives = inactives useEffect(() => { const notRequired = (profile: Profile) => !props.appManager.isRequired(profile.name) + const notDependent = (profile) => !props.appManager.isDependent(profile.name) + const notHome = (profile) => profile.name !== 'home' + const sortedByName = (profileA: Profile, profileB: Profile) => { + const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase() + const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase() + return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0 + } setIsNotRequired(notRequired(props.profile)) - }) + setIsNotDependent(notDependent(notDependent)) + setIsNotHome(notHome) + setSortByName(sortedByName) + }, [props.appManager, props.profile]) + return ( + + {children} + + ) +} +export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => { return ( - + )