diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx index 12ce82c0..adb78dd9 100644 --- a/docs/examples/basic.tsx +++ b/docs/examples/basic.tsx @@ -27,7 +27,7 @@ export default function Base() { style={{ marginRight: 24, }} - preview={{ mask: 'Click to Preview' }} + preview={{ mask: 'Click to Preview', resetPositionAfterDrag: false }} /> ; onSwitchRight: React.MouseEventHandler; + onRefresh: () => void; onZoomIn: () => void; onZoomOut: () => void; onRotateRight: () => void; @@ -49,6 +50,7 @@ const Operations: React.FC = (props) => { onSwitchLeft, onSwitchRight, onClose, + onRefresh, onZoomIn, onZoomOut, onRotateRight, @@ -56,7 +58,7 @@ const Operations: React.FC = (props) => { onFlipX, onFlipY } = props; - const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right, flipX, flipY } = icons; + const { rotateLeft, rotateRight, refresh, zoomIn, zoomOut, close, left, right, flipX, flipY } = icons; const toolClassName = `${prefixCls}-operations-operation`; const iconClassName = `${prefixCls}-operations-icon`; const tools = [ @@ -65,6 +67,11 @@ const Operations: React.FC = (props) => { onClick: onClose, type: 'close', }, + { + icon: refresh, + onClick: onRefresh, + type: 'refresh', + }, { icon: zoomIn, onClick: onZoomIn, @@ -97,7 +104,7 @@ const Operations: React.FC = (props) => { onClick: onFlipY, type: 'flipY', }, - ]; + ].filter((tool) => tool.icon !== undefined); const operations = ( <> diff --git a/src/Preview.tsx b/src/Preview.tsx index c6f78932..36203833 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -21,6 +21,7 @@ export interface PreviewProps extends Omit { rotateRight?: React.ReactNode; zoomIn?: React.ReactNode; zoomOut?: React.ReactNode; + refresh?: React.ReactNode; close?: React.ReactNode; left?: React.ReactNode; right?: React.ReactNode; @@ -29,6 +30,7 @@ export interface PreviewProps extends Omit { }; countRender?: (current: number, total: number) => string; scaleStep?: number; + resetPositionAfterDrag?: boolean; } const Preview: React.FC = (props) => { @@ -45,6 +47,7 @@ const Preview: React.FC = (props) => { scaleStep = 0.5, transitionName = 'zoom', maskTransitionName = 'fade', + resetPositionAfterDrag = true, ...restProps } = props; @@ -74,6 +77,10 @@ const Preview: React.FC = (props) => { resetTransform(); }; + const onRefresh = ()=> { + resetTransform(); + } + const onZoomIn = () => { dispatchZoomChange(BASE_SCALE_RATIO + scaleStep); }; @@ -118,6 +125,10 @@ const Preview: React.FC = (props) => { if (visible && isMoving) { setMoving(false); + if(!resetPositionAfterDrag){ + return; + } + /** No need to restore the position when the picture is not moved, So as not to interfere with the click */ const { transformX, transformY } = downPositionRef.current; const hasChangedPosition = transform.x !== transformX && transform.y !== transformY; @@ -298,6 +309,7 @@ const Preview: React.FC = (props) => { onRotateLeft={onRotateLeft} onFlipX={onFlipX} onFlipY={onFlipY} + onRefresh={onRefresh} onClose={onClose} /> diff --git a/tests/__snapshots__/controlled.test.tsx.snap b/tests/__snapshots__/controlled.test.tsx.snap index 2e03b331..80235349 100644 --- a/tests/__snapshots__/controlled.test.tsx.snap +++ b/tests/__snapshots__/controlled.test.tsx.snap @@ -5,7 +5,6 @@ exports[`Controlled With previewVisible 1`] = ` aria-modal="true" class="rc-image-preview" role="dialog" - style="display: none;" > , ] `; diff --git a/tests/__snapshots__/previewGroup.test.tsx.snap b/tests/__snapshots__/previewGroup.test.tsx.snap index 9fc138fe..cf811b73 100644 --- a/tests/__snapshots__/previewGroup.test.tsx.snap +++ b/tests/__snapshots__/previewGroup.test.tsx.snap @@ -5,7 +5,6 @@ exports[`PreviewGroup With Controlled 1`] = ` aria-modal="true" class="rc-image-preview" role="dialog" - style="display: none;" >