jiti-meet/react/features/dynamic-branding/functions.web.ts

88 lines
2.3 KiB
TypeScript
Raw Normal View History

2022-09-13 07:36:00 +00:00
import { Theme } from '@mui/material';
import { createTheme, adaptV4Theme } from '@mui/material/styles';
import { font, colors, colorMap, spacing, shape, typography, breakpoints } from '../base/ui/Tokens';
import { createColorTokens } from '../base/ui/utils';
/**
* Creates MUI branding theme based on the custom theme json.
*
* @param {Object} customTheme - The branded custom theme.
* @returns {Object} - The MUI theme.
*/
2022-09-13 07:36:00 +00:00
export function createMuiBrandingTheme(customTheme: Theme) {
const {
palette: customPalette,
shape: customShape,
typography: customTypography,
breakpoints: customBreakpoints,
spacing: customSpacing
} = customTheme;
const newPalette = createColorTokens(colorMap, colors);
if (customPalette) {
overwriteRecurrsive(newPalette, customPalette);
}
const newShape = { ...shape };
if (customShape) {
overwriteRecurrsive(newShape, customShape);
}
const newTypography = {
font: { ...font },
...typography
};
if (customTypography) {
overwriteRecurrsive(newTypography, customTypography);
}
const newBreakpoints = { ...breakpoints };
if (customBreakpoints) {
overwriteRecurrsive(newBreakpoints, customBreakpoints);
}
2022-09-13 07:36:00 +00:00
let newSpacing: any = [ ...spacing ];
if (customSpacing?.length) {
newSpacing = customSpacing;
}
2022-09-13 07:36:00 +00:00
return createTheme(adaptV4Theme({
spacing: newSpacing,
palette: newPalette,
shape: newShape,
2022-09-13 07:36:00 +00:00
// @ts-ignore
typography: newTypography,
2022-09-13 07:36:00 +00:00
// @ts-ignore
breakpoints: newBreakpoints
2022-09-13 07:36:00 +00:00
}));
}
/**
* Overwrites recursively values from object 2 into object 1 based on common keys.
* (Merges object2 into object1).
*
* @param {Object} obj1 - The object holding the merged values.
* @param {Object} obj2 - The object to compare to and take values from.
* @returns {void}
*/
function overwriteRecurrsive(obj1: Object, obj2: Object) {
Object.keys(obj2).forEach(key => {
if (obj1.hasOwnProperty(key)) {
if (typeof obj1[key as keyof typeof obj1] === 'object') {
overwriteRecurrsive(obj1[key as keyof typeof obj1], obj2[key as keyof typeof obj2]);
} else {
// @ts-ignore
obj1[key] = obj2[key];
}
}
});
}