react-native-gesture-image-viewer 2.1.4 → 2.3.0

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,
@@ -43,10 +45,13 @@ export function useGestureViewerPaging({
   scale,
   scrollTo,
   syncCurrentIndex,
+  syncPendingIndex,
   translateX,
   translateY,
   width,
 }: UseGestureViewerPagingArgs): UseGestureViewerPagingResult {
+  const webSingleTapTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const webScrollRuntimeRef = useRef<WebScrollRuntime>({
     actor: 'idle',
     isAutoplayPausedByUser: false,
@@ -58,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;
 
@@ -231,10 +243,11 @@ export function useGestureViewerPaging({
 
   useEffect(() => {
     return () => {
+      clearWebSingleTapTimer();
       clearWebSettleTimer();
       clearWebAutoplayResumeTimer();
     };
-  }, [clearWebAutoplayResumeTimer, clearWebSettleTimer]);
+  }, [clearWebAutoplayResumeTimer, clearWebSettleTimer, clearWebSingleTapTimer]);
 
   useEffect(() => {
     if (
@@ -302,15 +315,34 @@ export function useGestureViewerPaging({
         return;
       }
 
+      const offsetX = event.nativeEvent.contentOffset.x;
+      const runtime = webScrollRuntimeRef.current;
+      const pendingState = resolveWebScrollFinalState({
+        dataLength,
+        enableLoop,
+        lastSettledPhysicalIndex: runtime.lastSettledPhysicalIndex,
+        offsetX,
+        pageWidth: width + itemSpacing,
+      });
+
+      if (pendingState) {
+        syncPendingIndex(pendingState.logicalIndex);
+      }
+
       syncProgrammaticActorFromManager();
       beginWebUserInteraction();
-      scheduleWebScrollSettle(event.nativeEvent.contentOffset.x);
+      scheduleWebScrollSettle(offsetX);
     },
     [
       beginWebUserInteraction,
+      dataLength,
       enableHorizontalSwipe,
+      enableLoop,
+      itemSpacing,
       scheduleWebScrollSettle,
+      syncPendingIndex,
       syncProgrammaticActorFromManager,
+      width,
     ],
   );
 
@@ -331,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,
@@ -385,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);
+};