@dt-workspace/react-native-heatmap/lib/module/components/GestureWrapper.js

A modern, highly customizable React Native heatmap component library inspired by GitHub's contribution calendar

"use strict";

/**
 * Gesture Wrapper component for React Native Heatmap
 * Provides pan, zoom, and gesture handling when react-native-gesture-handler is available
 */

import React, { useCallback, useRef } from 'react';
import { View } from 'react-native';
import { isGestureHandlerAvailable } from "../utils/gestures.js";
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * Gesture Wrapper Component
 * Conditionally renders with gesture support if react-native-gesture-handler is available
 */
const GestureWrapper = ({
  children,
  config,
  style,
  contentSize: _contentSize,
  containerSize: _containerSize,
  onPanGesture,
  onZoomGesture,
  onSwipeGesture
}) => {
  const panRef = useRef(null);
  const pinchRef = useRef(null);

  // Check if gesture handler is available
  const gestureHandlerAvailable = isGestureHandlerAvailable();

  // If gestures are disabled or not available, render simple view
  if (!config.enabled || !gestureHandlerAvailable) {
    return /*#__PURE__*/_jsx(View, {
      style: style,
      children: children
    });
  }
  try {
    // Import gesture handler components
    const {
      GestureDetector,
      Gesture,
      GestureHandlerRootView
    } = require('react-native-gesture-handler');

    // Pan gesture
    const panGesture = config.pan ? Gesture.Pan().onUpdate(event => {
      onPanGesture?.(event);
    }).withRef(panRef) : undefined;

    // Pinch gesture
    const pinchGesture = config.zoom ? Gesture.Pinch().onUpdate(event => {
      onZoomGesture?.(event);
    }).withRef(pinchRef) : undefined;

    // Fling gesture for swipe detection
    const flingGesture = config.swipe ? Gesture.Fling().direction(Gesture.DIRECTIONS.UP | Gesture.DIRECTIONS.DOWN | Gesture.DIRECTIONS.LEFT | Gesture.DIRECTIONS.RIGHT).onEnd(event => {
      const {
        velocityX,
        velocityY
      } = event;

      // Determine swipe direction based on velocity
      if (Math.abs(velocityX) > Math.abs(velocityY)) {
        onSwipeGesture?.(velocityX > 0 ? 'right' : 'left');
      } else {
        onSwipeGesture?.(velocityY > 0 ? 'down' : 'up');
      }
    }) : undefined;

    // Combine gestures
    const gestures = [panGesture, pinchGesture, flingGesture].filter(Boolean);
    if (gestures.length === 0) {
      return /*#__PURE__*/_jsx(View, {
        style: style,
        children: children
      });
    }

    // Create composed gesture
    let composedGesture = gestures[0];
    for (let i = 1; i < gestures.length; i++) {
      if (gestures[i]) {
        composedGesture = Gesture.Simultaneous(composedGesture, gestures[i]);
      }
    }
    return /*#__PURE__*/_jsx(GestureHandlerRootView, {
      style: style,
      children: /*#__PURE__*/_jsx(GestureDetector, {
        gesture: composedGesture,
        children: /*#__PURE__*/_jsx(View, {
          style: {
            flex: 1
          },
          children: children
        })
      })
    });
  } catch (error) {
    // Fallback if gesture handler import fails
    console.warn('react-native-gesture-handler not available, gestures disabled');
    return /*#__PURE__*/_jsx(View, {
      style: style,
      children: children
    });
  }
};

/**
 * Simple gesture wrapper for basic touch handling
 * Used when react-native-gesture-handler is not available
 */
const SimpleGestureWrapper = ({
  children,
  style,
  onPanGesture
}) => {
  const handleTouchMove = useCallback(event => {
    if (onPanGesture) {
      // Simple pan gesture simulation
      const {
        locationX,
        locationY
      } = event.nativeEvent;
      onPanGesture({
        translationX: locationX,
        translationY: locationY
      });
    }
  }, [onPanGesture]);
  return /*#__PURE__*/_jsx(View, {
    style: style,
    onTouchMove: handleTouchMove,
    children: children
  });
};
export default GestureWrapper;
export { SimpleGestureWrapper };
//# sourceMappingURL=GestureWrapper.js.map