@vkontakte/vkui 6.5.3 → 6.7.0

package/src/components/Touch/Touch.tsx

@@ -1,10 +1,16 @@
 import * as React from 'react';
-import { useEventListener } from '../../hooks/useEventListener';
-import { useExternRef } from '../../hooks/useExternRef';
-import { useDOM } from '../../lib/dom';
-import { coordX, coordY, getSupportedEvents, touchEnabled, VKUITouchEvent } from '../../lib/touch';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { HasComponent, HasRootRef } from '../../types';
+import { useStableCallback } from '../../hooks/useStableCallback';
+import { getWindow, isHTMLElement } from '../../lib/dom';
+import { coordX, coordY, touchEnabled, type VKUITouchEvent } from '../../lib/touch';
+import type { HasComponent, HasRootRef } from '../../types';
+
+export interface CustomTouchEvent extends Gesture {
+  originalEvent: VKUITouchEvent;
+}
+
+export type HoverHandler = (outputEvent: MouseEvent) => void;
+
+export type CustomTouchEventHandler = (event: CustomTouchEvent) => void;
 
 export interface TouchProps
   extends React.AllHTMLAttributes<HTMLElement>,
@@ -17,17 +23,17 @@ export interface TouchProps
   useCapture?: boolean;
   slideThreshold?: number;
   noSlideClick?: boolean;
-  onEnter?: HoverHandler;
+  onEnter?: HoverHandler; // TODO [>=7] Заменить типы события в VKUITouchEvent на события из React
   onLeave?: HoverHandler;
-  onStart?: TouchEventHandler;
-  onStartX?: TouchEventHandler;
-  onStartY?: TouchEventHandler;
-  onMove?: TouchEventHandler;
-  onMoveX?: TouchEventHandler;
-  onMoveY?: TouchEventHandler;
-  onEnd?: TouchEventHandler;
-  onEndX?: TouchEventHandler;
-  onEndY?: TouchEventHandler;
+  onStart?: CustomTouchEventHandler; // TODO [>=7] Заменить типы события в VKUITouchEvent на события из React
+  onStartX?: CustomTouchEventHandler; // TODO [>=7] Заменить типы события в VKUITouchEvent на события из React
+  onStartY?: CustomTouchEventHandler; // TODO [>=7] Заменить типы события в VKUITouchEvent на события из React
+  onMove?: CustomTouchEventHandler;
+  onMoveX?: CustomTouchEventHandler;
+  onMoveY?: CustomTouchEventHandler;
+  onEnd?: CustomTouchEventHandler;
+  onEndX?: CustomTouchEventHandler;
+  onEndY?: CustomTouchEventHandler;
   stopPropagation?: boolean;
 }
 
@@ -50,15 +56,6 @@ export interface Gesture {
   shiftYAbs: number;
 }
 
-export interface TouchEvent extends Gesture {
-  originalEvent: VKUITouchEvent;
-}
-
-type HoverHandler = (outputEvent: MouseEvent) => void;
-export type TouchEventHandler = (e: TouchEvent) => void;
-export type ClickHandler = (e: React.MouseEvent<HTMLElement>) => void;
-export type DragHandler = (e: React.DragEvent<HTMLElement>) => void;
-
 /**
  * @see https://vkcom.github.io/VKUI/#/Touch
  */
@@ -66,12 +63,12 @@ export const Touch = ({
   onStart,
   onStartX,
   onStartY,
-  onMove: _onMove,
+  onMove,
   onMoveX,
   onMoveY,
-  onLeave,
   onEnter,
-  onEnd: _onEnd,
+  onLeave,
+  onEnd,
   onEndX,
   onEndY,
   onClickCapture,
@@ -83,178 +80,195 @@ export const Touch = ({
   noSlideClick = false,
   stopPropagation = false,
   ...restProps
-}: TouchProps): React.ReactNode => {
-  const { document } = useDOM();
-  const events = React.useMemo(getSupportedEvents, []);
+}: TouchProps) => {
+  const [isTouchEnabled] = React.useState(touchEnabled);
+  const gestureRef = React.useRef<Gesture | null>(null);
   const didSlide = React.useRef(false);
-  const gesture = React.useRef<Partial<Gesture> | null>(null);
-  const handle = (e: VKUITouchEvent, handlers: Array<TouchEventHandler | undefined | false>) => {
-    stopPropagation && e.stopPropagation();
-    handlers.forEach((cb) => {
-      const duration = Date.now() - (gesture.current?.startT?.getTime() ?? 0);
-      cb && cb({ ...(gesture.current as Gesture), duration, originalEvent: e });
-    });
-  };
+  const disposeTargetNativeGestureEvents = React.useRef<VoidFunction | null>(null);
 
-  const enterHandler = useEventListener(usePointerHover ? 'pointerenter' : 'mouseenter', onEnter);
-  const leaveHandler = useEventListener(usePointerHover ? 'pointerleave' : 'mouseleave', onLeave);
-  const startHandler = useEventListener(
-    events[0],
-    (e: VKUITouchEvent) => {
-      gesture.current = initGesture(coordX(e), coordY(e));
-
-      handle(e, [onStart, onStartX, onStartY]);
-      // 1 line, 2 bad specs, 2 workarounds:
-      subscribe(
-        touchEnabled()
-          ? // Touch events fire on initial target, and won't bubble if its removed
-            // see: #235, #1968, https://stackoverflow.com/a/45760014
-            (e.target as HTMLElement)
-          : // Mouse events fire on the element under pointer, so we lose move / end
-            // if pointer goes outside container.
-            // Can be fixed by PointerEvents' setPointerCapture later
-            document,
-      );
-    },
-    { capture: useCapture, passive: false },
-  );
-  const containerRef = useExternRef(getRootRef);
-
-  useIsomorphicLayoutEffect(() => {
-    const el = containerRef.current;
-    if (el) {
-      enterHandler.add(el);
-      leaveHandler.add(el);
-      startHandler.add(el);
+  const cleanupTargetNativeGestureEvents = () => {
+    gestureRef.current = null;
+    if (disposeTargetNativeGestureEvents.current) {
+      disposeTargetNativeGestureEvents.current();
+      disposeTargetNativeGestureEvents.current = null;
     }
-  }, [Component]);
+  };
 
-  function onMove(e: VKUITouchEvent) {
-    const { isPressed, isX, isY, startX = 0, startY = 0 } = gesture.current ?? {};
+  React.useEffect(() => cleanupTargetNativeGestureEvents, []);
 
-    if (isPressed) {
-      const clientX = coordX(e);
-      const clientY = coordY(e);
+  /**
+   * Note: используем `useStableCallback()`, чтобы не терялась область видимости `onEnd`/`onEndX`/`onEndY`.
+   */
+  const handleNativePointerUp = useStableCallback((event: MouseEvent | TouchEvent) => {
+    const gesture = gestureRef.current;
 
-      // смещения
-      const shiftX = clientX - startX;
-      const shiftY = clientY - startY;
+    /* istanbul ignore if: нужно для Typescript */
+    if (!gesture) {
+      return;
+    }
 
-      // абсолютные значения смещений
-      const shiftXAbs = Math.abs(shiftX);
-      const shiftYAbs = Math.abs(shiftY);
+    if (gesture.isPressed) {
+      dispatchUserHandlers(event, gesture, [onEnd, onEndX, onEndY], stopPropagation);
+    }
 
-      // Если определяем мультитач, то прерываем жест
-      if (!!e.touches && e.touches.length > 1) {
-        return onEnd(e);
+    if (isTouchEnabled) {
+      // https://github.com/VKCOM/VKUI/issues/4414
+      // если тач-устройство и был зафиксирован touchmove,
+      // то событие клика не вызывается
+      if (gesture.isSlide) {
+        didSlide.current = false;
       }
-
-      // если мы ещё не определились
-      if (!isX && !isY) {
-        const willBeX = shiftXAbs >= slideThreshold && shiftXAbs > shiftYAbs;
-        const willBeY = shiftYAbs >= slideThreshold && shiftYAbs > shiftXAbs;
-        const willBeSlidedX = willBeX && (!!onMoveX || !!_onMove);
-        const willBeSlidedY = willBeY && (!!onMoveY || !!_onMove);
-
-        if (gesture.current) {
-          Object.assign(gesture.current, {
-            isY: willBeY,
-            isX: willBeX,
-            isSlideX: willBeSlidedX,
-            isSlideY: willBeSlidedY,
-            isSlide: willBeSlidedX || willBeSlidedY,
-          });
-        }
+      // Если это был тач-евент, симулируем отмену hover
+      if (onLeave) {
+        onLeave(event as MouseEvent);
       }
+    } else {
+      didSlide.current = Boolean(gesture.isSlide);
+    }
 
-      if (gesture.current?.isSlide) {
-        Object.assign(gesture.current, {
-          clientX,
-          clientY,
-          shiftX,
-          shiftY,
-          shiftXAbs,
-          shiftYAbs,
-        });
-
-        handle(e, [
-          _onMove,
-          gesture.current.isSlideX && onMoveX,
-          gesture.current.isSlideY && onMoveY,
-        ]);
-      }
+    cleanupTargetNativeGestureEvents();
+  });
+
+  /**
+   * Note: используем `useStableCallback()`, чтобы не терялась область видимости `onMove`/`onMoveX`/`onMoveY`.
+   */
+  const handleNativePointerMove = useStableCallback((event: MouseEvent | TouchEvent) => {
+    const gesture = gestureRef.current;
+
+    /* istanbul ignore if: нужно для Typescript */
+    if (!gesture) {
+      return;
     }
-  }
 
-  function onEnd(e: VKUITouchEvent) {
-    const { isPressed, isSlide, isSlideX, isSlideY } = gesture.current ?? {};
+    const clientX = coordX(event);
+    const clientY = coordY(event);
+
+    // смещения
+    const shiftX = clientX - gesture.startX;
+    const shiftY = clientY - gesture.startY;
+
+    // абсолютные значения смещений
+    const shiftXAbs = Math.abs(shiftX);
+    const shiftYAbs = Math.abs(shiftY);
 
-    if (isPressed) {
-      handle(e, [_onEnd, isSlideY && onEndY, isSlideX && onEndX]);
+    // Если определяем мультитач, то прерываем жест
+    if ('touches' in event && event.touches.length > 1) {
+      return handleNativePointerUp(event);
     }
 
-    const isTouchEnabled = touchEnabled();
+    // если мы ещё не определились
+    if (!gesture.isX && !gesture.isY) {
+      const willBeX = shiftXAbs >= slideThreshold && shiftXAbs > shiftYAbs;
+      const willBeY = shiftYAbs >= slideThreshold && shiftYAbs > shiftXAbs;
+      const willBeSlidedX = willBeX && (!!onMoveX || !!onMove);
+      const willBeSlidedY = willBeY && (!!onMoveY || !!onMove);
 
-    if (isTouchEnabled && isSlide) {
-      // https://github.com/VKCOM/VKUI/issues/4414
-      // если тач-устройство и был зафиксирован touchmove,
-      // то событие клика не вызывается
-      didSlide.current = false;
-    } else {
-      didSlide.current = Boolean(isSlide);
+      gesture.isY = willBeY;
+      gesture.isX = willBeX;
+      gesture.isSlideX = willBeSlidedX;
+      gesture.isSlideY = willBeSlidedY;
+      gesture.isSlide = willBeSlidedX || willBeSlidedY;
     }
-    gesture.current = {};
 
-    // Если это был тач-евент, симулируем отмену hover
-    if (isTouchEnabled) {
-      onLeave && onLeave(e);
+    if (gesture.isSlide) {
+      gesture.clientX = clientX;
+      gesture.clientY = clientY;
+      gesture.shiftX = shiftX;
+      gesture.shiftY = shiftY;
+      gesture.shiftXAbs = shiftXAbs;
+      gesture.shiftYAbs = shiftYAbs;
+
+      dispatchUserHandlers(event, gesture, [onMove, onMoveX, onMoveY], stopPropagation);
     }
-    unsubscribe();
-  }
+  });
+
+  const handlePointerDown = (
+    event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
+  ) => {
+    const nativeEvent = event.nativeEvent;
+
+    gestureRef.current = initGesture(coordX(nativeEvent), coordY(nativeEvent));
+
+    const shouldCallDirectionHandlerOnlyIsSlide = false;
+    dispatchUserHandlers(
+      event,
+      gestureRef.current,
+      [onStart, onStartX, onStartY],
+      stopPropagation,
+      shouldCallDirectionHandlerOnlyIsSlide,
+    );
+
+    const eventOptions = { capture: useCapture, passive: false };
+
+    // FIXME: заменить touch/mouse-события ниже на pointer-события после того, как бразуеры из
+    // .browserslistrc начнут поддерживать его (см. https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#browser_compatibility).
+    if (isTouchEnabled) {
+      if (isHTMLElement(event.target)) {
+        // Тач-события не всплывают, поэтому навешиваем события на целевой элемент
+        // см. #235, #1968, https://stackoverflow.com/a/45760014
+        const target = event.target;
+
+        target.addEventListener('touchmove', handleNativePointerMove, eventOptions);
+        target.addEventListener('touchend', handleNativePointerUp, eventOptions);
+        target.addEventListener('touchcancel', handleNativePointerUp, eventOptions);
 
-  const listenerParams = { capture: useCapture, passive: false };
-  const listeners = [
-    useEventListener(events[1], onMove, listenerParams),
-    useEventListener(events[2], onEnd, listenerParams),
-    useEventListener(events[3], onEnd, listenerParams),
-  ];
-  function subscribe(el: HTMLElement | Document | null | undefined) {
-    if (el) {
-      listeners.forEach((l) => l.add(el));
+        disposeTargetNativeGestureEvents.current = () => {
+          target.removeEventListener('touchmove', handleNativePointerMove, eventOptions);
+          target.removeEventListener('touchend', handleNativePointerUp, eventOptions);
+          target.removeEventListener('touchcancel', handleNativePointerUp, eventOptions);
+        };
+      }
+    } else {
+      // Используем события на Document, т.к. mouse-события на целевом элементе могут теряться при
+      // выходе за границы этого элемента.
+      const doc = getWindow(event.currentTarget).document;
+
+      doc.addEventListener('mousemove', handleNativePointerMove, eventOptions);
+      doc.addEventListener('mouseup', handleNativePointerUp, eventOptions);
+      doc.addEventListener('mouseleave', handleNativePointerUp, eventOptions);
+
+      disposeTargetNativeGestureEvents.current = () => {
+        doc.removeEventListener('mousemove', handleNativePointerMove, eventOptions);
+        doc.removeEventListener('mouseup', handleNativePointerUp, eventOptions);
+        doc.removeEventListener('mouseleave', handleNativePointerUp, eventOptions);
+      };
     }
-  }
-  function unsubscribe() {
-    listeners.forEach((l) => l.remove());
-  }
+  };
+
+  const handlePointerEnter = onEnter
+    ? (event: React.MouseEvent<HTMLElement>) => onEnter(event.nativeEvent)
+    : undefined;
+
+  const handlePointerLeave = onLeave
+    ? (event: React.MouseEvent<HTMLElement>) => onLeave(event.nativeEvent)
+    : undefined;
 
   /**
-   * Обработчик событий dragstart
    * Отменяет нативное браузерное поведение для вложенных ссылок и изображений
    */
-  const onDragStart = (e: React.DragEvent<HTMLElement>) => {
-    const target = e.target as HTMLElement;
+  const handleDragStart = (event: React.DragEvent<HTMLElement>) => {
+    const target = event.target as HTMLElement;
     if (target.tagName === 'A' || target.tagName === 'IMG') {
-      e.preventDefault();
+      event.preventDefault();
     }
   };
 
   /**
-   * Обработчик клика по компоненту
    * Отменяет переход по вложенной ссылке, если был зафиксирован свайп
    */
-  const postGestureClick: typeof onClickCapture = (e) => {
+  const handleClickCapture: typeof onClickCapture = (event) => {
     if (!didSlide.current) {
-      return onClickCapture && onClickCapture(e);
+      return onClickCapture && onClickCapture(event);
     }
 
     if (noSlideClick) {
-      e.stopPropagation();
+      event.stopPropagation();
 
       // https://github.com/VKCOM/VKUI/issues/1977
       // https://github.com/VKCOM/VKUI/issues/3892
-      e.preventDefault();
+      event.preventDefault();
     } else {
-      onClickCapture && onClickCapture(e);
+      onClickCapture && onClickCapture(event);
     }
 
     didSlide.current = false;
@@ -263,9 +277,20 @@ export const Touch = ({
   return (
     <Component
       {...restProps}
-      onDragStart={onDragStart}
-      onClickCapture={postGestureClick}
-      ref={containerRef}
+      ref={getRootRef}
+      onDragStart={handleDragStart}
+      onClickCapture={handleClickCapture}
+      // onEnter
+      onPointerEnter={usePointerHover ? handlePointerEnter : undefined}
+      onMouseEnter={!usePointerHover ? handlePointerEnter : undefined}
+      // onLeave
+      onPointerLeave={usePointerHover ? handlePointerLeave : undefined}
+      onMouseLeave={!usePointerHover ? handlePointerLeave : undefined}
+      // handlePointerDown
+      onTouchStartCapture={isTouchEnabled && useCapture ? handlePointerDown : undefined}
+      onTouchStart={isTouchEnabled && !useCapture ? handlePointerDown : undefined}
+      onMouseDownCapture={!isTouchEnabled && useCapture ? handlePointerDown : undefined}
+      onMouseDown={!isTouchEnabled && !useCapture ? handlePointerDown : undefined}
     />
   );
 };
@@ -290,3 +315,51 @@ function initGesture(startX: number, startY: number): Gesture {
     shiftYAbs: 0,
   };
 }
+
+type Handlers = [
+  CustomTouchEventHandler | undefined,
+  CustomTouchEventHandler | undefined,
+  CustomTouchEventHandler | undefined,
+];
+
+function dispatchUserHandlers(
+  event: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent,
+  gesture: Gesture,
+  [handler, handlerX, handlerY]: Handlers,
+  stopPropagation?: boolean,
+  shouldCallDirectionHandlerOnlyIsSlide = true,
+) {
+  if (stopPropagation) {
+    event.stopPropagation();
+  }
+
+  const data = {
+    ...gesture,
+    originalEvent: event as unknown as VKUITouchEvent,
+    duration: Date.now() - gesture.startT.getTime(),
+  };
+
+  if (handler) {
+    handler(data);
+  }
+
+  if (handlerX) {
+    if (shouldCallDirectionHandlerOnlyIsSlide) {
+      if (gesture.isSlideX) {
+        handlerX(data);
+      }
+    } else {
+      handlerX(data);
+    }
+  }
+
+  if (handlerY) {
+    if (shouldCallDirectionHandlerOnlyIsSlide) {
+      if (gesture.isSlideY) {
+        handlerY(data);
+      }
+    } else {
+      handlerY(data);
+    }
+  }
+}