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..1f8338db 100644 --- a/src/UniqueProvider/FloatBg.tsx +++ b/src/UniqueProvider/FloatBg.tsx @@ -17,6 +17,8 @@ export interface FloatBgProps { offsetY: number; popupSize?: { width: number; height: number }; motion?: CSSMotionProps; + uniqueBgClassName?: string; + uniqueBgStyle?: React.CSSProperties; } const FloatBg = (props: FloatBgProps) => { @@ -32,6 +34,8 @@ const FloatBg = (props: FloatBgProps) => { offsetY, popupSize, motion, + uniqueBgClassName, + uniqueBgStyle, } = props; const floatBgCls = `${prefixCls}-float-bg`; @@ -72,7 +76,7 @@ const FloatBg = (props: FloatBgProps) => { }} > {({ className: motionClassName, style: motionStyle }) => { - const cls = classNames(floatBgCls, motionClassName, { + const cls = classNames(floatBgCls, motionClassName, uniqueBgClassName, { [`${floatBgCls}-visible`]: motionVisible, }); @@ -83,6 +87,7 @@ const FloatBg = (props: FloatBgProps) => { ...offsetStyle, ...sizeStyle, ...motionStyle, + ...uniqueBgStyle, }} /> ); diff --git a/src/UniqueProvider/index.tsx b/src/UniqueProvider/index.tsx index 74b2057b..87b2c094 100644 --- a/src/UniqueProvider/index.tsx +++ b/src/UniqueProvider/index.tsx @@ -216,6 +216,8 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => { offsetY={offsetY} popupSize={popupSize} motion={options.popupMotion} + uniqueBgClassName={options.uniqueBgClassName} + uniqueBgStyle={options.uniqueBgStyle} /> diff --git a/src/context.ts b/src/context.ts index 365c265e..ddaba6d9 100644 --- a/src/context.ts +++ b/src/context.ts @@ -20,6 +20,8 @@ export interface UniqueShowOptions { delay: number; 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 84390e07..ece9fefd 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -98,6 +98,10 @@ export interface TriggerProps { builtinPlacements?: BuildInPlacements; popupAlign?: AlignType; 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; @@ -169,6 +173,8 @@ export function generateTrigger( // Popup popup, popupClassName, + uniqueBgClassName, + uniqueBgStyle, popupStyle, popupPlacement, @@ -323,6 +329,8 @@ export function generateTrigger( delay, prefixCls, popupClassName, + uniqueBgClassName, + uniqueBgStyle, popupStyle, popupPlacement, builtinPlacements, diff --git a/tests/unique.test.tsx b/tests/unique.test.tsx index f6fae182..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(); @@ -152,4 +181,34 @@ 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 () => { + await setupAndOpenPopup({ uniqueBgClassName: 'custom-bg-class' }); + + // Check that FloatBg has the custom background className + const floatBg = document.querySelector('.rc-trigger-popup-float-bg'); + expect(floatBg).toBeTruthy(); + expect(floatBg.className).toContain('custom-bg-class'); + }); + + it('should apply uniqueBgStyle to FloatBg component', async () => { + 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'); + expect(floatBg).toBeTruthy(); + expect(floatBg).toHaveStyle({ + backgroundColor: 'red', + border: '1px solid blue', + }); + }); + + it('should not apply any additional className to FloatBg when uniqueBgClassName is not provided', async () => { + await setupAndOpenPopup(); + + // 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'); + }); });