feat(image): Preview support rootClassName (#41265)

components/image/PreviewGroup.tsx

@@ -9,6 +9,7 @@ import ZoomOutOutlined from '@ant-design/icons/ZoomOutOutlined';
 import RcImage from 'rc-image';
 import type { GroupConsumerProps } from 'rc-image/lib/PreviewGroup';
 import * as React from 'react';
+import classNames from 'classnames';
 import { ConfigContext } from '../config-provider';
 import { getTransitionName } from '../_util/motion';
 
@@ -44,12 +45,13 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
       return preview;
     }
     const _preview = typeof preview === 'object' ? preview : {};
+    const mergedRootClassName = classNames(hashId, _preview.rootClassName ?? '');
 
     return {
       ..._preview,
       transitionName: getTransitionName(rootPrefixCls, 'zoom', _preview.transitionName),
       maskTransitionName: getTransitionName(rootPrefixCls, 'fade', _preview.maskTransitionName),
-      rootClassName: hashId,
+      rootClassName: mergedRootClassName,
     };
   }, [preview]);
 

components/image/__tests__/index.test.tsx

@@ -105,4 +105,15 @@ describe('Image', () => {
     fireEvent.load(baseElement.querySelector('.ant-image-preview-img')!);
     expect(onLoadCb).toHaveBeenCalled();
   });
+  it('Preview should support rootClassName', () => {
+    const { container, baseElement } = render(
+      <Image.PreviewGroup preview={{ visible: true, rootClassName: 'test-root-class' }}>
+        <Image src={src} />
+      </Image.PreviewGroup>,
+    );
+
+    fireEvent.click(container.querySelector('.ant-image')!);
+
+    expect(baseElement.querySelector('.test-root-class')).toBeTruthy();
+  });
 });

components/image/index.en-US.md

@@ -51,6 +51,7 @@ Previewable image.
   src?: string; // v4.10.0
   mask?: ReactNode; // v4.9.0
   maskClassName?: string; // v4.11.0
+  rootClassName?: string; // only support after v5.4.0
   current?: number; // v4.12.0 Only support PreviewGroup
   countRender?: (current: number, total: number) => string  // v4.20.0 Only support PreviewGroup
   scaleStep?: number;

components/image/index.zh-CN.md

@@ -52,6 +52,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
   src?: string; // v4.10.0
   mask?: ReactNode; // v4.9.0
   maskClassName?: string; // v4.11.0
+  rootClassName?: string; // v5.4.0后支持
   current?: number; // v4.12.0 仅支持 PreviewGroup
   countRender?: (current: number, total: number) => string  // v4.20.0 仅支持 PreviewGroup
   scaleStep?: number;