Merge pull request #8 from arvinxx/feat/nest-provider

支持嵌套 Provider 的主题透传

src/containers/ThemeProvider/ThemeSwitcher.tsx

@@ -1,7 +1,8 @@
-import { FC, memo, ReactNode, useCallback, useLayoutEffect } from 'react';
+import { FC, memo, ReactNode, useCallback, useLayoutEffect, useMemo } from 'react';
 import useControlledState from 'use-merge-value';
 
 import { ThemeModeContext } from '@/context';
+import { useTheme } from '@/hooks';
 import { ThemeAppearance, ThemeMode } from '@/types';
 
 let darkThemeMatch: MediaQueryList;
@@ -32,11 +33,18 @@ const ThemeSwitcher: FC<ThemeSwitcherProps> = memo(
     appearance: appearanceProp,
     defaultAppearance,
     onAppearanceChange,
-    themeMode = 'light',
+    themeMode: themeModeProps,
   }) => {
+    const { appearance: upperAppearance, themeMode: upperThemeMode } = useTheme();
+
+    const themeMode = useMemo(
+      () => themeModeProps ?? upperThemeMode,
+      [themeModeProps, upperThemeMode],
+    );
+
     const [appearance, setAppearance] = useControlledState<ThemeAppearance>('light', {
       value: appearanceProp,
-      defaultValue: defaultAppearance,
+      defaultValue: defaultAppearance ?? upperAppearance,
       onChange: onAppearanceChange,
     });
 
@@ -55,6 +63,7 @@ const ThemeSwitcher: FC<ThemeSwitcherProps> = memo(
       else setAppearance(themeMode);
     }, [themeMode]);
 
+    // 自动监听系统主题变更
     useLayoutEffect(() => {
       if (!darkThemeMatch) {
         darkThemeMatch = matchThemeMode('dark');

tests/hooks/useTheme.test.ts → tests/hooks/useTheme.test.tsx

@@ -1,6 +1,7 @@
 import { renderHook } from '@testing-library/react';
 
 import { ThemeProvider, useTheme } from 'antd-style';
+import { FC, PropsWithChildren } from 'react';
 
 describe('useTheme', () => {
   it('如果没有 Provider，theme 对象时是 antd Token 默认值', () => {
@@ -15,6 +16,20 @@ describe('useTheme', () => {
     expect(result.current.stylish).toEqual({});
   });
 
+  it('嵌套 Provider 后能拿到准确的主题值', () => {
+    const Wrapper: FC<PropsWithChildren> = ({ children }) => {
+      return (
+        <ThemeProvider themeMode={'dark'}>
+          <ThemeProvider defaultAppearance={'light'} prefixCls={'kitchen'}>
+            {children}
+          </ThemeProvider>
+        </ThemeProvider>
+      );
+    };
+    const { result } = renderHook(useTheme, { wrapper: Wrapper });
+    expect(result.current.colorPrimary.toLowerCase()).toEqual('#1668dc');
+  });
+
   it('自定义 Token', () => {});
   it('自定义 Stylish', () => {});
 });

tests/hooks/useToken.test.ts

@@ -7,6 +7,4 @@ describe('useAntdToken', () => {
     const { result } = renderHook(useAntdToken);
     expect(result.current.colorPrimary.toLowerCase()).toEqual('#1677ff');
   });
-
-  it('TODO: 嵌套 CP 时能拿到准确的 token 值', () => {});
 });