Add Kernel context and Kernel application data.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
ci/woodpecker/tag/woodpecker Pipeline was successful

This commit is contained in:
Madeorsk 2024-09-29 00:10:21 +02:00
parent e7266d0ab6
commit 60dfd776c6
Signed by: Madeorsk
GPG key ID: 677E51CA765BB79F
6 changed files with 154 additions and 13 deletions

View file

@ -39,6 +39,7 @@ import {Await, useAsync} from "../src/Async";
import {NotifyErrorsBoundary} from "../src/Components/Errors/NotifyErrorsBoundary"; import {NotifyErrorsBoundary} from "../src/Components/Errors/NotifyErrorsBoundary";
import {DemoFailingComponent, DemoResetComponent} from "./DemoFailingComponent"; import {DemoFailingComponent, DemoResetComponent} from "./DemoFailingComponent";
import {Tip} from "../src/Components/Tips/Tip"; import {Tip} from "../src/Components/Tips/Tip";
import {useKernelApplicationData} from "../src/KernelContext";
export function DemoApp() export function DemoApp()
{ {
@ -73,6 +74,8 @@ export function DemoApp()
const [failingComponentsCount, setFailingComponentsCount] = useState(0); const [failingComponentsCount, setFailingComponentsCount] = useState(0);
const [kernelApplicationData, setKernelApplicationData] = useKernelApplicationData("customData", "");
return ( return (
<Application> <Application>
<MainMenu> <MainMenu>
@ -609,6 +612,23 @@ export function DemoApp()
</NotifyErrorsBoundary> </NotifyErrorsBoundary>
</Card> </Card>
<h2>
Global states
</h2>
<Card>
<label>
Kernel application custom data
<input type={"text"} name={"kernel-application-data"}
value={kernelApplicationData}
onChange={(event) => setKernelApplicationData(event.currentTarget.value)} />
</label>
<Buttons placement={"center"}>
<button type={"button"} onClick={easySubapp}>Open demo subapp to see if it works</button>
</Buttons>
</Card>
</Application> </Application>
); );
} }

View file

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import {Subapp, useSubapp} from "../src/Components/Subapps/Subapps"; import {Subapp, useSubapp} from "../src/Components/Subapps/Subapps";
import {Card} from "../src/Components/Card"; import {Card} from "../src/Components/Card";
import {useKernelApplicationData} from "../src/KernelContext";
/** /**
* A demo Subapp component. * A demo Subapp component.
@ -10,6 +11,9 @@ export function DemoSubapp()
// Get subapp close function. // Get subapp close function.
const {uuid, close} = useSubapp(); const {uuid, close} = useSubapp();
// Get kernel application custom data.
const [kernelApplicationData] = useKernelApplicationData("customData", "");
return ( return (
<Subapp title={"My complex subapp"}> <Subapp title={"My complex subapp"}>
<Card> <Card>
@ -17,6 +21,8 @@ export function DemoSubapp()
<p>UUID : <code>{uuid}</code></p> <p>UUID : <code>{uuid}</code></p>
{kernelApplicationData && <p><strong>Kernel application data</strong>: <code>{kernelApplicationData}</code></p>}
<button onClick={close}>Close the subapp</button> <button onClick={close}>Close the subapp</button>
</Card> </Card>
</Subapp> </Subapp>

View file

@ -49,4 +49,5 @@ export * from "./src/Components/Tips/Tip";
export * from "./src/Async"; export * from "./src/Async";
export * from "./src/GlobalState"; export * from "./src/GlobalState";
export * from "./src/KernelContext";
export * from "./src/Utils"; export * from "./src/Utils";

View file

@ -1,5 +1,5 @@
{ {
"version": "1.7.1", "version": "1.8.0",
"name": "@kernelui/core", "name": "@kernelui/core",
"description": "Kernel UI Core.", "description": "Kernel UI Core.",
"scripts": { "scripts": {

View file

@ -3,6 +3,7 @@ import React from "react";
import {createBrowserRouter, RouterProvider} from "react-router-dom"; import {createBrowserRouter, RouterProvider} from "react-router-dom";
import {CurtainsProvider} from "../Components/Curtains/Curtains"; import {CurtainsProvider} from "../Components/Curtains/Curtains";
import {NotificationsProvider} from "../Components/Notifications/Notifications"; import {NotificationsProvider} from "../Components/Notifications/Notifications";
import {KernelContextProvider} from "../KernelContext";
/** /**
* Main Kernel UI app component which initializes everything. * Main Kernel UI app component which initializes everything.
@ -14,17 +15,19 @@ export function Kernel({header, footer, router}: {
}) })
{ {
return ( return (
<IconContext.Provider value={{ <KernelContextProvider>
size: "1em", <IconContext.Provider value={{
weight: "bold", size: "1em",
}}> weight: "bold",
<NotificationsProvider> }}>
<CurtainsProvider> <NotificationsProvider>
{header} <CurtainsProvider>
<RouterProvider router={router} /> {header}
{footer} <RouterProvider router={router} />
</CurtainsProvider> {footer}
</NotificationsProvider> </CurtainsProvider>
</IconContext.Provider> </NotificationsProvider>
</IconContext.Provider>
</KernelContextProvider>
); );
} }

111
src/KernelContext.tsx Normal file
View file

@ -0,0 +1,111 @@
import React, {useCallback, useContext, useMemo, useState} from "react";
/**
* Application data setter function type.
*/
export type ApplicationDataSetter<IdentifierType extends string|symbol|number = string, ValueType = any> = (identifier: IdentifierType, value: ValueType) => void;
/**
* Application data dispatcher function type.
*/
export type KernelApplicationDataDispatcher<ValueType = any> = (value: ValueType) => void;
/**
* Kernel application data type.
*/
export type KernelApplicationData = Record<string, any>;
/**
* Kernel context data.
*/
export interface KernelContextData
{
application: {
data: KernelApplicationData;
setData: ApplicationDataSetter;
};
}
/**
* React Kernel context.
*/
export const KernelContext = React.createContext<KernelContextData>({
application: {
data: {},
setData: () => {},
},
});
/**
* Kernel context provider.
*/
export function KernelContextProvider({children}: React.PropsWithChildren<{}>)
{
// Kernel application data initialization.
const [kernelApplicationData, setKernelApplicationData] = useState<KernelApplicationData>({});
/**
* Change application data function.
*/
const changeApplicationData = useCallback((applicationUpdate: Partial<KernelApplicationData>) => {
setKernelApplicationData({
...kernelApplicationData,
...applicationUpdate,
});
}, [kernelApplicationData, setKernelApplicationData]);
/**
* Application data setter function.
*/
const applicationDataSetter = useCallback((identifier: string, data: any) => (
changeApplicationData({
[identifier]: data,
})
), [changeApplicationData]);
// Initialize kernel context value.
const kernelContextValue = useMemo<KernelContextData>(() => ({
application: {
data: kernelApplicationData,
setData: applicationDataSetter,
},
}), [kernelApplicationData, applicationDataSetter]);
return (
<KernelContext.Provider value={kernelContextValue}>
{children}
</KernelContext.Provider>
);
}
/**
* Get kernel context data.
*/
export function useKernelContext(): KernelContextData
{
return useContext(KernelContext);
}
/**
* Initialize or get kernel application data with given identifier.
* @param identifier Application data identifier.
* @param initialValue Application data initial value.
*/
export function useKernelApplicationData<T>(identifier: string, initialValue: T): [T, KernelApplicationDataDispatcher<T>]
{
/**
* Get kernel context.
*/
const kernelContext = useKernelContext();
/**
* Function to set application data.
*/
const setApplicationData = useCallback(
(newValue: T) => kernelContext.application.setData(identifier, newValue),
[kernelContext.application.setData]
);
// Return kernel application data.
return [kernelContext.application.data?.[identifier] ?? initialValue, setApplicationData];
}