react-native-gesture-image-viewer 2.2.0 → 2.3.1

package/src/useGestureViewerPaging.web.ts

@@ -1,9 +1,10 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, type MouseEvent } from 'react';
 import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 
 import type {
   UseGestureViewerPagingArgs,
   UseGestureViewerPagingResult,
+  WebClickTarget,
 } from './useGestureViewerPaging.types';
 import { applyTapZoomAtPoint } from './utils/tapZoom';
 import {
@@ -35,6 +36,7 @@ export function useGestureViewerPaging({
   enableHorizontalSwipe,
   enableLoop,
   height,
+  onSingleTap,
   isRotated,
   isZoomed,
   itemSpacing,
@@ -48,6 +50,8 @@ export function useGestureViewerPaging({
   translateY,
   width,
 }: UseGestureViewerPagingArgs): UseGestureViewerPagingResult {
+  const webSingleTapTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const webScrollRuntimeRef = useRef<WebScrollRuntime>({
     actor: 'idle',
     isAutoplayPausedByUser: false,
@@ -59,6 +63,13 @@ export function useGestureViewerPaging({
     resumeAutoplayTimer: null,
   });
 
+  const clearWebSingleTapTimer = useCallback(() => {
+    if (webSingleTapTimerRef.current) {
+      clearTimeout(webSingleTapTimerRef.current);
+      webSingleTapTimerRef.current = null;
+    }
+  }, []);
+
   const clearWebSettleTimer = useCallback(() => {
     const runtime = webScrollRuntimeRef.current;
 
@@ -232,10 +243,11 @@ export function useGestureViewerPaging({
 
   useEffect(() => {
     return () => {
+      clearWebSingleTapTimer();
       clearWebSettleTimer();
       clearWebAutoplayResumeTimer();
     };
-  }, [clearWebAutoplayResumeTimer, clearWebSettleTimer]);
+  }, [clearWebAutoplayResumeTimer, clearWebSettleTimer, clearWebSingleTapTimer]);
 
   useEffect(() => {
     if (
@@ -351,50 +363,62 @@ export function useGestureViewerPaging({
     manager?.handleScrollBeginDrag();
   }, [beginWebUserInteraction, clearWebSettleTimer, manager]);
 
-  const onWebDoubleClick = useCallback(
-    (event: any) => {
-      if (!enableDoubleTapZoom || event?.nativeEvent?.detail !== 2) {
+  const onWebClick = useCallback(
+    (event: MouseEvent<WebClickTarget>) => {
+      const detail = event.detail;
+      const rect = event.currentTarget.getBoundingClientRect();
+      const resolvedX = event.clientX - rect.left;
+      const resolvedY = event.clientY - rect.top;
+
+      if (!enableDoubleTapZoom) {
+        if (!onSingleTap) {
+          return;
+        }
+
+        clearWebSingleTapTimer();
+        onSingleTap(resolvedX, resolvedY);
         return;
       }
 
-      pauseWebAutoplayWithoutPagingInteraction();
-      scheduleWebAutoplayResume();
+      if (detail === 2) {
+        clearWebSingleTapTimer();
 
-      const nativeEvent = event?.nativeEvent;
-      const eventTarget = event?.currentTarget ?? nativeEvent?.currentTarget ?? nativeEvent?.target;
-      let locationX = nativeEvent?.locationX;
-      let locationY = nativeEvent?.locationY;
+        pauseWebAutoplayWithoutPagingInteraction();
+        scheduleWebAutoplayResume();
 
-      if (
-        (!Number.isFinite(locationX) || !Number.isFinite(locationY)) &&
-        typeof eventTarget?.getBoundingClientRect === 'function' &&
-        Number.isFinite(nativeEvent?.clientX) &&
-        Number.isFinite(nativeEvent?.clientY)
-      ) {
-        const rect = eventTarget.getBoundingClientRect();
+        applyTapZoomAtPoint({
+          x: resolvedX,
+          y: resolvedY,
+          width,
+          height,
+          maxZoomScale,
+          scale,
+          translateX,
+          translateY,
+        });
+        return;
+      }
 
-        locationX = nativeEvent.clientX - rect.left;
-        locationY = nativeEvent.clientY - rect.top;
+      if (detail !== 1 || !onSingleTap) {
+        return;
       }
 
-      applyTapZoomAtPoint({
-        x: Number.isFinite(locationX) ? locationX : width / 2,
-        y: Number.isFinite(locationY) ? locationY : height / 2,
-        width,
-        height,
-        maxZoomScale,
-        scale,
-        translateX,
-        translateY,
-      });
+      clearWebSingleTapTimer();
+
+      webSingleTapTimerRef.current = setTimeout(() => {
+        onSingleTap(resolvedX, resolvedY);
+        webSingleTapTimerRef.current = null;
+      }, 250);
     },
     [
+      clearWebSingleTapTimer,
       enableDoubleTapZoom,
       height,
       maxZoomScale,
+      onSingleTap,
       pauseWebAutoplayWithoutPagingInteraction,
-      scheduleWebAutoplayResume,
       scale,
+      scheduleWebAutoplayResume,
       translateX,
       translateY,
       width,
@@ -405,6 +429,6 @@ export function useGestureViewerPaging({
     onMomentumScrollEnd,
     onScroll,
     onScrollBeginDrag,
-    onWebDoubleClick,
+    onWebClick,
   };
 }

package/src/utils/dismiss.ts

@@ -0,0 +1,36 @@
+import type { GestureViewerDismissDirection } from '../types';
+
+export const shouldDismissByDirection = (
+  translationY: number,
+  threshold: number,
+  direction: GestureViewerDismissDirection,
+): boolean => {
+  'worklet';
+
+  if (direction === 'up') {
+    return translationY < -threshold;
+  }
+
+  if (direction === 'both') {
+    return Math.abs(translationY) > threshold;
+  }
+
+  return translationY > threshold;
+};
+
+export const getDismissDistance = (
+  translationY: number,
+  direction: GestureViewerDismissDirection,
+): number => {
+  'worklet';
+
+  if (direction === 'up') {
+    return Math.max(-translationY, 0);
+  }
+
+  if (direction === 'both') {
+    return Math.abs(translationY);
+  }
+
+  return Math.max(translationY, 0);
+};

package/src/utils/tapZoom.ts

@@ -22,7 +22,7 @@ export const applyTapZoomAtPoint = ({
 }) => {
   'worklet';
 
-  const nextScale = scale.value > 1 ? 1 : maxZoomScale;
+  const nextScale = scale.get() > 1 ? 1 : maxZoomScale;
   const timingConfig = {
     duration: 300,
     easing: Easing.bezier(0.25, 0.1, 0.25, 1),
@@ -33,12 +33,12 @@ export const applyTapZoomAtPoint = ({
     const centerY = y - height / 2;
 
     // NOTE 확대로 밀려난 거리만큼 반대로 이동해서 탭 지점을 제자리에 유지
-    translateX.value = withTiming(-centerX * (nextScale - 1), timingConfig);
-    translateY.value = withTiming(-centerY * (nextScale - 1), timingConfig);
+    translateX.set(withTiming(-centerX * (nextScale - 1), timingConfig));
+    translateY.set(withTiming(-centerY * (nextScale - 1), timingConfig));
   } else {
-    translateX.value = withTiming(0, timingConfig);
-    translateY.value = withTiming(0, timingConfig);
+    translateX.set(withTiming(0, timingConfig));
+    translateY.set(withTiming(0, timingConfig));
   }
 
-  scale.value = withTiming(nextScale, timingConfig);
+  scale.set(withTiming(nextScale, timingConfig));
 };