@gravity-ui/uikit
Version:
Gravity UI base styling and components
52 lines (51 loc) • 3.26 kB
JavaScript
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemeProvider = ThemeProvider;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const LayoutProvider_1 = require("../layout/LayoutProvider/LayoutProvider.js");
const cn_1 = require("../utils/cn.js");
const ThemeContext_1 = require("./ThemeContext.js");
const ThemeSettingsContext_1 = require("./ThemeSettingsContext.js");
const constants_1 = require("./constants.js");
const dom_helpers_1 = require("./dom-helpers.js");
const useSystemTheme_1 = require("./useSystemTheme.js");
const b = (0, cn_1.block)(constants_1.ROOT_CLASSNAME);
function ThemeProvider({ theme: themeProp, systemLightTheme: systemLightThemeProp, systemDarkTheme: systemDarkThemeProp, direction: directionProp, scoped: scopedProp = false, rootClassName = '', children, layout, }) {
const parentThemeState = React.useContext(ThemeContext_1.ThemeContext);
const systemThemeState = React.useContext(ThemeSettingsContext_1.ThemeSettingsContext);
const hasParentProvider = parentThemeState !== undefined;
const scoped = hasParentProvider || scopedProp;
const parentTheme = parentThemeState?.theme ?? constants_1.DEFAULT_THEME;
const theme = themeProp ?? parentTheme;
const systemLightTheme = systemLightThemeProp ?? systemThemeState?.systemLightTheme ?? constants_1.DEFAULT_LIGHT_THEME;
const systemDarkTheme = systemDarkThemeProp ?? systemThemeState?.systemDarkTheme ?? constants_1.DEFAULT_DARK_THEME;
const parentDirection = parentThemeState?.direction ?? constants_1.DEFAULT_DIRECTION;
const direction = directionProp ?? parentDirection;
const systemTheme = (0, useSystemTheme_1.useSystemTheme)() === 'light' ? systemLightTheme : systemDarkTheme;
const themeValue = theme === 'system' ? systemTheme : theme;
const prevRootClassName = React.useRef('');
React.useLayoutEffect(() => {
if (!scoped) {
(0, dom_helpers_1.updateBodyClassName)({
theme: themeValue,
className: rootClassName,
prevClassName: prevRootClassName.current,
});
(0, dom_helpers_1.updateBodyDirection)(direction);
prevRootClassName.current = rootClassName;
}
}, [scoped, themeValue, direction, rootClassName]);
const contextValue = React.useMemo(() => ({
theme,
themeValue,
direction,
scoped,
}), [theme, themeValue, direction, scoped]);
const themeSettingsContext = React.useMemo(() => ({ systemLightTheme, systemDarkTheme }), [systemLightTheme, systemDarkTheme]);
return ((0, jsx_runtime_1.jsx)(LayoutProvider_1.PrivateLayoutProvider, { ...layout, children: (0, jsx_runtime_1.jsx)(ThemeContext_1.ThemeContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(ThemeSettingsContext_1.ThemeSettingsContext.Provider, { value: themeSettingsContext, children: scoped ? ((0, jsx_runtime_1.jsx)("div", { className: b({ theme: themeValue }, rootClassName), dir: direction, children: children })) : (children) }) }) }));
}
ThemeProvider.displayName = 'ThemeProvider';
//# sourceMappingURL=ThemeProvider.js.map