add callbacks

Expensify · Jan 7, 2024 · 79bfaa3 · 79bfaa3
1 parent 4ce49a3
commit 79bfaa3
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 19 deletions.
diff --git a/src/components/Lightbox.js b/src/components/Lightbox.js
@@ -24,9 +24,6 @@ const cachedDimensions = new Map();
 const propTypes = {
     ...zoomRangePropTypes,
 
-    /** Triggers whenever the zoom scale changes */
-    onScaleChanged: PropTypes.func,
-
     /** Handles errors while displaying the image */
     onError: PropTypes.func,
 
@@ -51,19 +48,20 @@ const defaultProps = {
 
 const DEFAULT_IMAGE_SIZE = 200;
 
-function Lightbox({isAuthTokenRequired, source, onScaleChanged, onError, style, zoomRange}) {
+function Lightbox({isAuthTokenRequired, source, onError, style, zoomRange}) {
     const StyleUtils = useStyleUtils();
 
     const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
-    const {isUsedInCarousel, isSingleCarouselItem, page, activePage, onTap, isPagerSwiping} = useMemo(() => {
+    const {isUsedInCarousel, isSingleCarouselItem, isPagerSwiping, page, activePage, onTap, onScaleChanged} = useMemo(() => {
         if (attachmentCarouselPagerContext == null) {
             return {
                 isUsedInCarousel: false,
                 isSingleCarouselItem: true,
+                isPagerSwiping: false,
                 page: 0,
                 activePage: 0,
                 onTap: () => {},
-                isPagerSwiping: false,
+                onScaleChanged: () => {},
             };
         }
 

diff --git a/src/components/MultiGestureCanvas/index.js b/src/components/MultiGestureCanvas/index.js
@@ -65,12 +65,11 @@ function MultiGestureCanvas({canvasSize, isActive, areTransformationsEnabled, on
     /**
      * Resets the canvas to the initial state and animates back smoothly
      */
-    const reset = MultiGestureCanvasUtils.useWorkletCallback((animated) => {
-        pinchScale.value = 1;
-
-        stopAnimation();
+    const reset = MultiGestureCanvasUtils.useWorkletCallback((animated, callbackProp) => {
+        const callback = callbackProp || (() => {});
 
         pinchScale.value = 1;
+        stopAnimation();
 
         if (animated) {
             offsetX.value = withSpring(0, MultiGestureCanvasUtils.SPRING_CONFIG);
@@ -79,7 +78,7 @@ function MultiGestureCanvas({canvasSize, isActive, areTransformationsEnabled, on
             panTranslateY.value = withSpring(0, MultiGestureCanvasUtils.SPRING_CONFIG);
             pinchTranslateX.value = withSpring(0, MultiGestureCanvasUtils.SPRING_CONFIG);
             pinchTranslateY.value = withSpring(0, MultiGestureCanvasUtils.SPRING_CONFIG);
-            zoomScale.value = withSpring(1, MultiGestureCanvasUtils.SPRING_CONFIG);
+            zoomScale.value = withSpring(1, MultiGestureCanvasUtils.SPRING_CONFIG, callback);
             return;
         }
 
@@ -90,6 +89,8 @@ function MultiGestureCanvas({canvasSize, isActive, areTransformationsEnabled, on
         pinchTranslateX.value = 0;
         pinchTranslateY.value = 0;
         zoomScale.value = 1;
+
+        callback();
     });
 
     const {singleTapGesture: baseSingleTapGesture, doubleTapGesture} = useTapGestures({

diff --git a/src/components/MultiGestureCanvas/usePinchGesture.js b/src/components/MultiGestureCanvas/usePinchGesture.js
@@ -141,6 +141,8 @@ const usePinchGesture = ({
             }
 
             const triggerScaleChangeCallback = () => {
+                'worklet';
+
                 if (onScaleChanged == null) {
                     return;
                 }

diff --git a/src/components/MultiGestureCanvas/useTapGestures.js b/src/components/MultiGestureCanvas/useTapGestures.js
@@ -29,7 +29,7 @@ const useTapGestures = ({
     const doubleTapScale = useMemo(() => Math.max(DOUBLE_TAP_SCALE, maxContentScale / minContentScale), [maxContentScale, minContentScale]);
 
     const zoomToCoordinates = MultiGestureCanvasUtils.useWorkletCallback(
-        (focalX, focalY) => {
+        (focalX, focalY, callbackProp) => {
             'worklet';
 
             stopAnimation();
@@ -93,9 +93,11 @@ const useTapGestures = ({
                 offsetAfterZooming.y = 0;
             }
 
+            const callback = callbackProp || (() => {});
+
             offsetX.value = withSpring(offsetAfterZooming.x, MultiGestureCanvasUtils.SPRING_CONFIG);
             offsetY.value = withSpring(offsetAfterZooming.y, MultiGestureCanvasUtils.SPRING_CONFIG);
-            zoomScale.value = withSpring(doubleTapScale, MultiGestureCanvasUtils.SPRING_CONFIG);
+            zoomScale.value = withSpring(doubleTapScale, MultiGestureCanvasUtils.SPRING_CONFIG, callback);
             pinchScale.value = doubleTapScale;
         },
         [scaledContentWidth, scaledContentHeight, canvasSize, doubleTapScale],
@@ -113,16 +115,20 @@ const useTapGestures = ({
         .maxDelay(150)
         .maxDistance(20)
         .onEnd((evt) => {
+            const triggerScaleChangedEvent = () => {
+                'worklet';
+
+                if (onScaleChanged != null) {
+                    runOnJS(onScaleChanged)(zoomScale.value);
+                }
+            };
+
             // If the content is already zoomed, we want to reset the zoom,
             // otherwwise we want to zoom in
             if (zoomScale.value > 1) {
-                reset(true);
+                reset(true, triggerScaleChangedEvent);
             } else {
-                zoomToCoordinates(evt.x, evt.y);
-            }
-
-            if (onScaleChanged != null) {
-                runOnJS(onScaleChanged)(zoomScale.value);
+                zoomToCoordinates(evt.x, evt.y, triggerScaleChangedEvent);
             }
         });
-Original file line number
+Diff line change
@@ Expand Up / @@ -141,6 +141,8 @@ const usePinchGesture = ({ @@
                 }
                 const triggerScaleChangeCallback = () => {
+                    'worklet';
                     if (onScaleChanged == null) {
                         return;
                     }
@@ Expand Down @@