From 953fe6fa7eb46a0ddfe99b9d78cf37f31858d6ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Fri, 24 Nov 2023 16:17:52 +0800 Subject: [PATCH] fix: Fix image group preview z index in nested modal (#46035) * fix: Fixed Image.PreviewGroup preview in a nested modal where z-index Settings did not meet expectations * fix: Fixed Image.PreviewGroup preview in a nested modal where z-index Settings did not meet expectations * fix: Fixed Image.PreviewGroup preview in a nested modal where z-index Settings did not meet expectations * test: update test case * test: update test case * bump: rc-menu@7.5.1 * feat: optimize code * feat: optimize code * feat: optimize code --- components/_util/__tests__/useZIndex.test.tsx | 45 +++++++--- components/image/PreviewGroup.tsx | 7 ++ .../__snapshots__/demo-extend.test.ts.snap | 13 +++ .../__tests__/__snapshots__/demo.test.ts.snap | 11 +++ components/image/__tests__/index.test.tsx | 68 +++++++++++++++ components/image/demo/nested.md | 7 ++ components/image/demo/nested.tsx | 85 +++++++++++++++++++ components/image/index.en-US.md | 1 + components/image/index.zh-CN.md | 1 + package.json | 2 +- 10 files changed, 228 insertions(+), 12 deletions(-) create mode 100644 components/image/demo/nested.md create mode 100644 components/image/demo/nested.tsx diff --git a/components/_util/__tests__/useZIndex.test.tsx b/components/_util/__tests__/useZIndex.test.tsx index be5da90d13..1eb36b7571 100644 --- a/components/_util/__tests__/useZIndex.test.tsx +++ b/components/_util/__tests__/useZIndex.test.tsx @@ -180,13 +180,23 @@ const consumerComponent: Record , ImagePreview: ({ rootClassName }: ImageProps) => ( - + <> + + + + + ), }; @@ -207,7 +217,12 @@ function getConsumerSelector(baseSelector: string, consumer: ZIndexConsumer): st } else if (['Menu'].includes(consumer)) { selector = `${baseSelector}.ant-menu-submenu-placement-rightTop`; } else if (consumer === 'ImagePreview') { - selector = `${baseSelector}.comp-ImagePreview`; + selector = ['ImagePreview', 'ImagePreviewGroup'] + .map( + (item) => + `${baseSelector}.comp-${item} .ant-image-preview-wrap, ${baseSelector}.comp-${item}.ant-image-preview-operations-wrapper`, + ) + .join(','); } return selector; } @@ -276,7 +291,7 @@ describe('Test useZIndex hooks', () => { const selector2 = getConsumerSelector('.consumer2', key as ZIndexConsumer); const selector3 = getConsumerSelector('.consumer3', key as ZIndexConsumer); - if (['SelectLike', 'DatePicker'].includes(key)) { + if (['SelectLike', 'DatePicker', 'ImagePreview'].includes(key)) { let comps = document.querySelectorAll(selector1); comps.forEach((comp) => { expect((comp as HTMLDivElement).style.zIndex).toBeFalsy(); @@ -287,11 +302,15 @@ describe('Test useZIndex hooks', () => { const consumerOffset = isColorPicker ? containerBaseZIndexOffset.Popover : consumerBaseZIndexOffset[key as ZIndexConsumer]; + const operOffset = comp.classList.contains('ant-image-preview-operations-wrapper') + ? 1 + : 0; expect((comp as HTMLDivElement).style.zIndex).toBe( String( 1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer] + - consumerOffset, + consumerOffset + + operOffset, ), ); }); @@ -302,11 +321,15 @@ describe('Test useZIndex hooks', () => { const consumerOffset = isColorPicker ? containerBaseZIndexOffset.Popover : consumerBaseZIndexOffset[key as ZIndexConsumer]; + const operOffset = comp.classList.contains('ant-image-preview-operations-wrapper') + ? 1 + : 0; expect((comp as HTMLDivElement).style.zIndex).toBe( String( 1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer] * 2 + - consumerOffset, + consumerOffset + + operOffset, ), ); }); diff --git a/components/image/PreviewGroup.tsx b/components/image/PreviewGroup.tsx index 136843e2c5..9ef37b476d 100644 --- a/components/image/PreviewGroup.tsx +++ b/components/image/PreviewGroup.tsx @@ -15,6 +15,7 @@ import { getTransitionName } from '../_util/motion'; // CSSINJS import useStyle from './style'; +import { useZIndex } from '../_util/hooks/useZIndex'; export const icons = { rotateLeft: , @@ -40,6 +41,11 @@ const InternalPreviewGroup: React.FC = ({ const [wrapSSR, hashId] = useStyle(prefixCls); + const [zIndex] = useZIndex( + 'ImagePreview', + typeof preview === 'object' ? preview.zIndex : undefined, + ); + const mergedPreview = React.useMemo(() => { if (preview === false) { return preview; @@ -52,6 +58,7 @@ const InternalPreviewGroup: React.FC = ({ transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName), maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName), rootClassName: mergedRootClassName, + zIndex, }; }, [preview]); diff --git a/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap index 54510148b1..4867f42d18 100644 --- a/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/image/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -349,6 +349,19 @@ exports[`renders components/image/demo/imageRender.tsx extend context correctly exports[`renders components/image/demo/imageRender.tsx extend context correctly 2`] = `[]`; +exports[`renders components/image/demo/nested.tsx extend context correctly 1`] = ` + +`; + +exports[`renders components/image/demo/nested.tsx extend context correctly 2`] = `[]`; + exports[`renders components/image/demo/placeholder.tsx extend context correctly 1`] = `
`; +exports[`renders components/image/demo/nested.tsx correctly 1`] = ` + +`; + exports[`renders components/image/demo/placeholder.tsx correctly 1`] = `
{ expect(baseElement.querySelector('.test-root-class')).toBeTruthy(); }); + it('Image.PreviewGroup preview in a nested modal where z-index Settings should be correct', () => { + const App = () => ( + + + + + + + + + + + + ); + const { baseElement } = render(); + + fireEvent.click(baseElement.querySelector('.ant-image')!); + + expect( + ( + baseElement.querySelector( + '.test-image-preview-class .ant-image-preview-wrap', + ) as HTMLElement + ).style.zIndex, + ).toBe('1301'); + expect( + ( + baseElement.querySelector( + '.test-image-preview-class.ant-image-preview-operations-wrapper', + ) as HTMLElement + ).style.zIndex, + ).toBe('1302'); + + fireEvent.click(baseElement.querySelectorAll('.ant-image')[1]!); + + expect( + ( + baseElement.querySelector( + '.test-image-preview-group-class .ant-image-preview-wrap', + ) as HTMLElement + ).style.zIndex, + ).toBe('1301'); + expect( + ( + baseElement.querySelector( + '.test-image-preview-group-class.ant-image-preview-operations-wrapper', + ) as HTMLElement + ).style.zIndex, + ).toBe('1302'); + }); }); diff --git a/components/image/demo/nested.md b/components/image/demo/nested.md new file mode 100644 index 0000000000..6613b966fc --- /dev/null +++ b/components/image/demo/nested.md @@ -0,0 +1,7 @@ +## zh-CN + +嵌套在弹框当中使用 + +## en-US + +Nested in the modal diff --git a/components/image/demo/nested.tsx b/components/image/demo/nested.tsx new file mode 100644 index 0000000000..2face1360a --- /dev/null +++ b/components/image/demo/nested.tsx @@ -0,0 +1,85 @@ +import React, { useState } from 'react'; +import { Button, Divider, Image, Modal } from 'antd'; + +const App: React.FC = () => { + const [show1, setShow1] = useState(false); + const [show2, setShow2] = useState(false); + const [show3, setShow3] = useState(false); + return ( + <> + + { + setShow1(open); + }} + onCancel={() => { + setShow1(false); + }} + > + + { + setShow2(open); + }} + onCancel={() => { + setShow2(false); + }} + > + + { + setShow3(open); + }} + onCancel={() => { + setShow3(false); + }} + > + + + + console.log(`current index: ${current}, prev index: ${prev}`), + }} + > + + + + + + + + ); +}; + +export default App; diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md index 04f1265766..265c91ecd3 100644 --- a/components/image/index.en-US.md +++ b/components/image/index.en-US.md @@ -27,6 +27,7 @@ Previewable image. Custom toolbar render Custom preview render Custom preview mask +nested Top progress customization when previewing multiple images Custom component token diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md index f5d49c2b87..6c33b65f66 100644 --- a/components/image/index.zh-CN.md +++ b/components/image/index.zh-CN.md @@ -28,6 +28,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA 自定义工具栏 自定义预览内容 自定义预览文本 +嵌套 多图预览时顶部进度自定义 自定义组件 Token diff --git a/package.json b/package.json index 02ccb67559..5a498a325e 100644 --- a/package.json +++ b/package.json @@ -133,7 +133,7 @@ "rc-drawer": "~6.5.2", "rc-dropdown": "~4.1.0", "rc-field-form": "~1.40.0", - "rc-image": "~7.5.0", + "rc-image": "~7.5.1", "rc-input": "~1.3.6", "rc-input-number": "~8.4.0", "rc-mentions": "~2.9.1",