Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/UniqueProvider/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,10 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => {
offsetY={offsetY}
popupSize={popupSize}
motion={options.popupMotion}
uniqueBgClassName={options.uniqueBgClassName}
uniqueBgClassName={classNames(
options.uniqueBgClassName,
alignedClassName,
)}
uniqueBgStyle={options.uniqueBgStyle}
/>
</Popup>
Expand Down
52 changes: 52 additions & 0 deletions tests/unique.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -211,4 +211,56 @@ describe('Trigger.Unique', () => {
expect(uniqueBody).toBeTruthy();
expect(uniqueBody.className).not.toContain('undefined');
});

it('should combine alignedClassName with uniqueBgClassName', async () => {
const getPopupClassNameFromAlign = (align: any) => {
return `custom-align-${align.points?.[0] || 'default'}`;
};

const { container } = render(
<UniqueProvider>
<Trigger
action={['click']}
popup={<strong className="x-content">tooltip</strong>}
unique
popupPlacement="bottomLeft"
builtinPlacements={{
bottomLeft: {
points: ['tl', 'bl'],
offset: [0, 4],
overflow: {
adjustX: 0,
adjustY: 1,
},
},
}}
getPopupClassNameFromAlign={getPopupClassNameFromAlign}
uniqueBgClassName="custom-bg-class"
>
<div className="target">click me</div>
</Trigger>
</UniqueProvider>,
);

// 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();

// Wait a bit more for alignment to complete
await awaitFakeTimer();

// Check that popup exists
const popup = document.querySelector('.rc-trigger-popup');
expect(popup).toBeTruthy();
expect(popup.querySelector('.x-content').textContent).toBe('tooltip');

// Check that both custom background className and aligned className are applied to UniqueBody
const uniqueBody = document.querySelector('.rc-trigger-popup-unique-body');
expect(uniqueBody).toBeTruthy();
expect(uniqueBody.className).toContain('custom-bg-class');
expect(uniqueBody.className).toContain('custom-align');
});
});
Loading