Merge pull request #574 from oceanbase/zhuyue-dev

fix(design): ConfigProvider should not inject StaticFunction many times by default
oceanbase · Apr 25, 2024 · 16b0a5b · 16b0a5b
2 parents e433358 + efd6ec5
commit 16b0a5b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/packages/design/src/config-provider/__tests__/injectStaticFunction.test.tsx b/packages/design/src/config-provider/__tests__/injectStaticFunction.test.tsx
@@ -0,0 +1,18 @@
+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 <div />;
+    };
+    render(
+      <ConfigProvider>
+        <Child />
+      </ConfigProvider>
+    );
+  });
+});
diff --git 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 from '../static-function';
+import StaticFunction, { injectedStaticFunction } from '../static-function';
 import themeConfig from '../theme';
 import defaultTheme from '../theme/default';
 import darkTheme from '../theme/dark';
@@ -97,7 +97,7 @@ const ConfigProvider: ConfigProviderType = ({
   spin,
   table,
   tabs,
-  injectStaticFunction = true,
+  injectStaticFunction = !injectedStaticFunction,
   styleProviderProps,
   ...restProps
 }) => {

diff --git a/packages/design/src/static-function/index.tsx b/packages/design/src/static-function/index.tsx
@@ -36,6 +36,9 @@ let modal: Omit<ModalStaticFunctions, 'warn'> & {
   useModal: typeof AntModal.useModal;
 } = AntModal;
 
+// injected static function or not
+let injectedStaticFunction = false;
+
 export default () => {
   // 自动注入 useToken，避免每次使用都要声明一遍，比较繁琐
   token = useToken().token;
@@ -54,7 +57,8 @@ export default () => {
     ...staticFunction.modal,
     useModal: AntModal.useModal,
   };
+  injectedStaticFunction = true;
   return null;
 };
 
-export { token, message, notification, modal };
+export { token, message, notification, modal, injectedStaticFunction };