feat: support classnames and styles (#378)

* feat: support classnames and styles

* fix

* Temporarily used in PurePanel, not used externally

Author: thinkasany

src/Image.tsx

@@ -35,6 +35,8 @@ export interface ImagePreviewType
   getContainer?: GetContainer | false;
   mask?: React.ReactNode;
   maskClassName?: string;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
   icons?: PreviewProps['icons'];
   scaleStep?: number;
   movable?: boolean;
@@ -49,6 +51,8 @@ export interface ImagePreviewType
   ) => React.ReactNode;
 }
 
+export type SemanticName = 'root' | 'actions' | 'mask';
+
 export interface ImageProps
   extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder' | 'onClick'> {
   // Original
@@ -92,7 +96,6 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     wrapperClassName,
     wrapperStyle,
     rootClassName,
-
     ...otherProps
   } = props;
 
@@ -104,6 +107,8 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     getContainer: getPreviewContainer = undefined,
     mask: previewMask,
     maskClassName,
+    classNames: imageClassNames,
+    styles,
     movable,
     icons,
     scaleStep,
@@ -222,9 +227,10 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
         {/* Preview Click Mask */}
         {previewMask && canPreview && (
           <div
-            className={cn(`${prefixCls}-mask`, maskClassName)}
+            className={cn(`${prefixCls}-mask`, maskClassName, imageClassNames?.mask)}
             style={{
               display: style?.display === 'none' ? 'none' : undefined,
+              ...styles?.mask,
             }}
           >
             {previewMask}
@@ -252,6 +258,8 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
           imageRender={imageRender}
           imgCommonProps={imgCommonProps}
           toolbarRender={toolbarRender}
+          classNames={imageClassNames}
+          styles={styles}
           {...dialogProps}
         />
       )}

src/Operations.tsx

@@ -4,10 +4,11 @@ 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 } from './Image';
+import type { ImgInfo, SemanticName } from './Image';
 import type { PreviewProps, ToolbarRenderInfoType } from './Preview';
 import { PreviewGroupContext } from './context';
 import type { TransformType } from './hooks/useImageTransform';
+import classNames from 'classnames';
 
 type OperationType =
   | 'prev'
@@ -61,6 +62,8 @@ interface OperationsProps
   ) => React.ReactNode;
   zIndex?: number;
   image?: ImgInfo;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
 
 const Operations: React.FC<OperationsProps> = props => {
@@ -93,6 +96,8 @@ const Operations: React.FC<OperationsProps> = props => {
     toolbarRender,
     zIndex,
     image,
+    classNames: imageClassNames,
+    styles,
   } = props;
   const groupContext = useContext(PreviewGroupContext);
   const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right, flipX, flipY } = icons;
@@ -195,7 +200,10 @@ const Operations: React.FC<OperationsProps> = props => {
   });
 
   const toolbarNode = (
-    <div className={`${prefixCls}-operations`}>
+    <div
+      className={classNames(`${prefixCls}-operations`, imageClassNames?.actions)}
+      style={styles?.actions}
+    >
       {flipYNode}
       {flipXNode}
       {rotateLeftNode}

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 } from './Image';
+import type { ImgInfo, SemanticName } from './Image';
 import Operations from './Operations';
 import { PreviewGroupContext } from './context';
 import type { TransformAction, TransformType } from './hooks/useImageTransform';
@@ -41,7 +41,7 @@ export type ToolbarRenderInfoType = {
   image: ImgInfo;
 };
 
-export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
+export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose' | 'styles' | 'classNames'> {
   imgCommonProps?: React.ImgHTMLAttributes<HTMLImageElement>;
   src?: string;
   alt?: string;
@@ -81,6 +81,11 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
     info: ToolbarRenderInfoType,
   ) => React.ReactNode;
   onChange?: (current, prev) => void;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>> & {
+    /** Temporarily used in PurePanel, not used externally by antd */
+    wrapper?: React.CSSProperties;
+  };
 }
 
 interface PreviewImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
@@ -133,6 +138,8 @@ const Preview: React.FC<PreviewProps> = props => {
     toolbarRender,
     onTransform,
     onChange,
+    classNames: imageClassNames,
+    styles,
     ...restProps
   } = props;
 
@@ -298,8 +305,14 @@ const Preview: React.FC<PreviewProps> = props => {
         visible={visible}
         classNames={{
           wrapper: wrapClassName,
+          mask: imageClassNames?.mask,
         }}
-        rootClassName={rootClassName}
+        styles={{
+          mask: styles?.mask,
+          wrapper: styles?.wrapper,
+        }}
+        style={styles?.root}
+        rootClassName={classnames(rootClassName, imageClassNames?.root)}
         getContainer={getContainer}
         {...restProps}
         afterClose={onAfterClose}
@@ -339,6 +352,8 @@ const Preview: React.FC<PreviewProps> = props => {
         onReset={onReset}
         zIndex={restProps.zIndex !== undefined ? restProps.zIndex + 1 : undefined}
         image={image}
+        classNames={imageClassNames}
+        styles={styles}
       />
     </>
   );

tests/preview.test.tsx

@@ -1030,4 +1030,36 @@ describe('Preview', () => {
     expect(previewImg).not.toHaveAttribute('width');
     expect(previewImg).not.toHaveAttribute('height');
   });
+  it('support classnames and styles', () => {
+    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
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        preview={{
+          styles: customStyles,
+          classNames: customClassnames,
+          mask: 'Bamboo Is Light',
+          zIndex: 9999,
+          visible: true,
+        }}
+      />,
+    );
+    const mask = document.querySelector('.rc-image-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);
+  });
 });