joseph izang
4 years ago
parent
9f516a8467
commit
4c05461e58
@ -1,21 +1,20 @@ |
||||
import React from 'react' |
||||
import { TileLabel } from '../../customTypes' |
||||
import React, { useContext } from 'react' |
||||
import { PluginManagerContext } from '../contexts/pluginmanagercontext' |
||||
|
||||
interface ActiveTileProps { |
||||
inactivesCount?: number |
||||
activesCount?: number |
||||
tileLabel?: TileLabel |
||||
interface ModuleHeadingProps { |
||||
headingLabel: string |
||||
} |
||||
|
||||
function ActiveTile ({ inactivesCount, activesCount, tileLabel }: ActiveTileProps) { |
||||
function ModuleHeading ({ headingLabel }: ModuleHeadingProps) { |
||||
const { inactivesCount, activesCount } = useContext(PluginManagerContext) |
||||
return ( |
||||
<nav className="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center"> |
||||
<span className="navbar-brand plugins-list-title h6 mb-0 mr-2">{tileLabel.label}</span> |
||||
<span className="navbar-brand plugins-list-title h6 mb-0 mr-2">{headingLabel}</span> |
||||
<span className="badge badge-primary" style={{ cursor: 'default' }} data-id="pluginManagerComponentInactiveTilesCount"> |
||||
{tileLabel.label === 'Active Module' ? activesCount : tileLabel.label === 'Inactive Modules' ? inactivesCount : '-' } |
||||
{headingLabel === 'Active Modules' ? activesCount : inactivesCount} |
||||
</span> |
||||
</nav> |
||||
) |
||||
} |
||||
|
||||
export default ActiveTile |
||||
export default ModuleHeading |
||||
|
||||
@ -0,0 +1,14 @@ |
||||
import React, { createContext } from 'react' |
||||
import { PluginManagerContextProviderProps } from '../../types' |
||||
|
||||
export const PluginManagerContext = createContext<Partial<PluginManagerContextProviderProps>>({}) |
||||
|
||||
function PluginManagerContextProvider ({ children, props }) { |
||||
return ( |
||||
<PluginManagerContext.Provider value={props}> |
||||
{children} |
||||
</PluginManagerContext.Provider> |
||||
) |
||||
} |
||||
|
||||
export default PluginManagerContextProvider |
||||
@ -1,91 +1,20 @@ |
||||
import React, { createContext, useEffect, useState } from 'react' |
||||
import { Profile, TileLabel } from '../customTypes' |
||||
import { RemixAppManager, RemixEngine, _Paq } from '../types' |
||||
import React from 'react' |
||||
import { RemixUiPluginManagerProps } from '../types' |
||||
import RootView from './components/rootView' |
||||
import PluginManagerContextProvider from './contexts/pluginmanagercontext' |
||||
import './remix-ui-plugin-manager.css' |
||||
|
||||
/* eslint-disable-next-line */ |
||||
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) => any |
||||
openLocalPlugin: () => Promise<void> |
||||
filterPlugins: () => void |
||||
profile: Profile |
||||
tileLabel: TileLabel |
||||
} |
||||
|
||||
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<void> |
||||
filterPlugins: () => void |
||||
profile: Profile |
||||
tileLabel: TileLabel |
||||
} |
||||
|
||||
export const PluginManagerContext = createContext<Partial<PluginManagerContextProviderProps>>({}) |
||||
|
||||
function PluginManagerContextProvider ({ children, props }) { |
||||
const [isFiltered] = useState((profile) => |
||||
(profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(props.filter)) |
||||
const [isNotRequired, setIsNotRequired] = useState<any>() |
||||
const [isNotDependent, setIsNotDependent] = useState<any>() |
||||
const [isNotHome, setIsNotHome] = useState<any>() |
||||
const [sortByName, setSortByName] = useState<any>() |
||||
const { actives, inactives } = props.appManager.getAll() |
||||
.filter(isFiltered) |
||||
.filter(isNotRequired) |
||||
.filter(isNotDependent) |
||||
.filter(isNotHome) |
||||
.sort(sortByName) |
||||
.reduce(({ actives, inactives }, profile) => { |
||||
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 ( |
||||
<PluginManagerContext.Provider value={...props}> |
||||
{children} |
||||
</PluginManagerContext.Provider> |
||||
) |
||||
} |
||||
|
||||
export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => { |
||||
console.log('current state of appmanager', props.appManager) |
||||
return ( |
||||
<PluginManagerContextProvider props> |
||||
<RootView |
||||
localPluginButtonText="Connect to a Local Plugin" |
||||
/> |
||||
// <PluginManagerContextProvider props={props}>
|
||||
// <RootView
|
||||
// localPluginButtonText="Connect to a Local Plugin"
|
||||
// />
|
||||
// </PluginManagerContextProvider>
|
||||
<PluginManagerContextProvider props={props}> |
||||
<h3 className="h3">Remix UI Plugin Manager React</h3> |
||||
<RootView localPluginButtonText="Local Plugin"/> |
||||
</PluginManagerContextProvider> |
||||
) |
||||
} |
||||
|
||||
Loading…
Reference in new issue