diff --git a/packages/design/src/card/demo/config-provider.tsx b/packages/design/src/card/demo/config-provider.tsx
new file mode 100644
index 000000000..fd9bd3c6f
--- /dev/null
+++ b/packages/design/src/card/demo/config-provider.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { Button, Card, Modal, Spin } from '@oceanbase/design';
+
+const App: React.FC = () => {
+ const [loading, setLoading] = useState(false);
+ return (
+ <>
+
+
+ {loading ? (
+
+ ) : (
+
+ Card content
+ Card content
+ Card content
+
+ )}
+
+ >
+ );
+};
+
+export default App;
diff --git a/packages/design/src/card/index.md b/packages/design/src/card/index.md
index 549467386..9b824a540 100644
--- a/packages/design/src/card/index.md
+++ b/packages/design/src/card/index.md
@@ -24,6 +24,8 @@ nav:
+
+
## API
diff --git a/packages/design/src/config-provider/__tests__/injectStaticFunction.test.tsx b/packages/design/src/config-provider/__tests__/injectStaticFunction.test.tsx
deleted file mode 100644
index 4fd54cde6..000000000
--- a/packages/design/src/config-provider/__tests__/injectStaticFunction.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { useContext } from 'react';
-import { render } from '@testing-library/react';
-import { ConfigProvider, useToken } from '@oceanbase/design';
-import { injectedStaticFunction } from '../../static-function';
-
-describe('ConfigProvider injectStaticFunction', () => {
- it('injectStaticFunction', () => {
- const Child = () => {
- expect(injectedStaticFunction).toBe(true);
- return ;
- };
- render(
-
-
-
- );
- });
-});
diff --git a/packages/design/src/config-provider/__tests__/static-function.test.tsx b/packages/design/src/config-provider/__tests__/static-function.test.tsx
index a3ca9c85f..260012cbf 100644
--- a/packages/design/src/config-provider/__tests__/static-function.test.tsx
+++ b/packages/design/src/config-provider/__tests__/static-function.test.tsx
@@ -1,9 +1,74 @@
import React from 'react';
-import { render } from '@testing-library/react';
-import { ConfigProvider, token } from '@oceanbase/design';
+import { render, fireEvent } from '@testing-library/react';
+import { Button, ConfigProvider, Modal, token } from '@oceanbase/design';
import defaultTheme from '../../theme/default';
+import { waitFakeTimer } from '../../../../../tests/util';
describe('ConfigProvider static function', () => {
+ beforeEach(() => {
+ vi.useFakeTimers();
+ });
+ afterEach(() => {
+ vi.useRealTimers();
+ vi.clearAllTimers();
+ });
+
+ it('Modal static function', async () => {
+ const { container } = render(
+
+
+
+ );
+ const button = container.querySelector('#button');
+ // After clicking the button, the tooltip should display normally
+ fireEvent.click(button!);
+ await waitFakeTimer();
+ expect(document.querySelector('.ant-modal')).toBeTruthy();
+ expect(getComputedStyle(document.querySelector('.ant-modal-mask')).backgroundColor).toBe(
+ defaultTheme.token.colorBgMask
+ );
+ });
+
+ it('Modal static function in nested ConfigProvider', async () => {
+ const { container } = render(
+
+
+
+
+
+
+
+
+
+ );
+ const button = container.querySelector('#button');
+ // After clicking the button, the tooltip should display normally
+ fireEvent.click(button!);
+ await waitFakeTimer();
+ expect(document.querySelector('.ant-modal')).toBeTruthy();
+ expect(getComputedStyle(document.querySelector('.ant-modal-mask')).backgroundColor).toBe(
+ defaultTheme.token.colorBgMask
+ );
+ });
+
it('static token', () => {
expect(token.boxShadow).toBe(defaultTheme.token.boxShadow);
expect(token.boxShadowSecondary).toBe(defaultTheme.token.boxShadowSecondary);
diff --git a/packages/design/src/config-provider/index.tsx b/packages/design/src/config-provider/index.tsx
index 1a897447a..0ddbf36b7 100644
--- a/packages/design/src/config-provider/index.tsx
+++ b/packages/design/src/config-provider/index.tsx
@@ -13,7 +13,7 @@ import type { StyleProviderProps } from '@ant-design/cssinjs';
import StyleContext from '@ant-design/cssinjs/es/StyleContext';
import type { StyleContextProps } from '@ant-design/cssinjs/es/StyleContext';
import { merge } from 'lodash';
-import StaticFunction, { injectedStaticFunction } from '../static-function';
+import StaticFunction from '../static-function';
import themeConfig from '../theme';
import defaultTheme from '../theme/default';
import darkTheme from '../theme/dark';
@@ -99,7 +99,7 @@ const ConfigProvider: ConfigProviderType = ({
spin,
table,
tabs,
- injectStaticFunction = !injectedStaticFunction,
+ injectStaticFunction = true,
styleProviderProps,
...restProps
}) => {
diff --git a/packages/design/src/static-function/index.tsx b/packages/design/src/static-function/index.tsx
index 4ed880366..9a4cc8442 100644
--- a/packages/design/src/static-function/index.tsx
+++ b/packages/design/src/static-function/index.tsx
@@ -36,9 +36,6 @@ let modal: Omit & {
useModal: typeof AntModal.useModal;
} = AntModal;
-// injected static function or not
-let injectedStaticFunction = false;
-
export default () => {
// 自动注入 useToken,避免每次使用都要声明一遍,比较繁琐
token = useToken().token;
@@ -57,8 +54,8 @@ export default () => {
...staticFunction.modal,
useModal: AntModal.useModal,
};
- injectedStaticFunction = true;
+
return null;
};
-export { token, message, notification, modal, injectedStaticFunction };
+export { token, message, notification, modal };