fix: fix the preview img size (#354)

* fix: fix the preview img size * fix: update * fix: update * test: update test file * test: update test file * fix: update * fix: the bug * test: add test case --------- Co-authored-by: 二货机器人 <smith3816@gmail.com>
react-component · Jun 5, 2024 · 3f39cd9 · 3f39cd9
1 parent 4fe15d0
commit 3f39cd9
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 20 deletions.
diff --git a/src/Image.tsx b/src/Image.tsx
@@ -240,8 +240,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
           mousePosition={mousePosition}
           src={src}
           alt={alt}
-          width={width}
-          height={height}
+          imageInfo={{ width, height }}
           fallback={fallback}
           getContainer={getPreviewContainer}
           icons={icons}

diff --git a/src/Preview.tsx b/src/Preview.tsx
@@ -4,14 +4,14 @@ import Dialog from 'rc-dialog';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import KeyCode from 'rc-util/lib/KeyCode';
 import React, { useContext, useEffect, useRef, useState } from 'react';
+import type { ImgInfo } from './Image';
+import Operations from './Operations';
 import { PreviewGroupContext } from './context';
 import type { TransformAction, TransformType } from './hooks/useImageTransform';
 import useImageTransform from './hooks/useImageTransform';
 import useMouseEvent from './hooks/useMouseEvent';
 import useStatus from './hooks/useStatus';
 import useTouchEvent from './hooks/useTouchEvent';
-import type { ImgInfo } from './Image';
-import Operations from './Operations';
 import { BASE_SCALE_RATIO } from './previewConfig';
 
 export type ToolbarRenderInfoType = {
@@ -43,8 +43,10 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
   imgCommonProps?: React.ImgHTMLAttributes<HTMLImageElement>;
   src?: string;
   alt?: string;
-  width?: number | string;
-  height?: number | string;
+  imageInfo?: {
+    width: number | string;
+    height: number | string;
+  };
   fallback?: string;
   movable?: boolean;
   rootClassName?: string;
@@ -107,8 +109,7 @@ const Preview: React.FC<PreviewProps> = props => {
     prefixCls,
     src,
     alt,
-    width,
-    height,
+    imageInfo,
     fallback,
     movable = true,
     onClose,
@@ -203,7 +204,7 @@ const Preview: React.FC<PreviewProps> = props => {
   };
 
   const onReset = () => {
-    resetTransform("reset");
+    resetTransform('reset');
   };
 
   const onSwitchLeft = (event?: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
@@ -288,8 +289,7 @@ const Preview: React.FC<PreviewProps> = props => {
   const image = {
     url: src,
     alt,
-    width,
-    height,
+    ...imageInfo,
   };
 
   return (

diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx
@@ -796,13 +796,27 @@ describe('Preview', () => {
             printImage(image);
             return (
               <>
-                <div id="flipY" onClick={() => actions.onFlipY()}>{icons.flipYIcon}</div>
-                <div id="flipX" onClick={() => actions.onFlipX()}>{icons.flipXIcon}</div>
-                <div id="zoomIn" onClick={() => actions.onZoomIn()}>{icons.zoomInIcon}</div>
-                <div id="zoomOut" onClick={() => actions.onZoomOut()}>{icons.zoomOutIcon}</div>
-                <div id="rotateLeft" onClick={() => actions.onRotateLeft()}>{icons.rotateLeftIcon}</div>
-                <div id="rotateRight" onClick={() => actions.onRotateRight()}>{icons.rotateRightIcon}</div>
-                <div id="reset" onClick={() => actions.onReset()}>reset</div>
+                <div id="flipY" onClick={() => actions.onFlipY()}>
+                  {icons.flipYIcon}
+                </div>
+                <div id="flipX" onClick={() => actions.onFlipX()}>
+                  {icons.flipXIcon}
+                </div>
+                <div id="zoomIn" onClick={() => actions.onZoomIn()}>
+                  {icons.zoomInIcon}
+                </div>
+                <div id="zoomOut" onClick={() => actions.onZoomOut()}>
+                  {icons.zoomOutIcon}
+                </div>
+                <div id="rotateLeft" onClick={() => actions.onRotateLeft()}>
+                  {icons.rotateLeftIcon}
+                </div>
+                <div id="rotateRight" onClick={() => actions.onRotateRight()}>
+                  {icons.rotateRightIcon}
+                </div>
+                <div id="reset" onClick={() => actions.onReset()}>
+                  reset
+                </div>
               </>
             );
           },
@@ -839,9 +853,9 @@ describe('Preview', () => {
       jest.runAllTimers();
     });
     expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({
-      transform: 'translate3d(-206px, -142px, 0) scale3d(-1.5, -1.5, 1) rotate(-90deg)',
+      transform: 'translate3d(-256px, -192px, 0) scale3d(-1.5, -1.5, 1) rotate(-90deg)',
     });
-    
+
     // reset
     fireEvent.click(document.getElementById('reset'));
     act(() => {
@@ -940,4 +954,25 @@ describe('Preview', () => {
 
     onVisibleChange.mockRestore();
   });
+
+  it('not modify preview image size', () => {
+    render(
+      <Image
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        width={20}
+        height={20}
+        preview={{
+          visible: true,
+        }}
+      />,
+    );
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    const previewImg = document.querySelector('.rc-image-preview-img-wrapper img');
+    expect(previewImg).not.toHaveAttribute('width');
+    expect(previewImg).not.toHaveAttribute('height');
+  });
 });