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 };