From 25d9c0444272341fcd47083859f1121f852e03ef Mon Sep 17 00:00:00 2001
From: linxianxi <904492381@qq.com>
Date: Wed, 7 Jun 2023 17:12:04 +0800
Subject: [PATCH] fix: change onTransform type

---
 README.md                      | 8 ++++----
 src/Preview.tsx                | 2 +-
 src/hooks/useImageTransform.ts | 6 +++---
 tests/preview.test.tsx         | 8 ++++----
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 5c46f75d..c4cf8d74 100644
--- a/README.md
+++ b/README.md
@@ -79,10 +79,10 @@ export default () => (
   visible?: boolean;
   scaleStep?: number;
   onVisibleChange?: (visible: boolean, prevVisible: boolean) => void;
-  onTransform: (
+  onTransform: (params: {
     transform: { x: number, y: number, rotate: number, scale: number, flipX: boolean, flipY: boolean },
     action: 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'switch' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound'
-  ) => void;
+  )} => void;
   getContainer?: string | HTMLElement | (() => HTMLElement) | false;
   toolbarRender?: (params: {
     originalNode: React.ReactNode;
@@ -138,10 +138,10 @@ export default () => (
   visible?: boolean;
   scaleStep?: number;
   onVisibleChange?: (visible, prevVisible, current: number) => void;
-  onTransform: (
+  onTransform: (params: {
     transform: { x: number, y: number, rotate: number, scale: number, flipX: boolean, flipY: boolean },
     action: 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'switch' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound'
-  ) => void;
+  )} => void;
   getContainer?: string | HTMLElement | (() => HTMLElement) | false;
   countRender?: (current: number, total: number) => string;
   current?: number;
diff --git a/src/Preview.tsx b/src/Preview.tsx
index 30207abb..ffc1089c 100644
--- a/src/Preview.tsx
+++ b/src/Preview.tsx
@@ -55,7 +55,7 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
   countRender?: (current: number, total: number) => string;
   scaleStep?: number;
   onClose?: (e: React.SyntheticEvent<Element>) => void;
-  onTransform?: (transform: TransformType, action: TransformAction) => void;
+  onTransform?: (params: { transform: TransformType; action: TransformAction }) => void;
   toolbarRender?: (params: toolbarRenderType) => React.ReactNode;
 }
 
diff --git a/src/hooks/useImageTransform.ts b/src/hooks/useImageTransform.ts
index 43e955d9..abe07842 100644
--- a/src/hooks/useImageTransform.ts
+++ b/src/hooks/useImageTransform.ts
@@ -38,7 +38,7 @@ const initialTransform = {
 
 export default function useImageTransform(
   imgRef: React.MutableRefObject<HTMLImageElement>,
-  onTransform: (transform: TransformType, action: TransformAction) => void,
+  onTransform: (params: { transform: TransformType; action: TransformAction }) => void,
 ) {
   const frame = useRef(null);
   const queue = useRef<TransformType[]>([]);
@@ -47,7 +47,7 @@ export default function useImageTransform(
   const resetTransform = (action: TransformAction) => {
     setTransform(initialTransform);
     if (onTransform && !isEqual(initialTransform, transform)) {
-      onTransform(initialTransform, action);
+      onTransform({ transform: initialTransform, action });
     }
   };
 
@@ -63,7 +63,7 @@ export default function useImageTransform(
           });
           frame.current = null;
 
-          onTransform?.(memoState, action);
+          onTransform?.({ transform: memoState, action });
           return memoState;
         });
       });
diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx
index a5fb2ab6..77747fc2 100644
--- a/tests/preview.test.tsx
+++ b/tests/preview.test.tsx
@@ -832,8 +832,8 @@ describe('Preview', () => {
     });
 
     expect(onTransform).toBeCalledTimes(1);
-    expect(onTransform).toBeCalledWith(
-      {
+    expect(onTransform).toBeCalledWith({
+      transform: {
         flipY: true,
         flipX: false,
         rotate: 0,
@@ -841,7 +841,7 @@ describe('Preview', () => {
         x: 0,
         y: 0,
       },
-      'flipY',
-    );
+      action: 'flipY',
+    });
   });
 });