diff --git a/assets/index.less b/assets/index.less index d7ffee51..6e19bd1f 100644 --- a/assets/index.less +++ b/assets/index.less @@ -74,8 +74,8 @@ } } - // =============== Float BG =============== - &-float-bg { + // =============== Unique Body =============== + &-unique-body { position: absolute; z-index: 0; box-sizing: border-box; diff --git a/src/UniqueProvider/FloatBg.tsx b/src/UniqueProvider/UniqueBody.tsx similarity index 83% rename from src/UniqueProvider/FloatBg.tsx rename to src/UniqueProvider/UniqueBody.tsx index 1f8338db..9175c771 100644 --- a/src/UniqueProvider/FloatBg.tsx +++ b/src/UniqueProvider/UniqueBody.tsx @@ -5,8 +5,8 @@ import CSSMotion from '@rc-component/motion'; import type { CSSMotionProps } from '@rc-component/motion'; import type { AlignType } from '../interface'; -export interface FloatBgProps { - prefixCls: string; // ${prefixCls}-float-bg +export interface UniqueBodyProps { + prefixCls: string; // ${prefixCls}-unique-body isMobile: boolean; ready: boolean; open: boolean; @@ -21,7 +21,7 @@ export interface FloatBgProps { uniqueBgStyle?: React.CSSProperties; } -const FloatBg = (props: FloatBgProps) => { +const UniqueBody = (props: UniqueBodyProps) => { const { prefixCls, isMobile, @@ -38,7 +38,7 @@ const FloatBg = (props: FloatBgProps) => { uniqueBgStyle, } = props; - const floatBgCls = `${prefixCls}-float-bg`; + const bodyCls = `${prefixCls}-unique-body`; const [motionVisible, setMotionVisible] = React.useState(false); @@ -68,7 +68,7 @@ const FloatBg = (props: FloatBgProps) => { motionEnter motionLeave removeOnLeave={false} - leavedClassName={`${floatBgCls}-hidden`} + leavedClassName={`${bodyCls}-hidden`} {...motion} visible={open} onVisibleChanged={(nextVisible) => { @@ -76,8 +76,8 @@ const FloatBg = (props: FloatBgProps) => { }} > {({ className: motionClassName, style: motionStyle }) => { - const cls = classNames(floatBgCls, motionClassName, uniqueBgClassName, { - [`${floatBgCls}-visible`]: motionVisible, + const cls = classNames(bodyCls, motionClassName, uniqueBgClassName, { + [`${bodyCls}-visible`]: motionVisible, }); return ( @@ -96,4 +96,4 @@ const FloatBg = (props: FloatBgProps) => { ); }; -export default FloatBg; +export default UniqueBody; diff --git a/src/UniqueProvider/index.tsx b/src/UniqueProvider/index.tsx index 87b2c094..92c74867 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 FloatBg from './FloatBg'; +import UniqueBody from './UniqueBody'; import classNames from 'classnames'; import { getAlignPopupClassName } from '../util'; @@ -204,7 +204,7 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => { maskMotion={options.maskMotion} // getPopupContainer={options.getPopupContainer} > - { - const OriginalFloatBg = jest.requireActual( - '../src/UniqueProvider/FloatBg', +jest.mock('../src/UniqueProvider/UniqueBody', () => { + const OriginalUniqueBody = jest.requireActual( + '../src/UniqueProvider/UniqueBody', ).default; const OriginReact = jest.requireActual('react'); @@ -24,7 +24,7 @@ jest.mock('../src/UniqueProvider/FloatBg', () => { } }, [open]); - return OriginReact.createElement(OriginalFloatBg, props); + return OriginReact.createElement(OriginalUniqueBody, props); }; }); @@ -103,7 +103,7 @@ describe('Trigger.Unique', () => { '-hidden', ); expect( - document.querySelector('.rc-trigger-popup-float-bg').className, + document.querySelector('.rc-trigger-popup-unique-body').className, ).not.toContain('-hidden'); // Move from first to second trigger - popup should not hide, but content should change @@ -120,12 +120,12 @@ describe('Trigger.Unique', () => { '-hidden', ); expect( - document.querySelector('.rc-trigger-popup-float-bg').className, + document.querySelector('.rc-trigger-popup-unique-body').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-float-bg').length).toBe( + expect(document.querySelectorAll('.rc-trigger-popup-unique-body').length).toBe( 1, ); @@ -182,33 +182,33 @@ describe('Trigger.Unique', () => { expect(popup.className).toContain('rc-trigger-popup-unique-controlled'); }); - it('should apply uniqueBgClassName to FloatBg component', async () => { + it('should apply uniqueBgClassName to UniqueBody 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'); + // 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'); }); - it('should apply uniqueBgStyle to FloatBg component', async () => { + it('should apply uniqueBgStyle to UniqueBody 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({ + // Check that UniqueBody has the custom background style + const uniqueBody = document.querySelector('.rc-trigger-popup-unique-body'); + expect(uniqueBody).toBeTruthy(); + expect(uniqueBody).toHaveStyle({ backgroundColor: 'red', border: '1px solid blue', }); }); - it('should not apply any additional className to FloatBg when uniqueBgClassName is not provided', async () => { + it('should not apply any additional className to UniqueBody 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'); + // 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'); }); });