🐛 fix: 修正 createInstance 的 ThemeProvider 会全量覆盖默认的自定义 token 问题

ant-design · Feb 26, 2023 · 9477630 · 9477630
1 parent 7f7a59e
commit 9477630
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 10 deletions.
diff --git a/src/factories/createThemeProvider/TokenContainer.tsx b/src/factories/createThemeProvider/TokenContainer.tsx
@@ -12,11 +12,13 @@ interface TokenContainerProps<T, S = Record<string, string>>
     'children' | 'customToken' | 'customStylish' | 'prefixCls'
   > {
   StyledThemeProvider: StyledThemeProvider;
+  defaultCustomToken?: ThemeProviderProps<T, S>['customToken'];
 }
 
 const TokenContainer: <T, S>(props: TokenContainerProps<T, S>) => ReactElement | null = ({
   children,
   customToken: customTokenOrFn,
+  defaultCustomToken: defaultCustomTokenFn,
   customStylish: stylishOrGetStylish,
   prefixCls = 'ant',
   StyledThemeProvider,
@@ -25,14 +27,25 @@ const TokenContainer: <T, S>(props: TokenContainerProps<T, S>) => ReactElement |
   const { appearance, isDarkMode } = themeState;
   const { stylish: antdStylish, ...token } = useAntdTheme();
 
+  // 获取默认的自定义 token
+  const defaultCustomToken = useMemo(() => {
+    if (!defaultCustomTokenFn) return {};
+
+    if (defaultCustomTokenFn instanceof Function) {
+      return defaultCustomTokenFn({ token, appearance, isDarkMode });
+    }
+
+    return defaultCustomTokenFn;
+  }, [defaultCustomTokenFn, token, appearance]);
+
   // 获取 自定义 token
   const customToken = useMemo(() => {
     if (customTokenOrFn instanceof Function) {
-      return customTokenOrFn({ token, appearance, isDarkMode });
+      return { ...defaultCustomToken, ...customTokenOrFn({ token, appearance, isDarkMode }) };
     }
 
-    return customTokenOrFn;
-  }, [customTokenOrFn, token, appearance]);
+    return { ...defaultCustomToken, ...customTokenOrFn };
+  }, [defaultCustomToken, customTokenOrFn, token, appearance]);
 
   // 获取 stylish
   const customStylish = useMemo(() => {

diff --git a/src/factories/createThemeProvider/index.tsx b/src/factories/createThemeProvider/index.tsx
@@ -25,7 +25,7 @@ export const createThemeProvider = (
     ({
       children,
 
-      customToken = option.customToken,
+      customToken,
       customStylish,
 
       theme,
@@ -59,6 +59,7 @@ export const createThemeProvider = (
           <TokenContainer
             prefixCls={prefixCls}
             customToken={customToken}
+            defaultCustomToken={option.customToken}
             customStylish={customStylish}
             StyledThemeProvider={
               styled?.ThemeProvider || option.styledConfig?.ThemeProvider || DEFAULT_THEME_PROVIDER

diff --git a/tests/components/ThemeProvider.test.tsx b/tests/components/ThemeProvider.test.tsx
@@ -8,9 +8,12 @@ import { FC, PropsWithChildren } from 'react';
 
 interface TestDesignToken {
   customBrandColor: string;
+
+  customColor?: string;
 }
 interface TestDesignStylish {
   defaultText: string;
+  x?: any;
 }
 
 declare module 'antd-style' {
@@ -153,7 +156,7 @@ describe('ThemeProvider', () => {
       );
 
       const { result } = renderHook(useTheme, { wrapper: Wrapper });
-      expect(result.current.stylish.x.styles).toEqual('');
+      expect(result.current.stylish.x!.styles).toEqual('');
     });
   });
 

diff --git a/tests/functions/createInstance.test.ts → tests/functions/createInstance.test.tsx b/tests/functions/createInstance.test.ts → tests/functions/createInstance.test.tsx
@@ -1,13 +1,24 @@
 import { renderHook } from '@testing-library/react';
 import { createInstance } from 'antd-style';
 
+interface TestCustomToken {
+  x?: string;
+  y?: number;
+}
+
+declare module 'antd-style' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface CustomToken extends TestCustomToken {}
+}
+
 describe('createInstance', () => {
   const instance = createInstance({
     key: 'xxx',
     prefixCls: 'test',
     speedy: true,
     customToken: {
       x: '123',
+      y: 12345,
     },
   });
   it('创建独立样式实例,key 为 xxx，speedy 为 true', () => {
@@ -26,11 +37,6 @@ describe('createInstance', () => {
 
     expect(result.current.x).toEqual('123');
   });
-  it('包裹 ThemeProvider 时 x 也存在', () => {
-    const { result } = renderHook(instance.useTheme, { wrapper: instance.ThemeProvider });
-
-    expect(result.current.x).toEqual('123');
-  });
 
   it('创建实例时可以不填 key', () => {
     const instance = createInstance({
@@ -39,4 +45,22 @@ describe('createInstance', () => {
     });
     expect(instance.styleManager.sheet.key).toEqual('css');
   });
+
+  describe('ThemeProvider', () => {
+    it('包裹 ThemeProvider 时 x 也存在', () => {
+      const { result } = renderHook(instance.useTheme, { wrapper: instance.ThemeProvider });
+
+      expect(result.current.x).toEqual('123');
+      expect(result.current.y).toEqual(12345);
+    });
+
+    it('可以包裹 ThemeProvider ，自定义 token 也存在', () => {
+      const { ThemeProvider } = instance;
+      const Wrapper = (props: any) => <ThemeProvider {...props} customToken={{ x: '222' }} />;
+      const { result } = renderHook(instance.useTheme, { wrapper: Wrapper });
+
+      expect(result.current.x).toEqual('222');
+      expect(result.current.y).toEqual(12345);
+    });
+  });
 });