diff --git a/assets/index.less b/assets/index.less index 6e19bd1f..ed667e0b 100644 --- a/assets/index.less +++ b/assets/index.less @@ -74,8 +74,8 @@ } } - // =============== Unique Body =============== - &-unique-body { + // =============== Unique Container =============== + &-unique-container { position: absolute; z-index: 0; box-sizing: border-box; diff --git a/src/UniqueProvider/UniqueBody.tsx b/src/UniqueProvider/UniqueContainer.tsx similarity index 78% rename from src/UniqueProvider/UniqueBody.tsx rename to src/UniqueProvider/UniqueContainer.tsx index dfa3b9e7..df6db8fc 100644 --- a/src/UniqueProvider/UniqueBody.tsx +++ b/src/UniqueProvider/UniqueContainer.tsx @@ -5,8 +5,8 @@ import CSSMotion from '@rc-component/motion'; import type { CSSMotionProps } from '@rc-component/motion'; import type { AlignType, ArrowPos } from '../interface'; -export interface UniqueBodyProps { - prefixCls: string; // ${prefixCls}-unique-body +export interface UniqueContainerProps { + prefixCls: string; // ${prefixCls}-unique-container isMobile: boolean; ready: boolean; open: boolean; @@ -18,11 +18,11 @@ export interface UniqueBodyProps { arrowPos?: ArrowPos; popupSize?: { width: number; height: number }; motion?: CSSMotionProps; - uniqueBgClassName?: string; - uniqueBgStyle?: React.CSSProperties; + uniqueContainerClassName?: string; + uniqueContainerStyle?: React.CSSProperties; } -const UniqueBody = (props: UniqueBodyProps) => { +const UniqueContainer = (props: UniqueContainerProps) => { const { prefixCls, isMobile, @@ -36,11 +36,11 @@ const UniqueBody = (props: UniqueBodyProps) => { arrowPos, popupSize, motion, - uniqueBgClassName, - uniqueBgStyle, + uniqueContainerClassName, + uniqueContainerStyle, } = props; - const bodyCls = `${prefixCls}-unique-body`; + const containerCls = `${prefixCls}-unique-container`; const [motionVisible, setMotionVisible] = React.useState(false); @@ -78,7 +78,7 @@ const UniqueBody = (props: UniqueBodyProps) => { motionEnter motionLeave removeOnLeave={false} - leavedClassName={`${bodyCls}-hidden`} + leavedClassName={`${containerCls}-hidden`} {...motion} visible={open} onVisibleChanged={(nextVisible) => { @@ -86,8 +86,8 @@ const UniqueBody = (props: UniqueBodyProps) => { }} > {({ className: motionClassName, style: motionStyle }) => { - const cls = classNames(bodyCls, motionClassName, uniqueBgClassName, { - [`${bodyCls}-visible`]: motionVisible, + const cls = classNames(containerCls, motionClassName, uniqueContainerClassName, { + [`${containerCls}-visible`]: motionVisible, }); return ( @@ -100,7 +100,7 @@ const UniqueBody = (props: UniqueBodyProps) => { ...cachedOffsetStyleRef.current, ...sizeStyle, ...motionStyle, - ...uniqueBgStyle, + ...uniqueContainerStyle, } as React.CSSProperties } /> @@ -110,4 +110,4 @@ const UniqueBody = (props: UniqueBodyProps) => { ); }; -export default UniqueBody; +export default UniqueContainer; diff --git a/src/UniqueProvider/index.tsx b/src/UniqueProvider/index.tsx index 342b14ce..81f59ece 100644 --- a/src/UniqueProvider/index.tsx +++ b/src/UniqueProvider/index.tsx @@ -12,7 +12,7 @@ import Popup from '../Popup'; import { useEvent } from '@rc-component/util'; import useTargetState from './useTargetState'; import { isDOM } from '@rc-component/util/lib/Dom/findDOMNode'; -import UniqueBody from './UniqueBody'; +import UniqueContainer from './UniqueContainer'; import classNames from 'classnames'; import { getAlignPopupClassName } from '../util'; @@ -223,7 +223,7 @@ const UniqueProvider = ({ maskMotion={mergedOptions.maskMotion} getPopupContainer={mergedOptions.getPopupContainer} > - diff --git a/src/context.ts b/src/context.ts index ddaba6d9..ebcbd2f9 100644 --- a/src/context.ts +++ b/src/context.ts @@ -20,8 +20,8 @@ export interface UniqueShowOptions { delay: number; prefixCls?: string; popupClassName?: string; - uniqueBgClassName?: string; - uniqueBgStyle?: React.CSSProperties; + uniqueContainerClassName?: string; + uniqueContainerStyle?: React.CSSProperties; popupStyle?: React.CSSProperties; popupPlacement?: string; builtinPlacements?: BuildInPlacements; diff --git a/src/index.tsx b/src/index.tsx index 168375b9..16238f50 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -101,10 +101,10 @@ export interface TriggerProps { builtinPlacements?: BuildInPlacements; popupAlign?: AlignType; popupClassName?: string; - /** Pass to `UniqueProvider` FloatBg */ - uniqueBgClassName?: string; - /** Pass to `UniqueProvider` FloatBg */ - uniqueBgStyle?: React.CSSProperties; + /** Pass to `UniqueProvider` UniqueContainer */ + uniqueContainerClassName?: string; + /** Pass to `UniqueProvider` UniqueContainer */ + uniqueContainerStyle?: React.CSSProperties; popupStyle?: React.CSSProperties; getPopupClassNameFromAlign?: (align: AlignType) => string; onPopupClick?: React.MouseEventHandler; @@ -176,8 +176,8 @@ export function generateTrigger( // Popup popup, popupClassName, - uniqueBgClassName, - uniqueBgStyle, + uniqueContainerClassName, + uniqueContainerStyle, popupStyle, popupPlacement, @@ -332,8 +332,8 @@ export function generateTrigger( delay, prefixCls, popupClassName, - uniqueBgClassName, - uniqueBgStyle, + uniqueContainerClassName, + uniqueContainerStyle, popupStyle, popupPlacement, builtinPlacements, diff --git a/tests/unique.test.tsx b/tests/unique.test.tsx index 2450ed4d..688f9b99 100644 --- a/tests/unique.test.tsx +++ b/tests/unique.test.tsx @@ -5,12 +5,12 @@ import { awaitFakeTimer } from './util'; import type { TriggerProps } from '../src'; import classNames from 'classnames'; -// Mock UniqueBody to check if open props changed +// Mock UniqueContainer to check if open props changed global.openChangeLog = []; -jest.mock('../src/UniqueProvider/UniqueBody', () => { - const OriginalUniqueBody = jest.requireActual( - '../src/UniqueProvider/UniqueBody', +jest.mock('../src/UniqueProvider/UniqueContainer', () => { + const OriginalUniqueContainer = jest.requireActual( + '../src/UniqueProvider/UniqueContainer', ).default; const OriginReact = jest.requireActual('react'); @@ -25,7 +25,7 @@ jest.mock('../src/UniqueProvider/UniqueBody', () => { } }, [open]); - return OriginReact.createElement(OriginalUniqueBody, props); + return OriginReact.createElement(OriginalUniqueContainer, props); }; }); @@ -105,7 +105,7 @@ describe('Trigger.Unique', () => { '-hidden', ); expect( - document.querySelector('.rc-trigger-popup-unique-body').className, + document.querySelector('.rc-trigger-popup-unique-container').className, ).not.toContain('-hidden'); // Move from first to second trigger - popup should not hide, but content should change @@ -122,13 +122,13 @@ describe('Trigger.Unique', () => { '-hidden', ); expect( - document.querySelector('.rc-trigger-popup-unique-body').className, + document.querySelector('.rc-trigger-popup-unique-container').className, ).not.toContain('-hidden'); // There should only be one popup element expect(document.querySelectorAll('.rc-trigger-popup').length).toBe(1); expect( - document.querySelectorAll('.rc-trigger-popup-unique-body').length, + document.querySelectorAll('.rc-trigger-popup-unique-container').length, ).toBe(1); // FloatBg open prop should not have changed during transition (no close animation) @@ -184,36 +184,36 @@ describe('Trigger.Unique', () => { expect(popup.className).toContain('rc-trigger-popup-unique-controlled'); }); - it('should apply uniqueBgClassName to UniqueBody component', async () => { - await setupAndOpenPopup({ uniqueBgClassName: 'custom-bg-class' }); + it('should apply uniqueContainerClassName to UniqueContainer component', async () => { + await setupAndOpenPopup({ uniqueContainerClassName: 'custom-container-class' }); - // Check that UniqueBody has the custom background className - const uniqueBody = document.querySelector('.rc-trigger-popup-unique-body'); - expect(uniqueBody).toBeTruthy(); - expect(uniqueBody.className).toContain('custom-bg-class'); + // Check that UniqueContainer has the custom container className + const uniqueContainer = document.querySelector('.rc-trigger-popup-unique-container'); + expect(uniqueContainer).toBeTruthy(); + expect(uniqueContainer.className).toContain('custom-container-class'); }); - it('should apply uniqueBgStyle to UniqueBody component', async () => { + it('should apply uniqueContainerStyle to UniqueContainer component', async () => { await setupAndOpenPopup({ - uniqueBgStyle: { backgroundColor: 'red', border: '1px solid blue' }, + uniqueContainerStyle: { backgroundColor: 'red', border: '1px solid blue' }, }); - // Check that UniqueBody has the custom background style - const uniqueBody = document.querySelector('.rc-trigger-popup-unique-body'); - expect(uniqueBody).toBeTruthy(); - expect(uniqueBody).toHaveStyle({ + // Check that UniqueContainer has the custom container style + const uniqueContainer = document.querySelector('.rc-trigger-popup-unique-container'); + expect(uniqueContainer).toBeTruthy(); + expect(uniqueContainer).toHaveStyle({ backgroundColor: 'red', border: '1px solid blue', }); }); - it('should not apply any additional className to UniqueBody when uniqueBgClassName is not provided', async () => { + it('should not apply any additional className to UniqueContainer when uniqueContainerClassName is not provided', async () => { await setupAndOpenPopup(); - // Check that UniqueBody exists but does not have custom background className - const uniqueBody = document.querySelector('.rc-trigger-popup-unique-body'); - expect(uniqueBody).toBeTruthy(); - expect(uniqueBody.className).not.toContain('undefined'); + // Check that UniqueContainer exists but does not have custom container className + const uniqueContainer = document.querySelector('.rc-trigger-popup-unique-container'); + expect(uniqueContainer).toBeTruthy(); + expect(uniqueContainer.className).not.toContain('undefined'); }); it('should pass alignedClassName on unique body', async () => { @@ -246,13 +246,13 @@ describe('Trigger.Unique', () => { ); expect(document.querySelector('.rc-trigger-popup')).toHaveClass('bamboo'); - expect(document.querySelector('.rc-trigger-popup-unique-body')).toHaveClass( + expect(document.querySelector('.rc-trigger-popup-unique-container')).toHaveClass( 'bamboo', ); // Check that arrow position CSS variables are set - const uniqueBody = document.querySelector('.rc-trigger-popup-unique-body'); - const computedStyle = getComputedStyle(uniqueBody); + const uniqueContainer = document.querySelector('.rc-trigger-popup-unique-container'); + const computedStyle = getComputedStyle(uniqueContainer); expect(computedStyle.getPropertyValue('--arrow-x')).not.toBe(''); expect(computedStyle.getPropertyValue('--arrow-y')).not.toBe(''); });