✨ feat: 添加 staticInstanceConfig api 以支持静态实例的配置

ant-design · Jan 12, 2023 · fdca322 · fdca322
1 parent b8504ac
commit fdca322
Show file tree

Hide file tree

Showing 5 changed files with 207 additions and 13 deletions.
diff --git a/src/containers/ThemeProvider/AntdProvider.tsx b/src/containers/ThemeProvider/AntdProvider.tsx
@@ -7,14 +7,21 @@ import { ThemeConfig } from 'antd/es/config-provider/context';
 
 type AntdProviderProps = Pick<
   ThemeProviderProps<any>,
-  'theme' | 'prefixCls' | 'getStaticInstance' | 'children'
+  'theme' | 'prefixCls' | 'getStaticInstance' | 'children' | 'staticInstanceConfig'
 >;
 
 const AntdProvider: FC<AntdProviderProps> = memo(
-  ({ children, theme: themeProp, prefixCls, getStaticInstance }) => {
+  ({ children, theme: themeProp, prefixCls, getStaticInstance, staticInstanceConfig }) => {
     const { appearance, isDarkMode } = useThemeMode();
-    const [messageInstance, messageContextHolder] = message.useMessage();
-    const [notificationInstance, notificationContextHolder] = notification.useNotification();
+
+    const [messageInstance, messageContextHolder] = message.useMessage({
+      prefixCls,
+      ...(staticInstanceConfig?.message || {}),
+    });
+    const [notificationInstance, notificationContextHolder] = notification.useNotification({
+      prefixCls,
+      ...(staticInstanceConfig?.notification || {}),
+    });
     const [modalInstance, modalContextHolder] = Modal.useModal();
 
     useEffect(() => {

diff --git a/src/containers/ThemeProvider/ThemeProvider.tsx b/src/containers/ThemeProvider/ThemeProvider.tsx
@@ -16,6 +16,7 @@ export const ThemeProvider: <T = any, S = any>(
   theme,
   getStaticInstance,
   prefixCls,
+  staticInstanceConfig,
 
   appearance,
   defaultAppearance,
@@ -29,7 +30,12 @@ export const ThemeProvider: <T = any, S = any>(
       appearance={appearance}
       onAppearanceChange={onAppearanceChange}
     >
-      <AntdProvider prefixCls={prefixCls} theme={theme} getStaticInstance={getStaticInstance}>
+      <AntdProvider
+        prefixCls={prefixCls}
+        staticInstanceConfig={staticInstanceConfig}
+        theme={theme}
+        getStaticInstance={getStaticInstance}
+      >
         <TokenContainer customToken={customToken} customStylish={customStylish}>
           {children}
         </TokenContainer>

diff --git a/src/containers/ThemeProvider/type.ts b/src/containers/ThemeProvider/type.ts
@@ -1,8 +1,8 @@
 import { GetCustomStylish, GetCustomToken, ThemeAppearance, ThemeMode } from '@/types';
 import { ThemeConfig } from 'antd/es/config-provider/context';
-import { MessageInstance } from 'antd/es/message/interface';
+import { ConfigOptions as MessageConfig, MessageInstance } from 'antd/es/message/interface';
 import { ModalStaticFunctions } from 'antd/es/modal/confirm';
-import { NotificationInstance } from 'antd/es/notification/interface';
+import { NotificationConfig, NotificationInstance } from 'antd/es/notification/interface';
 import { ReactNode } from 'react';
 
 export interface GetAntdTheme {
@@ -33,6 +33,13 @@ export interface ThemeProviderProps<T, S = Record<string, string>> {
    */
   getStaticInstance?: (instances: StaticInstance) => void;
 
+  /**
+   * 静态方法的入参
+   */
+  staticInstanceConfig?: {
+    message?: MessageConfig;
+    notification?: NotificationConfig;
+  };
   // --------------------- 主题切换 --------------------- //
   /**
    * 应用的展示外观主题，只存在亮色和暗色两种

diff --git a/tests/containers/ThemeProvider.test.tsx b/tests/containers/ThemeProvider.test.tsx
@@ -1,8 +1,9 @@
-import { render, renderHook } from '@testing-library/react';
+import { act, render, renderHook } from '@testing-library/react';
 import { App, theme } from 'antd';
 import { css, GetCustomToken, ThemeProvider, useTheme, useThemeMode } from 'antd-style';
 import { MappingAlgorithm } from 'antd/es/config-provider/context';
 import { MessageInstance } from 'antd/es/message/interface';
+import { NotificationInstance } from 'antd/es/notification/interface';
 import { FC, PropsWithChildren } from 'react';
 
 interface TestDesignToken {
@@ -217,20 +218,65 @@ describe('ThemeProvider', () => {
     expect(nodeWithout).not.toHaveStyle('color: red;');
   });
 
-  it('获得静态实例对象', () => {
+  describe('静态实例对象', () => {
+    it('获得静态实例对象', () => {
+      let message = {} as MessageInstance;
+      const Demo: FC = () => {
+        return (
+          <ThemeProvider getStaticInstance={(instances) => (message = instances.message)}>
+            <div style={{ padding: 16 }} className={'container'}>
+              <a href="">节点样式</a>
+            </div>
+          </ThemeProvider>
+        );
+      };
+
+      render(<Demo />);
+
+      expect(message.success).not.toBeUndefined();
+    });
+  });
+  it('测试 prefix', () => {
     let message = {} as MessageInstance;
+    let notification = {} as NotificationInstance;
+
     const Demo: FC = () => {
       return (
-        <ThemeProvider getStaticInstance={(instances) => (message = instances.message)}>
-          <div style={{ padding: 16 }} className={'container'}>
+        <ThemeProvider
+          prefixCls={'demo'}
+          getStaticInstance={(instances) => {
+            message = instances.message;
+            notification = instances.notification;
+          }}
+          staticInstanceConfig={{
+            message: {
+              getContainer: () => document.getElementById('xxx')!,
+            },
+            notification: {
+              getContainer: () => document.getElementById('xxx')!,
+            },
+          }}
+        >
+          <div id={'xxx'} style={{ padding: 16 }} className={'container'}>
             <a href="">节点样式</a>
           </div>
         </ThemeProvider>
       );
     };
 
-    render(<Demo />);
+    const { container } = render(<Demo />);
+
+    act(() => {
+      message.success('success');
+    });
+
+    expect(container.getElementsByClassName('demo-notice-success')).toHaveLength(1);
+
+    act(() => {
+      notification.warning({ message: '123' });
+    });
 
-    expect(message.success).not.toBeUndefined();
+    expect(container.getElementsByClassName('demo-notice-warning')).toHaveLength(1);
+    expect(container.getElementsByClassName('demo-notice')).toHaveLength(2);
   });
 });
diff --git a/tests/containers/__snapshots__/ThemeProvider.test.tsx.snap b/tests/containers/__snapshots__/ThemeProvider.test.tsx.snap
@@ -1,5 +1,133 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ThemeProvider 包含 prefix 1`] = `
+<div>
+  <div
+    class="container"
+    id="xxx"
+    style="padding: 16px;"
+  >
+    <a
+      href=""
+    >
+      节点样式
+    </a>
+    <div
+      class="demo demo-top"
+      style="left: 50%; transform: translateX(-50%); top: 8px;"
+    >
+      <div
+        class="demo-notice demo-notice-success"
+      >
+        <div
+          class="demo-notice-content"
+        >
+          <div
+            class="demo-custom-content demo-success"
+          >
+            <span
+              aria-label="check-circle"
+              class="anticon anticon-check-circle"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="check-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+                />
+              </svg>
+            </span>
+            <span>
+              success
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="demo demo-topRight"
+      style="right: 0px; top: 24px;"
+    >
+      <div
+        class="demo-notice demo-notice-warning demo-notice-closable"
+      >
+        <div
+          class="demo-notice-content"
+        >
+          <div
+            class="demo-notice-with-icon"
+            role="alert"
+          >
+            <span
+              aria-label="exclamation-circle"
+              class="anticon anticon-exclamation-circle demo-notice-icon demo-notice-icon-warning"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="exclamation-circle"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                />
+              </svg>
+            </span>
+            <div
+              class="demo-notice-message"
+            >
+              123
+            </div>
+            <div
+              class="demo-notice-description"
+            />
+          </div>
+        </div>
+        <a
+          class="demo-notice-close"
+          tabindex="0"
+        >
+          <span
+            class="demo-close-x"
+          >
+            <span
+              aria-label="close"
+              class="anticon anticon-close demo-close-icon"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="close"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                />
+              </svg>
+            </span>
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`ThemeProvider 注入自定义主题 自定义 Stylish 1`] = `
 .emotion-0 {
   font-size: 14px;