joseph izang
4 years ago
parent
9f516a8467
commit
4c05461e58
@ -1,21 +1,20 @@ |
|||||||
import React from 'react' |
import React, { useContext } from 'react' |
||||||
import { TileLabel } from '../../customTypes' |
import { PluginManagerContext } from '../contexts/pluginmanagercontext' |
||||||
|
|
||||||
interface ActiveTileProps { |
interface ModuleHeadingProps { |
||||||
inactivesCount?: number |
headingLabel: string |
||||||
activesCount?: number |
|
||||||
tileLabel?: TileLabel |
|
||||||
} |
} |
||||||
|
|
||||||
function ActiveTile ({ inactivesCount, activesCount, tileLabel }: ActiveTileProps) { |
function ModuleHeading ({ headingLabel }: ModuleHeadingProps) { |
||||||
|
const { inactivesCount, activesCount } = useContext(PluginManagerContext) |
||||||
return ( |
return ( |
||||||
<nav className="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center"> |
<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"> |
<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> |
</span> |
||||||
</nav> |
</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 React from 'react' |
||||||
import { Profile, TileLabel } from '../customTypes' |
import { RemixUiPluginManagerProps } from '../types' |
||||||
import { RemixAppManager, RemixEngine, _Paq } from '../types' |
|
||||||
import RootView from './components/rootView' |
import RootView from './components/rootView' |
||||||
|
import PluginManagerContextProvider from './contexts/pluginmanagercontext' |
||||||
import './remix-ui-plugin-manager.css' |
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) => { |
export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => { |
||||||
|
console.log('current state of appmanager', props.appManager) |
||||||
return ( |
return ( |
||||||
<PluginManagerContextProvider props> |
// <PluginManagerContextProvider props={props}>
|
||||||
<RootView |
// <RootView
|
||||||
localPluginButtonText="Connect to a Local Plugin" |
// localPluginButtonText="Connect to a Local Plugin"
|
||||||
/> |
// />
|
||||||
|
// </PluginManagerContextProvider>
|
||||||
|
<PluginManagerContextProvider props={props}> |
||||||
|
<h3 className="h3">Remix UI Plugin Manager React</h3> |
||||||
|
<RootView localPluginButtonText="Local Plugin"/> |
||||||
</PluginManagerContextProvider> |
</PluginManagerContextProvider> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue