react-native-gesture-image-viewer/lib/module/useGestureViewerEvent.js

🖼️ React Native Image Viewer - Reanimated-powered image gestures with full control

"use strict";

import { useEffect } from 'react';
import { registry } from "./GestureViewerRegistry.js";

/**
 * Hook for subscribing to GestureViewer events on the default instance.
 *
 * This hook allows you to listen to specific events from the default GestureViewer instance
 * (with ID 'default'), such as zoom changes or rotation changes. Events are automatically
 * throttled to prevent excessive callback invocations during gestures.
 *
 * @param eventType - The type of event to listen for
 * @param callback - Function to call when the event occurs
 *
 * @example
 * ```tsx
 * // Listen to zoom changes on the default instance (ID: 'default')
 * useGestureViewerEvent('zoomChange', (data) => {
 *   console.log(`Zoom changed from ${data.previousScale} to ${data.scale}`);
 * });
 *
 * // Listen to rotation changes on the default instance (ID: 'default')
 * useGestureViewerEvent('rotationChange', (data) => {
 *   console.log(`Rotation changed from ${data.previousRotation}° to ${data.rotation}°`);
 * });
 * ```
 */

/**
 * Hook for subscribing to GestureViewer events with a specific instance ID.
 *
 * Use this overload when you have multiple GestureViewer instances and need
 * to listen to events from a specific one.
 *
 * @param id - The unique identifier of the GestureViewer instance
 * @param eventType - The type of event to listen for
 * @param callback - Function to call when the event occurs
 *
 * @example
 * ```tsx
 * // Listen to zoom changes on a specific instance
 * useGestureViewerEvent('gallery', 'zoomChange', (data) => {
 *   console.log(`Gallery zoom: ${data.scale}x`);
 * });
 *
 * // Listen to rotation changes on a modal viewer
 * useGestureViewerEvent('modal-viewer', 'rotationChange', (data) => {
 *   updateRotationIndicator(data.rotation);
 * });
 * ```
 */

/**
 * Implementation of the useGestureViewerEvent hook.
 *
 * @internal
 */
export function useGestureViewerEvent(idOrEventType, eventTypeOrCallback, callback) {
  const id = typeof idOrEventType === 'string' && callback ? idOrEventType : 'default';
  const eventType = typeof idOrEventType === 'string' && callback ? eventTypeOrCallback : idOrEventType;
  const finalCallback = callback || eventTypeOrCallback;
  useEffect(() => {
    let unsubscribeFromManager = null;
    const handleManagerChange = manager => {
      unsubscribeFromManager?.();
      unsubscribeFromManager = null;
      if (manager) {
        unsubscribeFromManager = manager.addEventListener(eventType, finalCallback);
      }
    };
    const unsubscribeFromRegistry = registry.subscribeToManager(id, handleManagerChange);
    return () => {
      unsubscribeFromRegistry();
      unsubscribeFromManager?.();
    };
  }, [id, eventType, finalCallback]);
}
//# sourceMappingURL=useGestureViewerEvent.js.map