diff --git a/src/extensions/registries/modal-registry.ts b/src/extensions/registries/modal-registry.ts index 1691100d95..ed1a14e115 100644 --- a/src/extensions/registries/modal-registry.ts +++ b/src/extensions/registries/modal-registry.ts @@ -1,10 +1,15 @@ // Extensions-api -> Cluster frame custom modal registration +import { getInjectionToken } from "@ogre-tools/injectable"; import type { IComputedValue } from "mobx"; export interface ClusterModalRegistration { id: string; - component: React.ComponentType; + Component: React.ComponentType; visible?: IComputedValue; -} \ No newline at end of file +} + +export const clusterModalsInjectionToken = getInjectionToken< + IComputedValue +>({ id: "cluster-modals-injection-token" }); \ No newline at end of file diff --git a/src/renderer/cluster-modals/cluster-modals-cluster-frame-child-component.injectable.ts b/src/renderer/cluster-modals/cluster-modals-cluster-frame-child-component.injectable.ts index 225263a945..1c22bce356 100644 --- a/src/renderer/cluster-modals/cluster-modals-cluster-frame-child-component.injectable.ts +++ b/src/renderer/cluster-modals/cluster-modals-cluster-frame-child-component.injectable.ts @@ -1,6 +1,7 @@ import { getInjectable } from "@ogre-tools/injectable"; import { computed } from "mobx"; import { clusterFrameChildComponentInjectionToken } from "../frames/cluster-frame/cluster-frame-child-component-injection-token"; +import { ClusterModals } from "./cluster-modals"; const clusterModalsClusterFrameChildComponentInjectable = getInjectable({ id: "cluster-modals-cluster-frame-child-component", diff --git a/src/renderer/cluster-modals/cluster-modals-registrator.injectable.ts b/src/renderer/cluster-modals/cluster-modals-registrator.injectable.ts index e719ceaae6..8cba221cdd 100644 --- a/src/renderer/cluster-modals/cluster-modals-registrator.injectable.ts +++ b/src/renderer/cluster-modals/cluster-modals-registrator.injectable.ts @@ -1,5 +1,5 @@ import { getInjectable } from "@ogre-tools/injectable"; -import { extensionRegistratorInjectionToken } from "../../extensions/extension-loader/extension-registrator-injection-token"; +import { ExtensionRegistrator, extensionRegistratorInjectionToken } from "../../extensions/extension-loader/extension-registrator-injection-token"; import type { LensRendererExtension } from "../../extensions/lens-renderer-extension"; const clusterModalsRegistratorInjectable = getInjectable({ @@ -9,16 +9,18 @@ const clusterModalsRegistratorInjectable = getInjectable({ return (ext) => { const extension = ext as LensRendererExtension; - return extension.clusterModals.map((registration) => { - return { + return extension.clusterModals.map(registration => { + return getInjectable({ id: registration.id, - Component: registration.component, - visible: registration.visible, - } - }) + + instantiate: () => ({ + Component: registration.Component, + visible: registration.visible, + }), + }); + }); }; }, - injectionToken: extensionRegistratorInjectionToken, }); diff --git a/src/renderer/cluster-modals/cluster-modals.injectable.ts b/src/renderer/cluster-modals/cluster-modals.injectable.ts new file mode 100644 index 0000000000..4f21767e88 --- /dev/null +++ b/src/renderer/cluster-modals/cluster-modals.injectable.ts @@ -0,0 +1,27 @@ +import { pipeline } from "@ogre-tools/fp"; +import { getInjectable } from "@ogre-tools/injectable"; +import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx"; +import { flatMap } from "lodash/fp"; +import type { IComputedValue } from "mobx"; +import { ClusterModalRegistration, clusterModalsInjectionToken } from "../../extensions/registries"; + +const clusterModalsInjectable = getInjectable({ + id: "cluster-modals", + + instantiate: (di) => { + const computedInjectMany = di.inject(computedInjectManyInjectable); + + const modalRegistrations = computedInjectMany(clusterModalsInjectionToken); + const registrations = pipeline( + modalRegistrations.get(), + flatMap(dereference), + ); + + return registrations; + } +}); + +const dereference = (items: IComputedValue) => + items.get(); + +export default clusterModalsInjectable; \ No newline at end of file diff --git a/src/renderer/cluster-modals/cluster-modals.tsx b/src/renderer/cluster-modals/cluster-modals.tsx new file mode 100644 index 0000000000..1fc7915e4a --- /dev/null +++ b/src/renderer/cluster-modals/cluster-modals.tsx @@ -0,0 +1,25 @@ +import { withInjectables } from "@ogre-tools/injectable-react"; +import React from "react"; +import type { ClusterModalRegistration } from "../../extensions/registries"; +import clusterModalsInjectable from "./cluster-modals.injectable"; + +interface Dependencies { + clusterModals: ClusterModalRegistration[]; +} + +export const NonInjectedClusterModals = ({ clusterModals }: Dependencies) => { + return ( +
+ {clusterModals.map((modal) => { + return modal.visible ? : null; + })} +
+ ); +} + +export const ClusterModals = withInjectables(NonInjectedClusterModals, { + getProps: (di, props) => ({ + ...props, + clusterModals: di.inject(clusterModalsInjectable), + }), +}); \ No newline at end of file