Merge pull request #606 from oceanbase/dengfuping-dev

fix(design): ConfigProvider static function should work for latest antd

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 (
+    <>
+      <Button
+        type="primary"
+        onClick={() => {
+          Modal.confirm({
+            title: 'This is first Modal.confirm',
+            onOk: () => {
+              setLoading(true);
+              setTimeout(() => {
+                setLoading(false);
+                Modal.confirm({
+                  title: 'This is second Modal.confirm',
+                });
+              }, 2000);
+            },
+          });
+        }}
+      >
+        Click
+      </Button>
+      <div style={{ marginTop: 16 }}>
+        {loading ? (
+          <Spin />
+        ) : (
+          <Card title="Card title" style={{ width: 300 }}>
+            <div>Card content</div>
+            <div>Card content</div>
+            <div>Card content</div>
+          </Card>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default App;

packages/design/src/card/index.md

@@ -24,6 +24,8 @@ nav:
 
 <code src="./demo/tabs.tsx" title="带页签的卡片" description="页签可设置选项卡后面的标签。"></code>
 
+<code src="./demo/config-provider.tsx" title="ConfigProvider" description="用于调试内部的 ConfigProvider 是否表现正常，需要连续触发 2 次及以上，观察第二个弹窗是否正常展示" debug></code>
+
 <code src="../table/demo/card-table.tsx" title="和 Table 组合使用"></code>
 
 ## API

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(
+      <ConfigProvider>
+        <Button
+          id="button"
+          onClick={() => {
+            Modal.confirm({
+              title: 'This is a confirm modal',
+            });
+          }}
+        >
+          Click
+        </Button>
+      </ConfigProvider>
+    );
+    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(
+      <ConfigProvider>
+        <ConfigProvider>
+          <div>
+            <ConfigProvider>
+              <Button
+                id="button"
+                onClick={() => {
+                  Modal.confirm({
+                    title: 'This is a confirm modal',
+                  });
+                }}
+              >
+                Click
+              </Button>
+            </ConfigProvider>
+          </div>
+        </ConfigProvider>
+      </ConfigProvider>
+    );
+    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);

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
 }) => {

packages/design/src/static-function/index.tsx

@@ -36,9 +36,6 @@ let modal: Omit<ModalStaticFunctions, 'warn'> & {
   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 };