@selfcommunity/react-core
Version:
React Core Components useful for integrating UI Community components (react-ui).
63 lines (62 loc) • 2.95 kB
JavaScript
import createTheme from '@mui/material/styles/createTheme';
import { mergeDeep } from '@selfcommunity/utils';
import validateColor from 'validate-color';
import { COLORS_COLORBACK, COLORS_COLORPRIMARY, COLORS_COLORSECONDARY, COLORS_COLORFONT, COLORS_COLORFONTSECONDARY, COLORS_NAVBARBACK, STYLE_FONT_FAMILY, } from '../constants/Preferences';
import { isString } from '@selfcommunity/utils';
/**
* check if colorProp is a valid color
* @param preferences
* @param prop
* @param tFunc: type func validator
* @return {boolean|(function(*=): boolean)}
*/
const isValidPreference = (preferences, prop, tFunc) => {
// eslint-disable-next-line no-prototype-builtins
if (preferences.hasOwnProperty(prop) && preferences[prop].hasOwnProperty('value')) {
return tFunc(preferences[prop].value);
}
return false;
};
/**
* Overrides theme properties
* @param options: store.settings.theme
* @param preferences: community global preferences
* @return {SCThemeType}
*/
const getTheme = (options, preferences) => {
const selfcommunity = {
user: {
avatar: {
sizeSmall: 24,
sizeMedium: 40,
sizeLarge: 50,
sizeXLarge: 100,
},
},
category: {
icon: {
sizeSmall: 24,
sizeMedium: 40,
sizeLarge: 50,
},
},
group: {
avatar: {
sizeSmall: 40,
sizeMedium: 60,
sizeLarge: 90,
sizeXLarge: 120,
},
},
};
const defaultOptions = preferences
? {
palette: Object.assign(Object.assign(Object.assign(Object.assign({}, (isValidPreference(preferences, COLORS_COLORBACK, validateColor) && { background: { default: preferences[COLORS_COLORBACK].value } })), { text: Object.assign(Object.assign({}, (isValidPreference(preferences, COLORS_COLORFONT, validateColor) && { primary: preferences[COLORS_COLORFONT].value })), (isValidPreference(preferences, COLORS_COLORFONTSECONDARY, validateColor) && {
secondary: preferences[COLORS_COLORFONTSECONDARY].value,
})) }), (isValidPreference(preferences, COLORS_COLORPRIMARY, validateColor) && { primary: { main: preferences[COLORS_COLORPRIMARY].value } })), (isValidPreference(preferences, COLORS_COLORSECONDARY, validateColor) && Object.assign({ secondary: { main: preferences[COLORS_COLORSECONDARY].value } }, (isValidPreference(preferences, COLORS_NAVBARBACK, validateColor) && { navbar: { main: preferences[COLORS_NAVBARBACK].value } })))),
typography: Object.assign({}, (isValidPreference(preferences, STYLE_FONT_FAMILY, isString) && { fontFamily: preferences[STYLE_FONT_FAMILY].value })),
}
: {};
return createTheme(mergeDeep(Object.assign({ selfcommunity }, defaultOptions), options));
};
export default getTheme;