feat(CustomProvider): support theme on <CustomProvider> (#1798)

* feat(customprovider): support `theme` on <CustomProvider>`

* test(custom-provider): update test

docs/pages/_app.tsx

@@ -123,21 +123,18 @@ function App({ Component, pageProps }: AppProps) {
 
   const messages = getMessages(language);
 
-  React.useEffect(() => {
-    const oppositeThemeName = themeName === 'default' ? 'dark' : 'light';
-
-    document.body.classList.add(`rs-theme-${themeName === 'default' ? 'light' : 'dark'}`);
-    document.body.classList.remove(`rs-theme-${oppositeThemeName}`);
-  }, [themeName]);
-
   React.useEffect(() => {
     loadStylesheetForDirection(direction);
   }, [direction]);
 
   return (
     <React.StrictMode>
-      <Grid fluid className="app-container">
-        <CustomProvider locale={locale} rtl={direction === 'rtl'}>
+      <CustomProvider
+        locale={locale}
+        rtl={direction === 'rtl'}
+        theme={themeName === 'default' ? 'light' : 'dark'}
+      >
+        <Grid fluid className="app-container">
           <AppContext.Provider
             value={{
               messages,
@@ -153,8 +150,8 @@ function App({ Component, pageProps }: AppProps) {
             <StyleHead onLoaded={handleStyleHeadLoaded} />
             <Component {...pageProps} />
           </AppContext.Provider>
-        </CustomProvider>
-      </Grid>
+        </Grid>
+      </CustomProvider>
     </React.StrictMode>
   );
 }

src/CustomProvider/CustomProvider.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { getClassNamePrefix } from '../utils/prefix';
+import { getClassNamePrefix, prefix } from '../utils/prefix';
 import { Locale } from '../locales';
+import { addClass, removeClass, canUseDOM } from '../DOMHelper';
 
 export interface CustomValue<T = Locale> {
   /** Language configuration */
@@ -42,7 +43,7 @@ export interface CustomValue<T = Locale> {
 
 export interface CustomProviderProps<T = Locale> extends CustomValue<T> {
   /** Supported themes */
-  theme?: 'default' | 'dark' | 'high-contrast';
+  theme?: 'light' | 'dark' | 'high-contrast';
 
   /** The prefix of the component CSS class */
   classPrefix?: string;
@@ -53,11 +54,25 @@ export interface CustomProviderProps<T = Locale> extends CustomValue<T> {
 
 const CustomContext = React.createContext<CustomProviderProps>({});
 const { Consumer, Provider } = CustomContext;
+const themes = ['light', 'dark', 'high-contrast'];
 
 const CustomProvider = (props: CustomProviderProps) => {
-  const { children, classPrefix = getClassNamePrefix(), ...rest } = props;
+  const { children, classPrefix = getClassNamePrefix(), theme, ...rest } = props;
 
-  const value = React.useMemo(() => ({ classPrefix, ...rest }), [classPrefix, rest]);
+  const value = React.useMemo(() => ({ classPrefix, theme, ...rest }), [classPrefix, theme, rest]);
+
+  React.useEffect(() => {
+    if (canUseDOM && theme) {
+      addClass(document.body, prefix(classPrefix, `theme-${theme}`));
+
+      // Remove the className that will cause style conflicts
+      themes.forEach(t => {
+        if (t !== theme) {
+          removeClass(document.body, prefix(classPrefix, `theme-${t}`));
+        }
+      });
+    }
+  }, [classPrefix, theme]);
 
   return <Provider value={value}>{children}</Provider>;
 };

src/CustomProvider/test/CustomProviderSpec.js

@@ -45,4 +45,18 @@ describe('CustomProvider', () => {
     );
     assert.equal(node.querySelector('.rs-calendar-header-title').innerText, 'мая, 2021');
   });
+
+  // TODO: This is a side-effect test, which will affect the style check test.
+  it('Should be rendered as a dark theme', () => {
+    getDOMNode(
+      <div>
+        <CustomProvider theme="dark">
+          <div />
+        </CustomProvider>
+      </div>
+    );
+
+    assert.include(document.body.classList.toString(), 'rs-theme-dark');
+    document.body.classList.remove('rs-theme-dark');
+  });
 });