test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

fix: Image inline rendering not work when getContainer is false (#47034)

Browse Source 
* fix: Image 组件 preview.getContainer=false 内联渲染不生效

* refactor: Image.preview.getContainer 空值合并逻辑

---------

Co-authored-by: 莫青 <zhengyudong.zyd@alibaba-inc.com>
This commit is contained in:
yudong 2024-01-18 18:04:44 +08:00 committed by GitHub
parent 023f3ec719
commit a7cff93db7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/image/__tests__/index.test.tsx
View File

@ -55,12 +55,19 @@ describe('Image', () => {
const { container, baseElement } = render( const { container, baseElement } = render(
<Image <Image
src={src} src={src}
preview={{ visible: true, transitionName: 'abc', maskTransitionName: 'def' }} preview={{
visible: true,
transitionName: 'abc',
maskTransitionName: 'def',
getContainer: false,
}}
/>, />,
); );
fireEvent.click(container.querySelector('.ant-image')!); fireEvent.click(container.querySelector('.ant-image')!);
expect(container.querySelector('.ant-image-preview-root')).not.toBe(null);
expect(baseElement.querySelector('.ant-image-preview')).toHaveClass('abc'); expect(baseElement.querySelector('.ant-image-preview')).toHaveClass('abc');
expect(baseElement.querySelector('.ant-image-preview-mask')).toHaveClass('def'); expect(baseElement.querySelector('.ant-image-preview-mask')).toHaveClass('def');
}); });

4
components/image/index.tsx
View File

@ -49,7 +49,7 @@ const Image: CompositionImage<ImageProps> = (props) => {
typeof preview === 'object' ? preview.zIndex : undefined, typeof preview === 'object' ? preview.zIndex : undefined,
); );
const mergedPreview = React.useMemo(() => { const mergedPreview = React.useMemo<ImageProps['preview']>(() => {
if (preview === false) { if (preview === false) {
return preview; return preview;
} }
@ -64,7 +64,7 @@ const Image: CompositionImage<ImageProps> = (props) => {
), ),
icons, icons,
...restPreviewProps, ...restPreviewProps,
getContainer: getContainer || getContextPopupContainer, getContainer: getContainer ?? getContextPopupContainer,
transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName), transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName), maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
zIndex, zIndex,