Merge pull request #142 from oceanbase/dengfuping-theme

🐞 fix(design): spin and theme should inherit from parent context for ConfigProvider

packages/design/src/config-provider/__tests__/theme.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ConfigProvider, useToken } from '@oceanbase/design';
+
+describe('ConfigProvider theme', () => {
+  it('ConfigProvider theme token', () => {
+    const Child1 = () => {
+      const { token } = useToken();
+      expect(token.colorBgLayout).toBe('#F5F8FE');
+      return <div />;
+    };
+    const Child2 = () => {
+      const { token } = useToken();
+      expect(token.colorBgLayout).toBe('#ff0000');
+      return <div />;
+    };
+    const Child3 = () => {
+      const { token } = useToken();
+      expect(token.colorBgLayout).toBe('#ff0000');
+      return <div />;
+    };
+    render(
+      <ConfigProvider>
+        <Child1 />
+        <ConfigProvider
+          theme={{
+            token: {
+              colorBgLayout: '#ff0000',
+            },
+          }}
+        >
+          <Child2 />
+          <ConfigProvider>
+            <Child3 />
+          </ConfigProvider>
+        </ConfigProvider>
+      </ConfigProvider>
+    );
+  });
+});

packages/design/src/config-provider/index.tsx

@@ -7,6 +7,7 @@ import type {
 } from 'antd/es/config-provider';
 import type { ComponentStyleConfig } from 'antd/es/config-provider/context';
 import type { SpinIndicator } from 'antd/es/spin';
+import { merge } from 'lodash';
 import StaticFunction from '../static-function';
 import defaultTheme from '../theme';
 import defaultThemeToken from '../theme/default';
@@ -46,44 +47,45 @@ const ExtendedConfigContext = React.createContext<ExtendedConfigConsumerProps>({
 
 const { defaultSeed, components } = defaultTheme;
 
-// ConfigProvider 默认设置主题和内嵌 App，支持 message, notification 和 Modal 等静态方法消费 ConfigProvider 配置
-// ref: https://ant.design/components/app-cn
 const ConfigProvider = ({ children, theme, navigate, spin, ...restProps }: ConfigProviderProps) => {
   // inherit from parent ConfigProvider
-  const parentContext = React.useContext<ExtendedConfigConsumerProps>(ExtendedConfigContext);
+  const parentContext = React.useContext<ConfigConsumerProps>(AntConfigProvider.ConfigContext);
+  const parentExtendedContext =
+    React.useContext<ExtendedConfigConsumerProps>(ExtendedConfigContext);
   return (
     <AntConfigProvider
-      spin={spin}
-      theme={{
-        ...theme,
-        // Only set seed token for dark theme
-        // Because defaultThemeToken is designed for light theme
-        token: theme?.isDark
-          ? {
-            ...defaultSeed,
-            ...theme?.token,
-          }
-          : {
-            ...defaultSeed,
-            ...defaultThemeToken,
-            ...theme?.token,
-          },
-        components: {
-          ...components,
-          ...theme?.components,
-          InputNumber: {
-            ...components?.InputNumber,
-            ...theme?.components?.InputNumber,
+      spin={merge(parentContext.spin, spin)}
+      theme={merge(
+        {
+          // Only set seed token for dark theme
+          // Because defaultThemeToken is designed for light theme
+          token: theme?.isDark
+            ? {
+                ...defaultSeed,
+              }
+            : {
+                ...defaultSeed,
+                ...defaultThemeToken,
+              },
+          components: {
+            ...components,
+            InputNumber: {
+              ...components?.InputNumber,
+            },
           },
         },
-      }}
+        parentContext.theme,
+        theme
+      )}
       {...restProps}
     >
       <ExtendedConfigContext.Provider
         value={{
-          navigate: navigate === undefined ? parentContext.navigate : navigate,
+          navigate: navigate === undefined ? parentExtendedContext.navigate : navigate,
         }}
       >
+        {/* Nested App component for static function of message, notification and Modal to consume ConfigProvider config */}
+        {/* ref: https://ant.design/components/app */}
         <App>
           {children}
           <StaticFunction />
@@ -96,7 +98,7 @@ const ConfigProvider = ({ children, theme, navigate, spin, ...restProps }: Confi
 ConfigProvider.ConfigContext =
   AntConfigProvider.ConfigContext as React.Context<ConfigConsumerProps>;
 ConfigProvider.ExtendedConfigContext = ExtendedConfigContext;
-// “SizeContext”已弃用。ts(6385)
+// SizeContext is deprecated
 // ConfigProvider.SizeContext = AntConfigProvider.SizeContext;
 ConfigProvider.config = AntConfigProvider.config;
 ConfigProvider.useConfig = AntConfigProvider.useConfig;

packages/design/src/config-provider/navigate.ts

@@ -20,7 +20,7 @@ export interface Path {
   hash: string;
 }
 
-export type To = string | Partial<Path>;
+export type To = string | Partial<Path> | any;
 
 export type RelativeRoutingType = 'route' | 'path';
 
@@ -33,5 +33,5 @@ export interface NavigateOptions {
 
 export interface NavigateFunction {
   (to: To, options?: NavigateOptions): void;
-  (delta: number): void;
+  (delta: number | any): void;
 }