Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: fix the preview img size #354

Merged
merged 8 commits into from
Jun 5, 2024
Merged

fix: fix the preview img size #354

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5aa4e75
fix: fix the preview img size
nova1751 Jun 5, 2024
bb132d5
fix: update
nova1751 Jun 5, 2024
e563ebf
fix: update
nova1751 Jun 5, 2024
b6a7aa7
test: update test file
nova1751 Jun 5, 2024
7e10fff
test: update test file
nova1751 Jun 5, 2024
af69ea5
fix: update
nova1751 Jun 5, 2024
f47d298
fix: the bug
nova1751 Jun 5, 2024
ca8d807
test: add test case
zombieJ Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/Image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
18 changes: 9 additions & 9 deletions src/Preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -107,8 +109,7 @@ const Preview: React.FC<PreviewProps> = props => {
prefixCls,
src,
alt,
width,
height,
imageInfo,
fallback,
movable = true,
onClose,
Expand Down Expand Up @@ -203,7 +204,7 @@ const Preview: React.FC<PreviewProps> = props => {
};

const onReset = () => {
resetTransform("reset");
resetTransform('reset');
};

const onSwitchLeft = (event?: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
Expand Down Expand Up @@ -288,8 +289,7 @@ const Preview: React.FC<PreviewProps> = props => {
const image = {
url: src,
alt,
width,
height,
...imageInfo,
};

return (
Expand Down
53 changes: 44 additions & 9 deletions tests/preview.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()}>
zombieJ marked this conversation as resolved.
Show resolved Hide resolved
{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>
</>
);
},
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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');
});
});