mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 13:09:40 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

fix: Fixed the getContainer property in Image not reading the settings in ConfigProvider (#36002)

Browse Source 
* fix: 35942

* test: 添加测试用例

* fix:

* fix:
This commit is contained in:
苯苯 2022-06-11 13:54:50 +08:00 committed by GitHub
parent c7aa754efe
commit c7638a9294
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/image/__tests__/index.test.js
View File

@ -1,8 +1,9 @@
import React from 'react';
import { render, fireEvent } from '../../../tests/utils';
import Image from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { fireEvent, render } from '../../../tests/utils';
import ConfigProvider from '../../config-provider';
const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
@ -76,4 +77,17 @@ describe('Image', () => {
expect(baseElement.querySelector('.ant-image-preview')).toHaveClass('abc');
expect(baseElement.querySelector('.ant-image-preview-mask')).toHaveClass('def');
});
it('ConfigProvider getPopupContainer', () => {
const { container: wrapper, baseElement } = render(
<>
<div className="container" />
<ConfigProvider getPopupContainer={() => document.querySelector('.container')}>
<Image src={src} />
</ConfigProvider>
</>,
);
fireEvent.click(wrapper.querySelector('.ant-image'));
const containerElement = baseElement.querySelector('.container');
expect(containerElement.children.length).not.toBe(0);
});
});

12
components/image/index.tsx
View File

@ -16,7 +16,12 @@ const Image: CompositionImage<ImageProps> = ({
preview,
...otherProps
}) => {
const { getPrefixCls, locale: contextLocale = defaultLocale } = useContext(ConfigContext);
const {
getPrefixCls,
locale: contextLocale = defaultLocale,
getPopupContainer: getContextPopupContainer,
} = useContext(ConfigContext);
const prefixCls = getPrefixCls('image', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
@ -27,7 +32,7 @@ const Image: CompositionImage<ImageProps> = ({
return preview;
}
const _preview = typeof preview === 'object' ? preview : {};
const { getContainer, ...restPreviewProps } = _preview;
return {
mask: (
<div className={`${prefixCls}-mask-info`}>
@ -36,7 +41,8 @@ const Image: CompositionImage<ImageProps> = ({
</div>
),
icons,
..._preview,
...restPreviewProps,
getContainer: getContainer || getContextPopupContainer,
transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
};