From fdca322f5965b7a818b342c91b0ba8522b7bf4b6 Mon Sep 17 00:00:00 2001 From: arvinxx Date: Thu, 12 Jan 2023 23:19:46 +0800 Subject: [PATCH] =?UTF-8?q?:sparkles:=20feat:=20=E6=B7=BB=E5=8A=A0=20stati?= =?UTF-8?q?cInstanceConfig=20api=20=E4=BB=A5=E6=94=AF=E6=8C=81=E9=9D=99?= =?UTF-8?q?=E6=80=81=E5=AE=9E=E4=BE=8B=E7=9A=84=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/ThemeProvider/AntdProvider.tsx | 15 +- .../ThemeProvider/ThemeProvider.tsx | 8 +- src/containers/ThemeProvider/type.ts | 11 +- tests/containers/ThemeProvider.test.tsx | 58 +++++++- .../__snapshots__/ThemeProvider.test.tsx.snap | 128 ++++++++++++++++++ 5 files changed, 207 insertions(+), 13 deletions(-) diff --git a/src/containers/ThemeProvider/AntdProvider.tsx b/src/containers/ThemeProvider/AntdProvider.tsx index 280668ae..191731ab 100644 --- 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, - 'theme' | 'prefixCls' | 'getStaticInstance' | 'children' + 'theme' | 'prefixCls' | 'getStaticInstance' | 'children' | 'staticInstanceConfig' >; const AntdProvider: FC = 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 index 663bd5fe..c8c33e63 100644 --- a/src/containers/ThemeProvider/ThemeProvider.tsx +++ b/src/containers/ThemeProvider/ThemeProvider.tsx @@ -16,6 +16,7 @@ export const ThemeProvider: ( theme, getStaticInstance, prefixCls, + staticInstanceConfig, appearance, defaultAppearance, @@ -29,7 +30,12 @@ export const ThemeProvider: ( appearance={appearance} onAppearanceChange={onAppearanceChange} > - + {children} diff --git a/src/containers/ThemeProvider/type.ts b/src/containers/ThemeProvider/type.ts index 8125d298..629e7769 100644 --- 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> { */ getStaticInstance?: (instances: StaticInstance) => void; + /** + * 静态方法的入参 + */ + staticInstanceConfig?: { + message?: MessageConfig; + notification?: NotificationConfig; + }; // --------------------- 主题切换 --------------------- // /** * 应用的展示外观主题，只存在亮色和暗色两种 diff --git a/tests/containers/ThemeProvider.test.tsx b/tests/containers/ThemeProvider.test.tsx index bc8cfdd9..5f7ebd6c 100644 --- 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 ( + (message = instances.message)}> + + + ); + }; + + render(); + + expect(message.success).not.toBeUndefined(); + }); + }); + it('测试 prefix', () => { let message = {} as MessageInstance; + let notification = {} as NotificationInstance; + const Demo: FC = () => { return ( - (message = instances.message)}> -
+ { + message = instances.message; + notification = instances.notification; + }} + staticInstanceConfig={{ + message: { + getContainer: () => document.getElementById('xxx')!, + }, + notification: { + getContainer: () => document.getElementById('xxx')!, + }, + }} + > + ); }; - render(); + const { container } = render(); + + 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 index cc394327..39763439 100644 --- 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`] = ` +
+
+ + 节点样式 + +
+
+
+
+ + + + + success + +
+
+
+
+
+
+
+ + + + + + + + +
+
+
+
+`; + exports[`ThemeProvider 注入自定义主题 自定义 Stylish 1`] = ` .emotion-0 { font-size: 14px;