From 0d874e50295c548b5a4402a4a58a2103735f1bd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 18 Sep 2025 17:13:47 +0800 Subject: [PATCH 1/4] feat: uniqueBgClassName --- .gitignore | 3 ++- src/UniqueProvider/FloatBg.tsx | 4 +++- src/UniqueProvider/index.tsx | 1 + src/context.ts | 1 + src/index.tsx | 4 ++++ tests/unique.test.tsx | 23 +++++++++++++++++++++++ 6 files changed, 34 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 02e6333b..7256eba7 100644 --- a/.gitignore +++ b/.gitignore @@ -39,4 +39,5 @@ bun.lockb # dumi .dumi/tmp -.dumi/tmp-production \ No newline at end of file +.dumi/tmp-production +dist/ \ No newline at end of file diff --git a/src/UniqueProvider/FloatBg.tsx b/src/UniqueProvider/FloatBg.tsx index 1a7b9e05..e1a451f7 100644 --- a/src/UniqueProvider/FloatBg.tsx +++ b/src/UniqueProvider/FloatBg.tsx @@ -17,6 +17,7 @@ export interface FloatBgProps { offsetY: number; popupSize?: { width: number; height: number }; motion?: CSSMotionProps; + uniqueBgClassName?: string; } const FloatBg = (props: FloatBgProps) => { @@ -32,6 +33,7 @@ const FloatBg = (props: FloatBgProps) => { offsetY, popupSize, motion, + uniqueBgClassName, } = props; const floatBgCls = `${prefixCls}-float-bg`; @@ -72,7 +74,7 @@ const FloatBg = (props: FloatBgProps) => { }} > {({ className: motionClassName, style: motionStyle }) => { - const cls = classNames(floatBgCls, motionClassName, { + const cls = classNames(floatBgCls, motionClassName, uniqueBgClassName, { [`${floatBgCls}-visible`]: motionVisible, }); diff --git a/src/UniqueProvider/index.tsx b/src/UniqueProvider/index.tsx index 74b2057b..ab5ce4a9 100644 --- a/src/UniqueProvider/index.tsx +++ b/src/UniqueProvider/index.tsx @@ -216,6 +216,7 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => { offsetY={offsetY} popupSize={popupSize} motion={options.popupMotion} + uniqueBgClassName={options.uniqueBgClassName} /> diff --git a/src/context.ts b/src/context.ts index 365c265e..6a777c1f 100644 --- a/src/context.ts +++ b/src/context.ts @@ -20,6 +20,7 @@ export interface UniqueShowOptions { delay: number; prefixCls?: string; popupClassName?: string; + uniqueBgClassName?: string; popupStyle?: React.CSSProperties; popupPlacement?: string; builtinPlacements?: BuildInPlacements; diff --git a/src/index.tsx b/src/index.tsx index 84390e07..acf270aa 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -98,6 +98,8 @@ export interface TriggerProps { builtinPlacements?: BuildInPlacements; popupAlign?: AlignType; popupClassName?: string; + /** Pass to `UniqueProvider` FloatBg */ + uniqueBgClassName?: string; popupStyle?: React.CSSProperties; getPopupClassNameFromAlign?: (align: AlignType) => string; onPopupClick?: React.MouseEventHandler; @@ -169,6 +171,7 @@ export function generateTrigger( // Popup popup, popupClassName, + uniqueBgClassName, popupStyle, popupPlacement, @@ -323,6 +326,7 @@ export function generateTrigger( delay, prefixCls, popupClassName, + uniqueBgClassName, popupStyle, popupPlacement, builtinPlacements, diff --git a/tests/unique.test.tsx b/tests/unique.test.tsx index f6fae182..a2ec6c59 100644 --- a/tests/unique.test.tsx +++ b/tests/unique.test.tsx @@ -152,4 +152,27 @@ describe('Trigger.Unique', () => { expect(popup.className).toContain('custom-align'); expect(popup.className).toContain('rc-trigger-popup-unique-controlled'); }); + + it('should apply uniqueBgClassName to FloatBg component', async () => { + const { container } = render( + + tooltip} + unique + uniqueBgClassName="custom-bg-class" + popupVisible + > +
click me
+ + , + ); + + await awaitFakeTimer(); + + // Check that FloatBg has the custom background className + const floatBg = document.querySelector('.rc-trigger-popup-float-bg'); + expect(floatBg).toBeTruthy(); + expect(floatBg).toHaveClass('custom-bg-class'); + }); }); From b83963f63f577cfd0a79893056a8d1ee0f54cda1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 18 Sep 2025 17:20:04 +0800 Subject: [PATCH 2/4] feat: uniqueBgStyle --- src/UniqueProvider/FloatBg.tsx | 3 ++ src/UniqueProvider/index.tsx | 1 + src/context.ts | 1 + src/index.tsx | 4 ++ tests/unique.test.tsx | 75 +++++++++++++++++++++++++++++++++- 5 files changed, 82 insertions(+), 2 deletions(-) diff --git a/src/UniqueProvider/FloatBg.tsx b/src/UniqueProvider/FloatBg.tsx index e1a451f7..1f8338db 100644 --- a/src/UniqueProvider/FloatBg.tsx +++ b/src/UniqueProvider/FloatBg.tsx @@ -18,6 +18,7 @@ export interface FloatBgProps { popupSize?: { width: number; height: number }; motion?: CSSMotionProps; uniqueBgClassName?: string; + uniqueBgStyle?: React.CSSProperties; } const FloatBg = (props: FloatBgProps) => { @@ -34,6 +35,7 @@ const FloatBg = (props: FloatBgProps) => { popupSize, motion, uniqueBgClassName, + uniqueBgStyle, } = props; const floatBgCls = `${prefixCls}-float-bg`; @@ -85,6 +87,7 @@ const FloatBg = (props: FloatBgProps) => { ...offsetStyle, ...sizeStyle, ...motionStyle, + ...uniqueBgStyle, }} /> ); diff --git a/src/UniqueProvider/index.tsx b/src/UniqueProvider/index.tsx index ab5ce4a9..87b2c094 100644 --- a/src/UniqueProvider/index.tsx +++ b/src/UniqueProvider/index.tsx @@ -217,6 +217,7 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => { popupSize={popupSize} motion={options.popupMotion} uniqueBgClassName={options.uniqueBgClassName} + uniqueBgStyle={options.uniqueBgStyle} /> diff --git a/src/context.ts b/src/context.ts index 6a777c1f..ddaba6d9 100644 --- a/src/context.ts +++ b/src/context.ts @@ -21,6 +21,7 @@ export interface UniqueShowOptions { prefixCls?: string; popupClassName?: string; uniqueBgClassName?: string; + uniqueBgStyle?: React.CSSProperties; popupStyle?: React.CSSProperties; popupPlacement?: string; builtinPlacements?: BuildInPlacements; diff --git a/src/index.tsx b/src/index.tsx index acf270aa..ece9fefd 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -100,6 +100,8 @@ export interface TriggerProps { popupClassName?: string; /** Pass to `UniqueProvider` FloatBg */ uniqueBgClassName?: string; + /** Pass to `UniqueProvider` FloatBg */ + uniqueBgStyle?: React.CSSProperties; popupStyle?: React.CSSProperties; getPopupClassNameFromAlign?: (align: AlignType) => string; onPopupClick?: React.MouseEventHandler; @@ -172,6 +174,7 @@ export function generateTrigger( popup, popupClassName, uniqueBgClassName, + uniqueBgStyle, popupStyle, popupPlacement, @@ -327,6 +330,7 @@ export function generateTrigger( prefixCls, popupClassName, uniqueBgClassName, + uniqueBgStyle, popupStyle, popupPlacement, builtinPlacements, diff --git a/tests/unique.test.tsx b/tests/unique.test.tsx index a2ec6c59..de4d3ebb 100644 --- a/tests/unique.test.tsx +++ b/tests/unique.test.tsx @@ -161,18 +161,89 @@ describe('Trigger.Unique', () => { popup={tooltip} unique uniqueBgClassName="custom-bg-class" - popupVisible >
click me
, ); + // Initially no popup should be visible + expect(document.querySelector('.rc-trigger-popup')).toBeFalsy(); + + // Click trigger to show popup + fireEvent.click(container.querySelector('.target')); await awaitFakeTimer(); + // Check that popup exists + const popup = document.querySelector('.rc-trigger-popup'); + expect(popup).toBeTruthy(); + // Check that FloatBg has the custom background className const floatBg = document.querySelector('.rc-trigger-popup-float-bg'); expect(floatBg).toBeTruthy(); - expect(floatBg).toHaveClass('custom-bg-class'); + expect(floatBg.className).toContain('custom-bg-class'); + }); + + it('should apply uniqueBgStyle to FloatBg component', async () => { + const { container } = render( + + tooltip} + unique + uniqueBgStyle={{ backgroundColor: 'red', border: '1px solid blue' }} + > +
click me
+ + , + ); + + // Initially no popup should be visible + expect(document.querySelector('.rc-trigger-popup')).toBeFalsy(); + + // Click trigger to show popup + fireEvent.click(container.querySelector('.target')); + await awaitFakeTimer(); + + // Check that popup exists + const popup = document.querySelector('.rc-trigger-popup'); + expect(popup).toBeTruthy(); + + // Check that FloatBg has the custom background style + const floatBg = document.querySelector('.rc-trigger-popup-float-bg'); + expect(floatBg).toBeTruthy(); + const computedStyle = window.getComputedStyle(floatBg); + expect(computedStyle.backgroundColor).toBe('red'); + expect(computedStyle.border).toContain('1px solid blue'); + }); + + it('should not apply any additional className to FloatBg when uniqueBgClassName is not provided', async () => { + const { container } = render( + + tooltip} + unique + > +
click me
+ + , + ); + + // Initially no popup should be visible + expect(document.querySelector('.rc-trigger-popup')).toBeFalsy(); + + // Click trigger to show popup + fireEvent.click(container.querySelector('.target')); + await awaitFakeTimer(); + + // Check that popup exists + const popup = document.querySelector('.rc-trigger-popup'); + expect(popup).toBeTruthy(); + + // Check that FloatBg exists but does not have custom background className + const floatBg = document.querySelector('.rc-trigger-popup-float-bg'); + expect(floatBg).toBeTruthy(); + expect(floatBg.className).not.toContain('undefined'); }); }); From 1049f92cc64d2c10386a30475db6dd520b5b4b46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 18 Sep 2025 17:28:05 +0800 Subject: [PATCH 3/4] test: update --- tests/unique.test.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/tests/unique.test.tsx b/tests/unique.test.tsx index de4d3ebb..42c3ad15 100644 --- a/tests/unique.test.tsx +++ b/tests/unique.test.tsx @@ -212,9 +212,10 @@ describe('Trigger.Unique', () => { // Check that FloatBg has the custom background style const floatBg = document.querySelector('.rc-trigger-popup-float-bg'); expect(floatBg).toBeTruthy(); - const computedStyle = window.getComputedStyle(floatBg); - expect(computedStyle.backgroundColor).toBe('red'); - expect(computedStyle.border).toContain('1px solid blue'); + expect(floatBg).toHaveStyle({ + backgroundColor: 'red', + border: '1px solid blue', + }); }); it('should not apply any additional className to FloatBg when uniqueBgClassName is not provided', async () => { From 78e69e1198d3f27eaf1fabb3a5debaa66f692570 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 18 Sep 2025 17:33:13 +0800 Subject: [PATCH 4/4] test: update --- tests/unique.test.tsx | 100 ++++++++++++++---------------------------- 1 file changed, 32 insertions(+), 68 deletions(-) diff --git a/tests/unique.test.tsx b/tests/unique.test.tsx index 42c3ad15..3b04f334 100644 --- a/tests/unique.test.tsx +++ b/tests/unique.test.tsx @@ -2,6 +2,7 @@ import { cleanup, fireEvent, render } from '@testing-library/react'; import React from 'react'; import Trigger, { UniqueProvider } from '../src'; import { awaitFakeTimer } from './util'; +import type { TriggerProps } from '../src'; // Mock FloatBg to check if open props changed global.openChangeLog = []; @@ -27,6 +28,34 @@ jest.mock('../src/UniqueProvider/FloatBg', () => { }; }); +async function setupAndOpenPopup(triggerProps: Partial = {}) { + const { container } = render( + + tooltip} + unique + {...triggerProps} + > +
click me
+ + , + ); + + // Initially no popup should be visible + expect(document.querySelector('.rc-trigger-popup')).toBeFalsy(); + + // Click trigger to show popup + fireEvent.click(container.querySelector('.target')); + await awaitFakeTimer(); + + // Check that popup exists + const popup = document.querySelector('.rc-trigger-popup'); + expect(popup).toBeTruthy(); + + return { container, popup }; +} + describe('Trigger.Unique', () => { beforeEach(() => { jest.useFakeTimers(); @@ -154,29 +183,7 @@ describe('Trigger.Unique', () => { }); it('should apply uniqueBgClassName to FloatBg component', async () => { - const { container } = render( - - tooltip} - unique - uniqueBgClassName="custom-bg-class" - > -
click me
- - , - ); - - // Initially no popup should be visible - expect(document.querySelector('.rc-trigger-popup')).toBeFalsy(); - - // Click trigger to show popup - fireEvent.click(container.querySelector('.target')); - await awaitFakeTimer(); - - // Check that popup exists - const popup = document.querySelector('.rc-trigger-popup'); - expect(popup).toBeTruthy(); + await setupAndOpenPopup({ uniqueBgClassName: 'custom-bg-class' }); // Check that FloatBg has the custom background className const floatBg = document.querySelector('.rc-trigger-popup-float-bg'); @@ -185,29 +192,7 @@ describe('Trigger.Unique', () => { }); it('should apply uniqueBgStyle to FloatBg component', async () => { - const { container } = render( - - tooltip} - unique - uniqueBgStyle={{ backgroundColor: 'red', border: '1px solid blue' }} - > -
click me
- - , - ); - - // Initially no popup should be visible - expect(document.querySelector('.rc-trigger-popup')).toBeFalsy(); - - // Click trigger to show popup - fireEvent.click(container.querySelector('.target')); - await awaitFakeTimer(); - - // Check that popup exists - const popup = document.querySelector('.rc-trigger-popup'); - expect(popup).toBeTruthy(); + await setupAndOpenPopup({ uniqueBgStyle: { backgroundColor: 'red', border: '1px solid blue' } }); // Check that FloatBg has the custom background style const floatBg = document.querySelector('.rc-trigger-popup-float-bg'); @@ -219,28 +204,7 @@ describe('Trigger.Unique', () => { }); it('should not apply any additional className to FloatBg when uniqueBgClassName is not provided', async () => { - const { container } = render( - - tooltip} - unique - > -
click me
- - , - ); - - // Initially no popup should be visible - expect(document.querySelector('.rc-trigger-popup')).toBeFalsy(); - - // Click trigger to show popup - fireEvent.click(container.querySelector('.target')); - await awaitFakeTimer(); - - // Check that popup exists - const popup = document.querySelector('.rc-trigger-popup'); - expect(popup).toBeTruthy(); + await setupAndOpenPopup(); // Check that FloatBg exists but does not have custom background className const floatBg = document.querySelector('.rc-trigger-popup-float-bg');