93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
import useDarkMode from "hooks/useDarkMode";
|
|
import useStateWithLocalStorage from "hooks/useStateWithLocalStorage";
|
|
import React, { ReactNode, useContext, useEffect } from "react";
|
|
|
|
export interface AppLayoutState {
|
|
subPanelOpen: boolean | undefined;
|
|
languagePanelOpen: boolean | undefined;
|
|
mainPanelReduced: boolean | undefined;
|
|
mainPanelOpen: boolean | undefined;
|
|
darkMode: boolean | undefined;
|
|
setSubPanelOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
|
|
setLanguagePanelOpen: React.Dispatch<
|
|
React.SetStateAction<boolean | undefined>
|
|
>;
|
|
setMainPanelReduced: React.Dispatch<
|
|
React.SetStateAction<boolean | undefined>
|
|
>;
|
|
setMainPanelOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
|
|
setDarkMode: React.Dispatch<React.SetStateAction<boolean | undefined>>;
|
|
setSelectedThemeMode: React.Dispatch<
|
|
React.SetStateAction<boolean | undefined>
|
|
>;
|
|
}
|
|
|
|
const initialState: AppLayoutState = {
|
|
subPanelOpen: false,
|
|
languagePanelOpen: false,
|
|
mainPanelReduced: false,
|
|
mainPanelOpen: false,
|
|
darkMode: false,
|
|
setSubPanelOpen: () => {},
|
|
setLanguagePanelOpen: () => {},
|
|
setMainPanelReduced: () => {},
|
|
setMainPanelOpen: () => {},
|
|
setDarkMode: () => {},
|
|
setSelectedThemeMode: () => {},
|
|
};
|
|
|
|
const AppContext = React.createContext<AppLayoutState>(initialState);
|
|
|
|
export default AppContext;
|
|
|
|
export function useAppLayout() {
|
|
return useContext(AppContext);
|
|
}
|
|
|
|
type Props = {
|
|
children: ReactNode;
|
|
};
|
|
|
|
export const AppContextProvider = (props: Props) => {
|
|
const [subPanelOpen, setSubPanelOpen] = useStateWithLocalStorage<
|
|
boolean | undefined
|
|
>("subPanelOpen", initialState.subPanelOpen);
|
|
|
|
const [languagePanelOpen, setLanguagePanelOpen] = useStateWithLocalStorage<
|
|
boolean | undefined
|
|
>("languagePanelOpen", initialState.languagePanelOpen);
|
|
|
|
const [mainPanelReduced, setMainPanelReduced] = useStateWithLocalStorage<
|
|
boolean | undefined
|
|
>("mainPanelReduced", initialState.mainPanelReduced);
|
|
|
|
const [mainPanelOpen, setMainPanelOpen] = useStateWithLocalStorage<
|
|
boolean | undefined
|
|
>("mainPanelOpen", initialState.mainPanelOpen);
|
|
|
|
const [darkMode, setDarkMode, setSelectedThemeMode] = useDarkMode(
|
|
"darkMode",
|
|
initialState.darkMode
|
|
);
|
|
|
|
return (
|
|
<AppContext.Provider
|
|
value={{
|
|
subPanelOpen,
|
|
languagePanelOpen,
|
|
mainPanelReduced,
|
|
mainPanelOpen,
|
|
darkMode,
|
|
setSubPanelOpen,
|
|
setLanguagePanelOpen,
|
|
setMainPanelReduced,
|
|
setMainPanelOpen,
|
|
setDarkMode,
|
|
setSelectedThemeMode,
|
|
}}
|
|
>
|
|
{props.children}
|
|
</AppContext.Provider>
|
|
);
|
|
};
|