77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import CssBaseline from '@mui/material/CssBaseline';
|
|
import { ThemeProvider as BaseThemeProvider } from '@mui/material/styles';
|
|
import clone from 'lodash/clone';
|
|
import set from 'lodash/set';
|
|
import * as React from 'react';
|
|
|
|
import useAutomatischInfo from 'hooks/useAutomatischInfo';
|
|
import useAutomatischConfig from 'hooks/useAutomatischConfig';
|
|
import { defaultTheme, mationTheme } from 'styles/theme';
|
|
|
|
const overrideIfGiven = (theme, key, value) => {
|
|
if (value) {
|
|
set(theme, key, value);
|
|
}
|
|
};
|
|
|
|
const customizeTheme = (theme, config) => {
|
|
// `clone` is needed so that the new theme reference triggers re-render
|
|
const shallowDefaultTheme = clone(theme);
|
|
|
|
overrideIfGiven(
|
|
shallowDefaultTheme,
|
|
'palette.primary.main',
|
|
config.palettePrimaryMain,
|
|
);
|
|
|
|
overrideIfGiven(
|
|
shallowDefaultTheme,
|
|
'palette.primary.light',
|
|
config.palettePrimaryLight,
|
|
);
|
|
|
|
overrideIfGiven(
|
|
shallowDefaultTheme,
|
|
'palette.primary.dark',
|
|
config.palettePrimaryDark,
|
|
);
|
|
|
|
return shallowDefaultTheme;
|
|
};
|
|
|
|
const ThemeProvider = ({ children, ...props }) => {
|
|
const { data: automatischInfo, isPending: isAutomatischInfoPending } =
|
|
useAutomatischInfo();
|
|
const isMation = automatischInfo?.data.isMation;
|
|
const { data: configData, isLoading: configLoading } = useAutomatischConfig();
|
|
const config = configData?.data;
|
|
|
|
const customTheme = React.useMemo(() => {
|
|
const installationTheme = isMation ? mationTheme : defaultTheme;
|
|
|
|
if (configLoading || isAutomatischInfoPending) return installationTheme;
|
|
|
|
const customTheme = customizeTheme(installationTheme, config || {});
|
|
|
|
return customTheme;
|
|
}, [configLoading, config, isMation, isAutomatischInfoPending]);
|
|
|
|
// TODO: maybe a global loading state for the custom theme?
|
|
if (isAutomatischInfoPending || configLoading) return <></>;
|
|
|
|
return (
|
|
<BaseThemeProvider theme={customTheme} {...props}>
|
|
<CssBaseline />
|
|
|
|
{children}
|
|
</BaseThemeProvider>
|
|
);
|
|
};
|
|
|
|
ThemeProvider.propTypes = {
|
|
children: PropTypes.node.isRequired,
|
|
};
|
|
|
|
export default ThemeProvider;
|