feat(design): ConfigProvider add injectStaticFunction prop to control…

… StaticFunction conflicts
oceanbase · Jan 27, 2024 · f9377f9 · f9377f9
1 parent 3a7a4b7
commit f9377f9
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git a/packages/design/src/card/index.tsx b/packages/design/src/card/index.tsx
@@ -71,6 +71,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
 
     return wrapSSR(
       <ConfigProvider
+        injectStaticFunction={false}
         table={
           noBodyPadding
             ? {

diff --git a/packages/design/src/config-provider/index.md b/packages/design/src/config-provider/index.md
@@ -8,6 +8,7 @@ nav:
 - 🔥 完全继承 antd [ConfigProvider](https://ant.design/components/config-provider-cn) 的能力和 API，可无缝切换。
 - 🆕 默认内嵌 [App 包裹组件](https://ant.design/components/app-cn)，支持 message, notification 和 Modal 等静态方法消费 ConfigProvider 配置。
 - 🆕 新增 `table.selectionColumnWidth` 属性，用于配置表格的展开列宽度。
+- 🆕 新增 `injectStaticFunction` 属性，用于配置 `message`, `notification` 和 `Modal` 静态方法是否可以消费全局配置，默认为 `true`。📢 如果有多个 ConfigProvider，建议在最顶层的 ConfigProvider 开启即可，其他的 ConfigProvider 需要关闭该配置，否则静态方法可能会有冲突。
 - 🆕 新增 `styleProviderProps` 属性，一般用于配置 [StyleProvider](https://github.com/ant-design/cssinjs#styleprovider) 的 `hashPriority` 和 `transformers` 属性实现样式降级，来兼容 Chrome 88 以下的低版本浏览器，详见 [antd v5 样式兼容说明](https://ant-design.antgroup.com/docs/react/compatible-style-cn)。
 
 ## 代码演示

diff --git a/packages/design/src/config-provider/index.tsx b/packages/design/src/config-provider/index.tsx
@@ -56,6 +56,8 @@ export interface ConfigProviderProps extends AntConfigProviderProps {
   hideOnSinglePage?: boolean;
   spin?: SpinConfig;
   table?: TableConfig;
+  // inject static function to consume ConfigProvider
+  injectStaticFunction?: boolean;
   // StyleProvider props
   styleProviderProps?: StyleProviderProps;
 }
@@ -89,6 +91,7 @@ const ConfigProvider: ConfigProviderType = ({
   spin,
   table,
   tabs,
+  injectStaticFunction = true,
   styleProviderProps,
   ...restProps
 }) => {
@@ -141,7 +144,7 @@ const ConfigProvider: ConfigProviderType = ({
           {/* ref: https://ant.design/components/app */}
           <App component={false}>
             {children}
-            <StaticFunction />
+            {injectStaticFunction && <StaticFunction />}
           </App>
         </StyleProvider>
       </ExtendedConfigContext.Provider>

diff --git a/packages/ui/src/PageContainer/demo/complete.tsx b/packages/ui/src/PageContainer/demo/complete.tsx
@@ -1,5 +1,5 @@
 import { EllipsisOutlined } from '@oceanbase/icons';
-import { Button, Card, Descriptions, Dropdown, message, Radio, Table } from '@oceanbase/design';
+import { Button, Card, Descriptions, Dropdown, Modal, message, Table } from '@oceanbase/design';
 import { PageContainer } from '@oceanbase/ui';
 import React, { useState } from 'react';
 
@@ -17,6 +17,7 @@ export default () => {
       setLoading(false);
       message.success('刷新成功');
     });
+    return promise;
   };
 
   const dataSource = [
@@ -127,7 +128,23 @@ export default () => {
           ],
         },
         extra: [
-          <Button key="1">次要按钮</Button>,
+          <Button
+            key="1"
+            onClick={() => {
+              Modal.confirm({
+                title: '确定要执行当前任务吗？',
+                onOk: () => {
+                  return mockRequest().then(() => {
+                    Modal.success({
+                      title: '任务提交成功！',
+                    });
+                  });
+                },
+              });
+            }}
+          >
+            次要按钮
+          </Button>,
           <Button key="2" type="primary">
             主要按钮
           </Button>,