diff --git a/vuu-ui/packages/vuu-shell/src/application-provider/ApplicationContext.tsx b/vuu-ui/packages/vuu-shell/src/application-provider/ApplicationContext.tsx index 4667baa84..49e806974 100644 --- a/vuu-ui/packages/vuu-shell/src/application-provider/ApplicationContext.tsx +++ b/vuu-ui/packages/vuu-shell/src/application-provider/ApplicationContext.tsx @@ -1,6 +1,7 @@ -import type { ThemeMode, VuuUser } from "@finos/vuu-utils"; +import type { VuuUser } from "@finos/vuu-utils"; import { createContext } from "react"; import { SettingsSchema } from "../application-settings/SettingsForm"; +import { VuuRowDataItemType } from "packages/vuu-protocol-types"; // export interface CoreSettings { // themeMode: ThemeMode; @@ -12,9 +13,12 @@ const Guest: VuuUser = { }; export interface ApplicationContextProps { - onApplicationSettingChanged: (propertyName: string, value: unknown) => void; - applicationSettings: Record; - applicationSettingsSchema: SettingsSchema; + onApplicationSettingChanged: ( + propertyName: string, + value: VuuRowDataItemType + ) => void; + applicationSettings?: Record; + applicationSettingsSchema?: SettingsSchema; user: VuuUser; } diff --git a/vuu-ui/packages/vuu-shell/src/application-provider/ApplicationProvider.tsx b/vuu-ui/packages/vuu-shell/src/application-provider/ApplicationProvider.tsx index 6b8bebebb..77d99806e 100644 --- a/vuu-ui/packages/vuu-shell/src/application-provider/ApplicationProvider.tsx +++ b/vuu-ui/packages/vuu-shell/src/application-provider/ApplicationProvider.tsx @@ -10,12 +10,23 @@ import { ApplicationContextProps, } from "./ApplicationContext"; import { SaltProvider } from "@salt-ds/core"; +import { VuuRowDataItemType } from "packages/vuu-protocol-types"; export interface ApplicationProviderProps extends Partial { children: ReactNode; } +const getThemeMode = ( + applicationSettings?: Record +) => { + const themeMode = applicationSettings?.themeMode; + if (themeMode === "light" || themeMode === "dark") { + return themeMode; + } + return "light"; +}; + export const ApplicationProvider = ({ children, applicationSettings: settingsProp, @@ -23,12 +34,12 @@ export const ApplicationProvider = ({ user, }: ApplicationProviderProps): ReactElement => { const context = useContext(ApplicationContext); - const [applicationSettings, setSettings] = useState( - settingsProp ?? context.applicationSettings - ); + const [applicationSettings, setSettings] = useState< + Record + >(settingsProp ?? {}); const onApplicationSettingChanged = useCallback( - (propertyName: string, value: unknown) => { + (propertyName: string, value: VuuRowDataItemType) => { setSettings((s) => ({ ...s, [propertyName]: value })); }, [] @@ -47,7 +58,7 @@ export const ApplicationProvider = ({ {children} diff --git a/vuu-ui/packages/vuu-shell/src/application-settings/ApplicationSettingsPanel.tsx b/vuu-ui/packages/vuu-shell/src/application-settings/ApplicationSettingsPanel.tsx index 5122df23b..60c077f77 100644 --- a/vuu-ui/packages/vuu-shell/src/application-settings/ApplicationSettingsPanel.tsx +++ b/vuu-ui/packages/vuu-shell/src/application-settings/ApplicationSettingsPanel.tsx @@ -1,14 +1,13 @@ import { useComponentCssInjection } from "@salt-ds/styles"; import { useWindow } from "@salt-ds/window"; import { HTMLAttributes } from "react"; -import { SettingsForm, SettingsSchema } from "./SettingsForm"; +import { SettingsForm } from "./SettingsForm"; import applicationSettingsPanelCss from "./ApplicationSettingsPanel.css"; import { useApplicationSettings } from "../application-provider"; // Props for Panel -export interface ApplicatonSettingsPanelProps - extends HTMLAttributes {} +export type ApplicatonSettingsPanelProps = HTMLAttributes; const classBase = "vuuApplicationSettingsPanel"; @@ -19,7 +18,7 @@ export const ApplicationSettingsPanel = ({ const { onApplicationSettingChanged, - applicationSettings, + applicationSettings = {}, applicationSettingsSchema, } = useApplicationSettings(); @@ -29,13 +28,20 @@ export const ApplicationSettingsPanel = ({ window: targetWindow, }); - return ( -
- -
- ); + // Without a schema, we can't render a form + // We could render a list of input boxes but lets require a schema for now. + if (applicationSettingsSchema) { + return ( +
+ +
+ ); + } else { + console.warn("no settingsSchema provided to ApplicationSettingsPanel"); + return null; + } };