replace PanResponder with react-native-gesture-handler by chatGPT-4

GestureHandler.tsx

// https://github.com/wuba/react-native-echarts/blob/v1.0.0/src/utils/events.ts
// replace PanResponder with react-native-gesture-handler by chatGPT-4

import React, { useRef, useMemo } from 'react';
import { PanGestureHandler, PinchGestureHandler, State } from 'react-native-gesture-handler';
import { getInstance } from 'zrender/lib/zrender';

declare type HandlerName =
  | 'click'
  | 'dblclick'
  | 'mousewheel'
  | 'mouseout'
  | 'mouseup'
  | 'mousedown'
  | 'mousemove'
  | 'contextmenu';

const noop = () => {};

function wrapTouch(event: any) {
  for (let i = 0; i < event.touches.length; ++i) {
    const touch = event.touches[i];
    touch.offsetX = touch.x;
    touch.offsetY = touch.y;
  }
  event.preventDefault = noop;
  event.stopPropagation = noop;
  event.stopImmediatePropagation = noop;
  return event;
}

function dispatchEvent(
  zrenderId: number,
  types: HandlerName[],
  nativeEvent: any,
  stage: 'start' | 'end' | 'change' | undefined,
  props: any = {
    zrX: nativeEvent.x,
    zrY: nativeEvent.y,
  }
) {
  if (zrenderId) {
    var handler = getInstance(zrenderId).handler;
    types.forEach(function (type) {
      handler.dispatch(type, {
        preventDefault: noop,
        stopImmediatePropagation: noop,
        stopPropagation: noop,
        ...props,
      });
      stage && handler.processGesture(wrapTouch(nativeEvent), stage);
    });
  }
}

export const GestureHandler = ({ zrenderId, children }) => {
  const panRef = useRef();
  const pinchRef = useRef();

  const onGestureEvent = useMemo(
    () => ({ nativeEvent }) => {
      dispatchEvent(zrenderId, ['mousemove'], nativeEvent, 'change');
    },
    [zrenderId]
  );

  const onHandlerStateChange = useMemo(
    () => ({ nativeEvent }) => {
      const { state } = nativeEvent;

      if (state === State.BEGAN) {
        dispatchEvent(zrenderId, ['mousedown', 'mousemove'], nativeEvent, 'start');
      } else if (state === State.END) {
        dispatchEvent(zrenderId, ['mouseup', 'click'], nativeEvent, 'end');
      }
    },
    [zrenderId]
  );

  const onPinchGestureEvent = useMemo(
    () => ({ nativeEvent }) => {
      const { scale, focalX, focalY } = nativeEvent;
      dispatchEvent(zrenderId, ['mousewheel'], nativeEvent, undefined, {
        zrX: focalX,
        zrY: focalY,
        zrDelta: (scale - 1) / 120,
      });
    },
    [zrenderId]
  );

  return (
    <PanGestureHandler
      ref={panRef}
      simultaneousHandlers={pinchRef}
      onGestureEvent={onGestureEvent}
      onHandlerStateChange={onHandlerStateChange}
    >
      <PinchGestureHandler
        ref={pinchRef}
        simultaneousHandlers={panRef}
        onGestureEvent={onPinchGestureEvent}
      >
        {children}
      </PinchGestureHandler>
    </PanGestureHandler>
  );
};