feat: calculate body class names seperately

gravity-ui · Dec 12, 2023 · 3578b33 · 3578b33
1 parent bcfe5b7
commit 3578b33
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 24 deletions.
diff --git a/src/components/theme/ThemeProvider.tsx b/src/components/theme/ThemeProvider.tsx
@@ -1,17 +1,13 @@
 import React from 'react';
 
-import {block, blockNew} from '../utils/cn';
-
 import {ThemeContext} from './ThemeContext';
 import {ThemeSettingsContext} from './ThemeSettingsContext';
-import {DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME, DEFAULT_THEME, ROOT_CLASS_NAME} from './constants';
+import {DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME, DEFAULT_THEME} from './constants';
+import {getBodyRootClassName, getDeprecatedBodyRootClassName} from './getBodyClassName';
 import type {RealTheme, Theme} from './types';
 import {updateBodyClassName} from './updateBodyClassName';
 import {useSystemTheme} from './useSystemTheme';
 
-const b = block(ROOT_CLASS_NAME);
-const bNew = blockNew(ROOT_CLASS_NAME);
-
 interface ThemeProviderExternalProps {}
 
 interface ThemeProviderDefaultProps {
@@ -66,10 +62,16 @@ export function ThemeProvider({
             <ThemeSettingsContext.Provider value={themeSettingsContext}>
                 {scoped ? (
                     <div
-                        className={bNew({theme: themeValue, 'native-scrollbar': nativeScrollbar}, [
-                            b({theme: themeValue, 'native-scrollbar': nativeScrollbar}),
-                            rootClassName,
-                        ])}
+                        className={getBodyRootClassName(
+                            {theme: themeValue, 'native-scrollbar': nativeScrollbar},
+                            [
+                                getDeprecatedBodyRootClassName({
+                                    theme: themeValue,
+                                    'native-scrollbar': nativeScrollbar,
+                                }),
+                                rootClassName,
+                            ],
+                        )}
                     >
                         {children}
                     </div>

diff --git a/src/components/theme/constants.ts b/src/components/theme/constants.ts
@@ -5,5 +5,3 @@ export const DEFAULT_DARK_THEME = 'dark';
 export const LIGHT_THEMES = ['light', 'light-hc'];
 export const DARK_THEMES = ['dark', 'dark-hc'];
 export const THEMES = [...LIGHT_THEMES, ...DARK_THEMES];
-
-export const ROOT_CLASS_NAME = 'root';
diff --git a/src/components/theme/getBodyClassName.ts b/src/components/theme/getBodyClassName.ts
@@ -0,0 +1,24 @@
+import {block, blockNew} from '../utils/cn';
+
+import type {RealTheme} from './types';
+
+const ROOT_CLASS_NAME = 'root';
+
+const bNew = blockNew(ROOT_CLASS_NAME);
+const b = block(ROOT_CLASS_NAME);
+
+export function getDeprecatedBodyRootClassName(
+    modifier?: Record<string, string | boolean | undefined>,
+) {
+    return b(modifier);
+}
+export function getBodyRootClassName(
+    modifier?: Record<string, string | boolean | undefined>,
+    addition?: string[],
+) {
+    return bNew(modifier, addition);
+}
+
+export function getBaseBodyRootClassName(theme?: RealTheme) {
+    return getBodyRootClassName({theme});
+}
diff --git a/src/components/theme/index.ts b/src/components/theme/index.ts
@@ -8,4 +8,5 @@ export * from './useThemeType';
 export * from './withTheme';
 export * from './withThemeValue';
 export * from './getThemeType';
+export {getBaseBodyRootClassName} from './getBodyClassName';
 export type {Theme, RealTheme, ThemeType} from './types';
diff --git a/src/components/theme/updateBodyClassName.ts b/src/components/theme/updateBodyClassName.ts
@@ -1,12 +1,10 @@
-import {block, blockNew, modsClassName} from '../utils/cn';
+import {modsClassName} from '../utils/cn';
 
-import {ROOT_CLASS_NAME} from './constants';
+import {getBodyRootClassName, getDeprecatedBodyRootClassName} from './getBodyClassName';
 import type {RealTheme} from './types';
 
-const b = block(ROOT_CLASS_NAME);
-const bNew = blockNew(ROOT_CLASS_NAME);
-const rootClassName = b();
-const rootNewClassName = bNew();
+const rootClassName = getDeprecatedBodyRootClassName();
+const rootNewClassName = getBodyRootClassName();
 
 export type BodyClassNameModifiers = {
     'native-scrollbar': boolean;
@@ -41,19 +39,22 @@ export function updateBodyClassName(
     }
 
     [...bodyEl.classList].forEach((cls) => {
-        if (cls.startsWith(modsClassName(b({theme: true})))) {
+        if (cls.startsWith(modsClassName(getDeprecatedBodyRootClassName({theme: true})))) {
             bodyEl.classList.remove(cls);
         }
 
-        if (cls.startsWith(modsClassName(bNew({theme: true})))) {
+        if (cls.startsWith(modsClassName(getBodyRootClassName({theme: true})))) {
             bodyEl.classList.remove(cls);
         }
     });
-    bodyEl.classList.add(modsClassName(b({theme: newTheme})));
-    bodyEl.classList.add(modsClassName(bNew({theme: newTheme})));
+    bodyEl.classList.add(modsClassName(getDeprecatedBodyRootClassName({theme: newTheme})));
+    bodyEl.classList.add(modsClassName(getBodyRootClassName({theme: newTheme})));
 
     for (const [key, value] of Object.entries({...defaultModifiers, ...modifiers})) {
-        bodyEl.classList.toggle(modsClassName(b({[key]: true})), value);
-        bodyEl.classList.toggle(modsClassName(bNew({[key]: true})), value);
+        bodyEl.classList.toggle(
+            modsClassName(getDeprecatedBodyRootClassName({[key]: true})),
+            value,
+        );
+        bodyEl.classList.toggle(modsClassName(getBodyRootClassName({[key]: true})), value);
     }
 }