Skip to content

Commit 6da2410

Browse files
keyuskeyus
authored
Merge 543b588 into 38d02b2 
2 parents 38d02b2 + 543b588 commit 6da2410

File tree

6 files changed

+44
-14
lines changed

6 files changed

+44
-14
lines changed

‎docs/examples/basic.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ export default function Base() {
3535
style={{
3636
marginRight: 24,
3737
}}
38+
preview={{
39+
dragRebound: false,
40+
mask: 'close drag rebound'
41+
}}
3842
/>
3943
<Image
4044
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NZuwQp_vcIQAAAAAAAAAAABkARQnAQ"

‎src/Image.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export interface ImagePreviewType
2222
maskClassName?: string;
2323
icons?: PreviewProps['icons'];
2424
scaleStep?: number;
25+
dragRebound?: boolean;
2526
}
2627

2728
let uuid = 0;
@@ -101,6 +102,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
101102
maskClassName,
102103
icons,
103104
scaleStep,
105+
dragRebound,
104106
...dialogProps
105107
}: ImagePreviewType = typeof preview === 'object' ? preview : {};
106108
const src = previewSrc ?? imgSrc;
@@ -282,6 +284,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
282284
mousePosition={mousePosition}
283285
src={mergedSrc}
284286
alt={alt}
287+
dragRebound={dragRebound}
285288
getContainer={getPreviewContainer}
286289
icons={icons}
287290
scaleStep={scaleStep}

‎src/Operations.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ interface OperationsProps
2424
scale: number;
2525
onSwitchLeft: React.MouseEventHandler<HTMLDivElement>;
2626
onSwitchRight: React.MouseEventHandler<HTMLDivElement>;
27+
onRefresh: () => void;
2728
onZoomIn: () => void;
2829
onZoomOut: () => void;
2930
onRotateRight: () => void;
@@ -49,14 +50,15 @@ const Operations: React.FC<OperationsProps> = (props) => {
4950
onSwitchLeft,
5051
onSwitchRight,
5152
onClose,
53+
onRefresh,
5254
onZoomIn,
5355
onZoomOut,
5456
onRotateRight,
5557
onRotateLeft,
5658
onFlipX,
5759
onFlipY
5860
} = props;
59-
const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right, flipX, flipY } = icons;
61+
const { rotateLeft, rotateRight, refresh, zoomIn, zoomOut, close, left, right, flipX, flipY } = icons;
6062
const toolClassName = `${prefixCls}-operations-operation`;
6163
const iconClassName = `${prefixCls}-operations-icon`;
6264
const tools = [
@@ -65,6 +67,11 @@ const Operations: React.FC<OperationsProps> = (props) => {
6567
onClick: onClose,
6668
type: 'close',
6769
},
70+
{
71+
icon: refresh,
72+
onClick: onRefresh,
73+
type: 'refresh',
74+
},
6875
{
6976
icon: zoomIn,
7077
onClick: onZoomIn,

‎src/Preview.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
2121
rotateRight?: React.ReactNode;
2222
zoomIn?: React.ReactNode;
2323
zoomOut?: React.ReactNode;
24+
refresh?: React.ReactNode;
2425
close?: React.ReactNode;
2526
left?: React.ReactNode;
2627
right?: React.ReactNode;
@@ -29,6 +30,7 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
2930
};
3031
countRender?: (current: number, total: number) => string;
3132
scaleStep?: number;
33+
dragRebound?: boolean;
3234
}
3335

3436
const Preview: React.FC<PreviewProps> = (props) => {
@@ -45,6 +47,7 @@ const Preview: React.FC<PreviewProps> = (props) => {
4547
scaleStep = 0.5,
4648
transitionName = 'zoom',
4749
maskTransitionName = 'fade',
50+
dragRebound = true,
4851
...restProps
4952
} = props;
5053

@@ -74,6 +77,10 @@ const Preview: React.FC<PreviewProps> = (props) => {
7477
resetTransform();
7578
};
7679

80+
const onRefresh = ()=> {
81+
resetTransform();
82+
};
83+
7784
const onZoomIn = () => {
7885
dispatchZoomChange(BASE_SCALE_RATIO + scaleStep);
7986
};
@@ -117,6 +124,9 @@ const Preview: React.FC<PreviewProps> = (props) => {
117124
const onMouseUp: React.MouseEventHandler<HTMLBodyElement> = () => {
118125
if (visible && isMoving) {
119126
setMoving(false);
127+
if (!dragRebound) {
128+
return;
129+
}
120130

121131
/** No need to restore the position when the picture is not moved, So as not to interfere with the click */
122132
const { transformX, transformY } = downPositionRef.current;
@@ -298,6 +308,7 @@ const Preview: React.FC<PreviewProps> = (props) => {
298308
onRotateLeft={onRotateLeft}
299309
onFlipX={onFlipX}
300310
onFlipY={onFlipY}
311+
onRefresh={onRefresh}
301312
onClose={onClose}
302313
/>
303314
</>

‎tests/__snapshots__/preview.test.tsx.snap‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,9 @@ exports[`Preview add rootClassName should be correct when open preview 1`] = `
7979
<li
8080
class="rc-image-preview-operations-operation rc-image-preview-operations-operation-close"
8181
/>
82+
<li
83+
class="rc-image-preview-operations-operation rc-image-preview-operations-operation-refresh"
84+
/>
8285
<li
8386
class="rc-image-preview-operations-operation rc-image-preview-operations-operation-zoomIn"
8487
/>

‎tests/preview.test.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import ZoomOutOutlined from '@ant-design/icons/ZoomOutOutlined';
88
import CloseOutlined from '@ant-design/icons/CloseOutlined';
99
import LeftOutlined from '@ant-design/icons/LeftOutlined';
1010
import RightOutlined from '@ant-design/icons/RightOutlined';
11+
import ReloadOutlined from '@ant-design/icons/ReloadOutlined';
1112

1213
jest.mock('../src/Preview', () => {
1314
const MockPreview = (props: any) => {
@@ -118,15 +119,15 @@ describe('Preview', () => {
118119
jest.runAllTimers();
119120
});
120121

121-
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[3]);
122+
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[4]);
122123
act(() => {
123124
jest.runAllTimers();
124125
});
125126
expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({
126127
transform: 'translate3d(0px, 0px, 0) scale3d(1, 1, 1) rotate(90deg)',
127128
});
128129

129-
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[4]);
130+
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[5]);
130131
act(() => {
131132
jest.runAllTimers();
132133
});
@@ -145,31 +146,31 @@ describe('Preview', () => {
145146
jest.runAllTimers();
146147
});
147148

148-
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[5]);
149+
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[6]);
149150
act(() => {
150151
jest.runAllTimers();
151152
});
152153
expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({
153154
transform: 'translate3d(0px, 0px, 0) scale3d(-1, 1, 1) rotate(0deg)',
154155
});
155156

156-
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[6]);
157+
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[7]);
157158
act(() => {
158159
jest.runAllTimers();
159160
});
160161
expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({
161162
transform: 'translate3d(0px, 0px, 0) scale3d(-1, -1, 1) rotate(0deg)',
162163
});
163164

164-
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[5]);
165+
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[6]);
165166
act(() => {
166167
jest.runAllTimers();
167168
});
168169
expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({
169170
transform: 'translate3d(0px, 0px, 0) scale3d(1, -1, 1) rotate(0deg)',
170171
});
171172

172-
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[6]);
173+
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[7]);
173174
act(() => {
174175
jest.runAllTimers();
175176
});
@@ -188,23 +189,23 @@ describe('Preview', () => {
188189
jest.runAllTimers();
189190
});
190191

191-
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[2]);
192+
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[3]);
192193
act(() => {
193194
jest.runAllTimers();
194195
});
195196
expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({
196197
transform: 'translate3d(0px, 0px, 0) scale3d(1, 1, 1) rotate(0deg)',
197198
});
198199

199-
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[1]);
200+
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[2]);
200201
act(() => {
201202
jest.runAllTimers();
202203
});
203204
expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({
204205
transform: 'translate3d(-256px, -192px, 0) scale3d(1.5, 1.5, 1) rotate(0deg)',
205206
});
206207

207-
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[2]);
208+
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[3]);
208209
act(() => {
209210
jest.runAllTimers();
210211
});
@@ -261,23 +262,23 @@ describe('Preview', () => {
261262
jest.runAllTimers();
262263
});
263264

264-
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[2]);
265+
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[3]);
265266
act(() => {
266267
jest.runAllTimers();
267268
});
268269
expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({
269270
transform: 'translate3d(0px, 0px, 0) scale3d(1, 1, 1) rotate(0deg)',
270271
});
271272

272-
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[1]);
273+
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[2]);
273274
act(() => {
274275
jest.runAllTimers();
275276
});
276277
expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({
277278
transform: 'translate3d(-512px, -384px, 0) scale3d(2, 2, 1) rotate(0deg)',
278279
});
279280

280-
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[2]);
281+
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[3]);
281282
act(() => {
282283
jest.runAllTimers();
283284
});
@@ -317,7 +318,7 @@ describe('Preview', () => {
317318
jest.runAllTimers();
318319
});
319320

320-
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[1]);
321+
fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[2]);
321322
act(() => {
322323
jest.runAllTimers();
323324
});
@@ -572,6 +573,7 @@ describe('Preview', () => {
572573
zoomIn: <ZoomInOutlined />,
573574
zoomOut: <ZoomOutOutlined />,
574575
close: <CloseOutlined />,
576+
refresh: <ReloadOutlined />,
575577
left: <LeftOutlined />,
576578
right: <RightOutlined />,
577579
}}

0 commit comments

Comments
 (0)