chore: adjust classNames and styles

src/Image.tsx

@@ -35,8 +35,8 @@ export interface ImagePreviewType
   getContainer?: GetContainer | false;
   mask?: React.ReactNode;
   maskClassName?: string;
-  classNames?: Partial<Record<SemanticName, string>>;
-  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+  classNames?: Partial<Record<PreviewSemanticName, string>>;
+  styles?: Partial<Record<PreviewSemanticName, React.CSSProperties>>;
   icons?: PreviewProps['icons'];
   scaleStep?: number;
   movable?: boolean;
@@ -52,6 +52,7 @@ export interface ImagePreviewType
 }
 
 export type SemanticName = 'root' | 'actions' | 'mask';
+export type PreviewSemanticName = 'actions' | 'mask';
 
 export interface ImageProps
   extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder' | 'onClick'> {
@@ -64,6 +65,8 @@ export interface ImageProps
   placeholder?: React.ReactNode;
   fallback?: string;
   rootClassName?: string;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
   preview?: boolean | ImagePreviewType;
   /**
    * @deprecated since version 3.2.1
@@ -96,6 +99,8 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     wrapperClassName,
     wrapperStyle,
     rootClassName,
+    classNames: imageClassNames,
+    styles: imageStyles,
     ...otherProps
   } = props;
 
@@ -107,8 +112,8 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     getContainer: getPreviewContainer = undefined,
     mask: previewMask,
     maskClassName,
-    classNames: imageClassNames,
-    styles,
+    classNames: previewClassNames,
+    styles: previewStyles,
     movable,
     icons,
     scaleStep,
@@ -187,7 +192,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
 
   // =========================== Render ===========================
   return (
-    <>
+    <div className={rootClassName} style={imageStyles?.root}>
       <div
         {...otherProps}
         className={wrapperClass}
@@ -230,7 +235,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
             className={cn(`${prefixCls}-mask`, maskClassName, imageClassNames?.mask)}
             style={{
               display: style?.display === 'none' ? 'none' : undefined,
-              ...styles?.mask,
+              ...imageStyles?.mask,
             }}
           >
             {previewMask}
@@ -258,12 +263,12 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
           imageRender={imageRender}
           imgCommonProps={imgCommonProps}
           toolbarRender={toolbarRender}
-          classNames={imageClassNames}
-          styles={styles}
+          classNames={previewClassNames}
+          styles={previewStyles}
           {...dialogProps}
         />
       )}
-    </>
+    </div>
   );
 };
 

src/Operations.tsx

@@ -4,7 +4,7 @@ import CSSMotion from '@rc-component/motion';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import * as React from 'react';
 import { useContext } from 'react';
-import type { ImgInfo, SemanticName } from './Image';
+import type { ImgInfo, PreviewSemanticName } from './Image';
 import type { PreviewProps, ToolbarRenderInfoType } from './Preview';
 import { PreviewGroupContext } from './context';
 import type { TransformType } from './hooks/useImageTransform';
@@ -62,8 +62,8 @@ interface OperationsProps
   ) => React.ReactNode;
   zIndex?: number;
   image?: ImgInfo;
-  classNames?: Partial<Record<SemanticName, string>>;
-  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+  classNames?: Partial<Record<PreviewSemanticName, string>>;
+  styles?: Partial<Record<PreviewSemanticName, React.CSSProperties>>;
 }
 
 const Operations: React.FC<OperationsProps> = props => {

src/Preview.tsx

@@ -3,7 +3,7 @@ import Dialog from '@rc-component/dialog';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import classnames from 'classnames';
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import type { ImgInfo, SemanticName } from './Image';
+import type { ImgInfo, PreviewSemanticName } from './Image';
 import Operations from './Operations';
 import { PreviewGroupContext } from './context';
 import type { TransformAction, TransformType } from './hooks/useImageTransform';
@@ -51,6 +51,9 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose' | 'styles
   };
   fallback?: string;
   movable?: boolean;
+  /**
+   * @deprecated please use `Image.rootClassName` instead
+   */
   rootClassName?: string;
   icons?: {
     rotateLeft?: React.ReactNode;
@@ -81,8 +84,8 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose' | 'styles
     info: ToolbarRenderInfoType,
   ) => React.ReactNode;
   onChange?: (current, prev) => void;
-  classNames?: Partial<Record<SemanticName, string>>;
-  styles?: Partial<Record<SemanticName, React.CSSProperties>> & {
+  classNames?: Partial<Record<PreviewSemanticName, string>>;
+  styles?: Partial<Record<PreviewSemanticName, React.CSSProperties>> & {
     /** Temporarily used in PurePanel, not used externally by antd */
     wrapper?: React.CSSProperties;
   };
@@ -311,8 +314,7 @@ const Preview: React.FC<PreviewProps> = props => {
           mask: styles?.mask,
           wrapper: styles?.wrapper,
         }}
-        style={styles?.root}
-        rootClassName={classnames(rootClassName, imageClassNames?.root)}
+        rootClassName={classnames(rootClassName)}
         getContainer={getContainer}
         {...restProps}
         afterClose={onAfterClose}

tests/__snapshots__/basic.test.tsx.snap

@@ -1,14 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Basic snapshot 1`] = `
-<div
-  class="rc-image"
-  style="width: 200px;"
->
-  <img
-    class="rc-image-img"
-    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-    width="200"
-  />
+<div>
+  <div
+    class="rc-image"
+    style="width: 200px;"
+  >
+    <img
+      class="rc-image-img"
+      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+      width="200"
+    />
+  </div>
 </div>
 `;

tests/__snapshots__/preview.test.tsx.snap

@@ -2,25 +2,33 @@
 
 exports[`Preview add rootClassName should be correct 1`] = `
 <div
-  class="rc-image custom-className"
+  class="custom-className"
 >
-  <img
-    class="rc-image-img"
-    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-  />
+  <div
+    class="rc-image custom-className"
+  >
+    <img
+      class="rc-image-img"
+      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+    />
+  </div>
 </div>
 `;
 
 exports[`Preview add rootClassName should be correct when open preview 1`] = `
 [
   <div>
     <div
-      class="rc-image custom-className"
+      class="custom-className"
     >
-      <img
-        class="rc-image-img"
-        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-      />
+      <div
+        class="rc-image custom-className"
+      >
+        <img
+          class="rc-image-img"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+      </div>
     </div>
   </div>,
   <div>

tests/preview.test.tsx

@@ -700,7 +700,7 @@ describe('Preview', () => {
     const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
     const { container, asFragment } = render(<Image src={src} rootClassName="custom-className" />);
 
-    expect(container.querySelectorAll('.custom-className')).toHaveLength(1);
+    expect(container.querySelectorAll('.custom-className')).toHaveLength(2);
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
@@ -1034,12 +1034,10 @@ describe('Preview', () => {
     const customClassnames = {
       mask: 'custom-mask',
       actions: 'custom-actions',
-      root: 'custom-root',
     };
     const customStyles = {
       mask: { color: 'red' },
       actions: { backgroundColor: 'blue' },
-      root: { border: '1px solid green' },
     };
     const { baseElement } = render(
       <Image
@@ -1053,13 +1051,11 @@ describe('Preview', () => {
         }}
       />,
     );
-    const mask = document.querySelector('.rc-image-mask');
+    const mask = document.querySelector('.rc-image-preview-mask');
     const actions = baseElement.querySelector('.rc-image-preview-operations');
     expect(mask).toHaveClass(customClassnames.mask);
     expect(mask).toHaveStyle(customStyles.mask);
     expect(actions).toHaveClass(customClassnames.actions);
     expect(actions).toHaveStyle(customStyles.actions);
-    expect(baseElement.querySelector('.rc-image-preview-root')).toHaveClass(customClassnames.root);
-    expect(baseElement.querySelector('.rc-image-preview')).toHaveStyle(customStyles.root);
   });
 });