@gravity-ui/uikit
Version:
Gravity UI base styling and components
48 lines (47 loc) • 2.9 kB
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { PrivateLayoutProvider } from "../layout/LayoutProvider/LayoutProvider.js";
import { block } from "../utils/cn.js";
import { ThemeContext } from "./ThemeContext.js";
import { ThemeSettingsContext } from "./ThemeSettingsContext.js";
import { DEFAULT_DARK_THEME, DEFAULT_DIRECTION, DEFAULT_LIGHT_THEME, DEFAULT_THEME, ROOT_CLASSNAME, } from "./constants.js";
import { updateBodyClassName, updateBodyDirection } from "./dom-helpers.js";
import { useSystemTheme } from "./useSystemTheme.js";
const b = block(ROOT_CLASSNAME);
export function ThemeProvider({ theme: themeProp, systemLightTheme: systemLightThemeProp, systemDarkTheme: systemDarkThemeProp, direction: directionProp, scoped: scopedProp = false, rootClassName = '', children, layout, }) {
const parentThemeState = React.useContext(ThemeContext);
const systemThemeState = React.useContext(ThemeSettingsContext);
const hasParentProvider = parentThemeState !== undefined;
const scoped = hasParentProvider || scopedProp;
const parentTheme = parentThemeState?.theme ?? DEFAULT_THEME;
const theme = themeProp ?? parentTheme;
const systemLightTheme = systemLightThemeProp ?? systemThemeState?.systemLightTheme ?? DEFAULT_LIGHT_THEME;
const systemDarkTheme = systemDarkThemeProp ?? systemThemeState?.systemDarkTheme ?? DEFAULT_DARK_THEME;
const parentDirection = parentThemeState?.direction ?? DEFAULT_DIRECTION;
const direction = directionProp ?? parentDirection;
const systemTheme = useSystemTheme() === 'light' ? systemLightTheme : systemDarkTheme;
const themeValue = theme === 'system' ? systemTheme : theme;
const prevRootClassName = React.useRef('');
React.useLayoutEffect(() => {
if (!scoped) {
updateBodyClassName({
theme: themeValue,
className: rootClassName,
prevClassName: prevRootClassName.current,
});
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 (_jsx(PrivateLayoutProvider, { ...layout, children: _jsx(ThemeContext.Provider, { value: contextValue, children: _jsx(ThemeSettingsContext.Provider, { value: themeSettingsContext, children: scoped ? (_jsx("div", { className: b({ theme: themeValue }, rootClassName), dir: direction, children: children })) : (children) }) }) }));
}
ThemeProvider.displayName = 'ThemeProvider';
//# sourceMappingURL=ThemeProvider.js.map