@selfcommunity/react-core/lib/cjs/components/provider/SCThemeProvider/index.js

React Core Components useful for integrating UI Community components (react-ui).

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSCTheme = exports.withSCTheme = exports.SCThemeContext = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const ThemeProvider_1 = tslib_1.__importDefault(require("@mui/material/styles/ThemeProvider"));
const theme_1 = tslib_1.__importDefault(require("../../../themes/theme"));
const SCContextProvider_1 = require("../SCContextProvider");
const SCPreferencesProvider_1 = require("../SCPreferencesProvider");
const use_deep_compare_effect_1 = require("use-deep-compare-effect");
/**
 * Creates Global Context
 *
 :::tip Context can be consumed in one of the following ways:

 ```jsx
 1. <SCThemeContext.Consumer>{(theme,) => (...)}</SCThemeContext.Consumer>
 ```
 ```jsx
 2. const scThemeContext: SCThemeContextType = useContext(SCThemeContext);
 ```
 ```jsx
 3. const scThemeContext: SCThemeContextType = useSCTheme();
 ````

 :::

 */
exports.SCThemeContext = (0, react_1.createContext)({});
/**
 * #### Description:
 * This component makes the `theme` available down the React tree.
 * It should preferably be used at **the root of your component tree**.
 * See: https://mui.com/system/styled/
 *
 * @param children
 * @return
 * ```jsx
 * <SCThemeContext.Provider value={{theme, setTheme: setCustomTheme}}>
 * <ThemeProvider theme={theme}>{children}</ThemeProvider>
 * </SCThemeContext.Provider>
 * ```
 */
function SCThemeProvider({ children = null }) {
    const scContext = (0, SCContextProvider_1.useSCContext)();
    const scPreferencesContext = (0, SCPreferencesProvider_1.useSCPreferences)();
    const [theme, setTheme] = (0, react_1.useState)((0, theme_1.default)(scContext.settings.theme, scPreferencesContext.preferences));
    /**
     * Set custom theme
     * Merge with scPreferencesContext.preferences
     * @param theme
     */
    const setCustomTheme = (theme) => {
        setTheme((0, theme_1.default)(theme, scPreferencesContext.preferences));
    };
    /**
     * Update theme if initial conf changes
     */
    (0, use_deep_compare_effect_1.useDeepCompareEffectNoCheck)(() => {
        setCustomTheme(theme);
    }, [scContext.settings.theme]);
    return ((0, jsx_runtime_1.jsx)(exports.SCThemeContext.Provider, Object.assign({ value: { theme, setTheme: setCustomTheme } }, { children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, Object.assign({ theme: theme }, { children: children })) })));
}
exports.default = SCThemeProvider;
/**
 * Export hoc to inject the base theme to components
 * @param Component
 */
const withSCTheme = (Component) => (props) => {
    const scThemeContext = (0, react_1.useContext)(exports.SCThemeContext);
    return ((0, jsx_runtime_1.jsx)(ThemeProvider_1.default, Object.assign({ theme: scThemeContext.theme }, { children: (0, jsx_runtime_1.jsx)(Component, Object.assign({ setTheme: scThemeContext.setTheme }, props)) })));
};
exports.withSCTheme = withSCTheme;
/**
 * Let's only export the `useSCTheme` hook instead of the context.
 * We only want to use the hook directly and never the context component.
 */
function useSCTheme() {
    return (0, react_1.useContext)(exports.SCThemeContext);
}
exports.useSCTheme = useSCTheme;