test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

fix: should not display overlay when the content is null/undefined (#50064)

Browse Source 
* fix: content结果为null的情况不显示overlay

* fix: 兼容undefined与null

* Update index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Update getRenderPropValue.ts

Signed-off-by: lijianan <574980606@qq.com>

* chore: update snap

* Update index.test.tsx

Signed-off-by: lijianan <574980606@qq.com>

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: H JY <huangjunyi@ama-auto.com>
Co-authored-by: lijianan <574980606@qq.com>
This commit is contained in:
LLmoskk 2024-07-26 13:38:55 +08:00 committed by GitHub
parent 96094b0b7d
commit 1fe95ecffa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/popover/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -27,9 +27,6 @@ Array [
>
RTL
</div>
<div
class="ant-popover-inner-content"
/>
</div>
</div>
</div>,

13
components/popover/__tests__/index.test.tsx
View File

@ -124,4 +124,17 @@ describe('Popover', () => {
fireEvent.keyDown(triggerNode, { key: 'Escape', keyCode: 27 });
expect(onOpenChange).toHaveBeenLastCalledWith(false, eventObject);
});
it('should not display overlay when the content is null/undefined', () => {
[null, undefined].forEach((item) => {
const { container } = render(
<Popover title={() => item} content={() => item} trigger="click">
<span>show me your code</span>
</Popover>,
);
fireEvent.click(container.querySelector<HTMLSpanElement>('span')!);
const popup = document.querySelector('.ant-popover');
expect(popup).toBe(null);
});
});
});

15
components/popover/index.tsx
View File

@ -25,14 +25,14 @@ export interface PopoverProps extends AbstractTooltipProps {
interface OverlayProps {
prefixCls?: string;
title?: PopoverProps['title'];
content?: PopoverProps['content'];
title?: React.ReactNode;
content?: React.ReactNode;
}
const Overlay: React.FC<OverlayProps> = ({ title, content, prefixCls }) => (
<>
{title && <div className={`${prefixCls}-title`}>{getRenderPropValue(title)}</div>}
<div className={`${prefixCls}-inner-content`}>{getRenderPropValue(content)}</div>
{title && <div className={`${prefixCls}-title`}>{title}</div>}
{content && <div className={`${prefixCls}-inner-content`}>{content}</div>}
</>
);
@ -81,6 +81,9 @@ const InternalPopover = React.forwardRef<TooltipRef, PopoverProps>((props, ref)
settingOpen(value);
};
const titleNode = getRenderPropValue(title);
const contentNode = getRenderPropValue(content);
return wrapCSSVar(
<Tooltip
placement={placement}
@ -95,7 +98,9 @@ const InternalPopover = React.forwardRef<TooltipRef, PopoverProps>((props, ref)
open={open}
onOpenChange={onInternalOpenChange}
overlay={
title || content ? <Overlay prefixCls={prefixCls} title={title} content={content} /> : null
titleNode || contentNode ? (
<Overlay prefixCls={prefixCls} title={titleNode} content={contentNode} />
) : null
}
transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
data-popover-inject