66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
createContext,
|
|
Dispatch,
|
|
FC,
|
|
PropsWithChildren,
|
|
ReactNode,
|
|
SetStateAction,
|
|
useCallback,
|
|
useEffect,
|
|
useState,
|
|
} from "react";
|
|
import { DevToolbox } from "./Toolbox";
|
|
|
|
interface ContextProps {
|
|
tools: Record<string, ReactNode>;
|
|
addTool: (key: string, r: ReactNode) => void;
|
|
removeTool: (key: string) => void;
|
|
shouldShowDevTools: boolean;
|
|
setShouldShowDevTools: Dispatch<SetStateAction<boolean>>;
|
|
}
|
|
|
|
export const DevToolboxContext = createContext<ContextProps>({
|
|
tools: {},
|
|
addTool: () => {},
|
|
removeTool: () => {},
|
|
shouldShowDevTools: false,
|
|
setShouldShowDevTools: () => {},
|
|
});
|
|
|
|
export const DevToolboxContextProvider: FC<
|
|
PropsWithChildren<{ isDev: boolean }>
|
|
> = (
|
|
{ children, isDev },
|
|
) => {
|
|
const [tools, setTools] = useState<Record<string, ReactNode>>({});
|
|
const [shouldShowDevTools, setShouldShowDevTools] = useState(isDev);
|
|
|
|
const addTool = useCallback((key: string, r: ReactNode) => {
|
|
setTools((t) => ({ ...t, [key]: r }));
|
|
}, []);
|
|
const removeTool = useCallback((key: string) => {
|
|
setTools((t) => ({ ...t, [key]: undefined }));
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (localStorage.getItem("dev")) setShouldShowDevTools(true);
|
|
}, []);
|
|
|
|
return (
|
|
<DevToolboxContext.Provider
|
|
value={{
|
|
tools,
|
|
addTool,
|
|
removeTool,
|
|
shouldShowDevTools,
|
|
setShouldShowDevTools,
|
|
}}
|
|
>
|
|
{children}
|
|
<DevToolbox></DevToolbox>
|
|
</DevToolboxContext.Provider>
|
|
);
|
|
};
|