@hps1978/react-native-web-tv 0.21.2-tv.0

package/src/modules/useResponderEvents/ResponderTouchHistoryStore.js

@@ -0,0 +1,219 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type { Touch, TouchEvent } from './ResponderEventTypes';
+import { isStartish, isMoveish, isEndish } from './ResponderEventTypes';
+
+type TouchRecord = {|
+  currentPageX: number,
+  currentPageY: number,
+  currentTimeStamp: number,
+  previousPageX: number,
+  previousPageY: number,
+  previousTimeStamp: number,
+  startPageX: number,
+  startPageY: number,
+  startTimeStamp: number,
+  touchActive: boolean
+|};
+
+export type TouchHistory = $ReadOnly<{|
+  indexOfSingleActiveTouch: number,
+  mostRecentTimeStamp: number,
+  numberActiveTouches: number,
+  touchBank: Array<TouchRecord>
+|}>;
+
+/**
+ * Tracks the position and time of each active touch by `touch.identifier`. We
+ * should typically only see IDs in the range of 1-20 because IDs get recycled
+ * when touches end and start again.
+ */
+
+const __DEV__ = process.env.NODE_ENV !== 'production';
+const MAX_TOUCH_BANK = 20;
+
+function timestampForTouch(touch: Touch): number {
+  // The legacy internal implementation provides "timeStamp", which has been
+  // renamed to "timestamp".
+  return (touch: any).timeStamp || touch.timestamp;
+}
+
+/**
+ * TODO: Instead of making gestures recompute filtered velocity, we could
+ * include a built in velocity computation that can be reused globally.
+ */
+function createTouchRecord(touch: Touch): TouchRecord {
+  return {
+    touchActive: true,
+    startPageX: touch.pageX,
+    startPageY: touch.pageY,
+    startTimeStamp: timestampForTouch(touch),
+    currentPageX: touch.pageX,
+    currentPageY: touch.pageY,
+    currentTimeStamp: timestampForTouch(touch),
+    previousPageX: touch.pageX,
+    previousPageY: touch.pageY,
+    previousTimeStamp: timestampForTouch(touch)
+  };
+}
+
+function resetTouchRecord(touchRecord: TouchRecord, touch: Touch): void {
+  touchRecord.touchActive = true;
+  touchRecord.startPageX = touch.pageX;
+  touchRecord.startPageY = touch.pageY;
+  touchRecord.startTimeStamp = timestampForTouch(touch);
+  touchRecord.currentPageX = touch.pageX;
+  touchRecord.currentPageY = touch.pageY;
+  touchRecord.currentTimeStamp = timestampForTouch(touch);
+  touchRecord.previousPageX = touch.pageX;
+  touchRecord.previousPageY = touch.pageY;
+  touchRecord.previousTimeStamp = timestampForTouch(touch);
+}
+
+function getTouchIdentifier({ identifier }: Touch): number {
+  if (identifier == null) {
+    console.error('Touch object is missing identifier.');
+  }
+  if (__DEV__) {
+    if (identifier > MAX_TOUCH_BANK) {
+      console.error(
+        'Touch identifier %s is greater than maximum supported %s which causes ' +
+          'performance issues backfilling array locations for all of the indices.',
+        identifier,
+        MAX_TOUCH_BANK
+      );
+    }
+  }
+  return identifier;
+}
+
+function recordTouchStart(touch: Touch, touchHistory): void {
+  const identifier = getTouchIdentifier(touch);
+  const touchRecord = touchHistory.touchBank[identifier];
+  if (touchRecord) {
+    resetTouchRecord(touchRecord, touch);
+  } else {
+    touchHistory.touchBank[identifier] = createTouchRecord(touch);
+  }
+  touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
+}
+
+function recordTouchMove(touch: Touch, touchHistory): void {
+  const touchRecord = touchHistory.touchBank[getTouchIdentifier(touch)];
+  if (touchRecord) {
+    touchRecord.touchActive = true;
+    touchRecord.previousPageX = touchRecord.currentPageX;
+    touchRecord.previousPageY = touchRecord.currentPageY;
+    touchRecord.previousTimeStamp = touchRecord.currentTimeStamp;
+    touchRecord.currentPageX = touch.pageX;
+    touchRecord.currentPageY = touch.pageY;
+    touchRecord.currentTimeStamp = timestampForTouch(touch);
+    touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
+  } else {
+    console.warn(
+      'Cannot record touch move without a touch start.\n',
+      `Touch Move: ${printTouch(touch)}\n`,
+      `Touch Bank: ${printTouchBank(touchHistory)}`
+    );
+  }
+}
+
+function recordTouchEnd(touch: Touch, touchHistory): void {
+  const touchRecord = touchHistory.touchBank[getTouchIdentifier(touch)];
+  if (touchRecord) {
+    touchRecord.touchActive = false;
+    touchRecord.previousPageX = touchRecord.currentPageX;
+    touchRecord.previousPageY = touchRecord.currentPageY;
+    touchRecord.previousTimeStamp = touchRecord.currentTimeStamp;
+    touchRecord.currentPageX = touch.pageX;
+    touchRecord.currentPageY = touch.pageY;
+    touchRecord.currentTimeStamp = timestampForTouch(touch);
+    touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
+  } else {
+    console.warn(
+      'Cannot record touch end without a touch start.\n',
+      `Touch End: ${printTouch(touch)}\n`,
+      `Touch Bank: ${printTouchBank(touchHistory)}`
+    );
+  }
+}
+
+function printTouch(touch: Touch): string {
+  return JSON.stringify({
+    identifier: touch.identifier,
+    pageX: touch.pageX,
+    pageY: touch.pageY,
+    timestamp: timestampForTouch(touch)
+  });
+}
+
+function printTouchBank(touchHistory): string {
+  const { touchBank } = touchHistory;
+  let printed = JSON.stringify(touchBank.slice(0, MAX_TOUCH_BANK));
+  if (touchBank.length > MAX_TOUCH_BANK) {
+    printed += ' (original size: ' + touchBank.length + ')';
+  }
+  return printed;
+}
+
+export class ResponderTouchHistoryStore {
+  _touchHistory = {
+    touchBank: [], //Array<TouchRecord>
+    numberActiveTouches: 0,
+    // If there is only one active touch, we remember its location. This prevents
+    // us having to loop through all of the touches all the time in the most
+    // common case.
+    indexOfSingleActiveTouch: -1,
+    mostRecentTimeStamp: 0
+  };
+
+  recordTouchTrack(topLevelType: string, nativeEvent: TouchEvent): void {
+    const touchHistory = this._touchHistory;
+    if (isMoveish(topLevelType)) {
+      nativeEvent.changedTouches.forEach((touch) =>
+        recordTouchMove(touch, touchHistory)
+      );
+    } else if (isStartish(topLevelType)) {
+      nativeEvent.changedTouches.forEach((touch) =>
+        recordTouchStart(touch, touchHistory)
+      );
+      touchHistory.numberActiveTouches = nativeEvent.touches.length;
+      if (touchHistory.numberActiveTouches === 1) {
+        touchHistory.indexOfSingleActiveTouch =
+          nativeEvent.touches[0].identifier;
+      }
+    } else if (isEndish(topLevelType)) {
+      nativeEvent.changedTouches.forEach((touch) =>
+        recordTouchEnd(touch, touchHistory)
+      );
+      touchHistory.numberActiveTouches = nativeEvent.touches.length;
+      if (touchHistory.numberActiveTouches === 1) {
+        const { touchBank } = touchHistory;
+        for (let i = 0; i < touchBank.length; i++) {
+          const touchTrackToCheck = touchBank[i];
+          if (touchTrackToCheck != null && touchTrackToCheck.touchActive) {
+            touchHistory.indexOfSingleActiveTouch = i;
+            break;
+          }
+        }
+        if (__DEV__) {
+          const activeRecord = touchBank[touchHistory.indexOfSingleActiveTouch];
+          if (!(activeRecord != null && activeRecord.touchActive)) {
+            console.error('Cannot find single active touch.');
+          }
+        }
+      }
+    }
+  }
+
+  get touchHistory(): TouchHistory {
+    return this._touchHistory;
+  }
+}

package/src/modules/useResponderEvents/createResponderEvent.js

@@ -0,0 +1,206 @@
+/**
+ * Copyright (c) Nicolas Gallagher
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {
+  ResponderTouchHistoryStore,
+  TouchHistory
+} from './ResponderTouchHistoryStore';
+import type { TouchEvent } from './ResponderEventTypes';
+
+import getBoundingClientRect from '../../modules/getBoundingClientRect';
+
+export type ResponderEvent = {|
+  bubbles: boolean,
+  cancelable: boolean,
+  currentTarget: any,
+  defaultPrevented: ?boolean,
+  dispatchConfig: {
+    registrationName?: string,
+    phasedRegistrationNames?: {
+      bubbled: string,
+      captured: string
+    }
+  },
+  eventPhase: ?number,
+  isDefaultPrevented: () => boolean,
+  isPropagationStopped: () => boolean,
+  isTrusted: ?boolean,
+  preventDefault: () => void,
+  stopPropagation: () => void,
+  nativeEvent: TouchEvent,
+  persist: () => void,
+  target: ?any,
+  timeStamp: number,
+  touchHistory: TouchHistory
+|};
+
+const emptyFunction = () => {};
+const emptyObject = {};
+const emptyArray = [];
+
+/**
+ * Safari produces very large identifiers that would cause the `touchBank` array
+ * length to be so large as to crash the browser, if not normalized like this.
+ * In the future the `touchBank` should use an object/map instead.
+ */
+function normalizeIdentifier(identifier) {
+  return identifier > 20 ? identifier % 20 : identifier;
+}
+
+/**
+ * Converts a native DOM event to a ResponderEvent.
+ * Mouse events are transformed into fake touch events.
+ */
+export default function createResponderEvent(
+  domEvent: any,
+  responderTouchHistoryStore: ResponderTouchHistoryStore
+): ResponderEvent {
+  let rect;
+  let propagationWasStopped = false;
+  let changedTouches;
+  let touches;
+
+  const domEventChangedTouches = domEvent.changedTouches;
+  const domEventType = domEvent.type;
+
+  const metaKey = domEvent.metaKey === true;
+  const shiftKey = domEvent.shiftKey === true;
+  const force =
+    (domEventChangedTouches && domEventChangedTouches[0].force) || 0;
+  const identifier = normalizeIdentifier(
+    (domEventChangedTouches && domEventChangedTouches[0].identifier) || 0
+  );
+  const clientX =
+    (domEventChangedTouches && domEventChangedTouches[0].clientX) ||
+    domEvent.clientX;
+  const clientY =
+    (domEventChangedTouches && domEventChangedTouches[0].clientY) ||
+    domEvent.clientY;
+  const pageX =
+    (domEventChangedTouches && domEventChangedTouches[0].pageX) ||
+    domEvent.pageX;
+  const pageY =
+    (domEventChangedTouches && domEventChangedTouches[0].pageY) ||
+    domEvent.pageY;
+  const preventDefault =
+    typeof domEvent.preventDefault === 'function'
+      ? domEvent.preventDefault.bind(domEvent)
+      : emptyFunction;
+  const timestamp = domEvent.timeStamp;
+
+  function normalizeTouches(touches) {
+    return Array.prototype.slice.call(touches).map((touch) => {
+      return {
+        force: touch.force,
+        identifier: normalizeIdentifier(touch.identifier),
+        get locationX() {
+          return locationX(touch.clientX);
+        },
+        get locationY() {
+          return locationY(touch.clientY);
+        },
+        pageX: touch.pageX,
+        pageY: touch.pageY,
+        target: touch.target,
+        timestamp
+      };
+    });
+  }
+
+  if (domEventChangedTouches != null) {
+    changedTouches = normalizeTouches(domEventChangedTouches);
+    touches = normalizeTouches(domEvent.touches);
+  } else {
+    const emulatedTouches = [
+      {
+        force,
+        identifier,
+        get locationX() {
+          return locationX(clientX);
+        },
+        get locationY() {
+          return locationY(clientY);
+        },
+        pageX,
+        pageY,
+        target: domEvent.target,
+        timestamp
+      }
+    ];
+    changedTouches = emulatedTouches;
+    touches =
+      domEventType === 'mouseup' || domEventType === 'dragstart'
+        ? emptyArray
+        : emulatedTouches;
+  }
+
+  const responderEvent = {
+    bubbles: true,
+    cancelable: true,
+    // `currentTarget` is set before dispatch
+    currentTarget: null,
+    defaultPrevented: domEvent.defaultPrevented,
+    dispatchConfig: emptyObject,
+    eventPhase: domEvent.eventPhase,
+    isDefaultPrevented() {
+      return domEvent.defaultPrevented;
+    },
+    isPropagationStopped() {
+      return propagationWasStopped;
+    },
+    isTrusted: domEvent.isTrusted,
+    nativeEvent: {
+      altKey: false,
+      ctrlKey: false,
+      metaKey,
+      shiftKey,
+      changedTouches,
+      force,
+      identifier,
+      get locationX() {
+        return locationX(clientX);
+      },
+      get locationY() {
+        return locationY(clientY);
+      },
+      pageX,
+      pageY,
+      target: domEvent.target,
+      timestamp,
+      touches,
+      type: domEventType
+    },
+    persist: emptyFunction,
+    preventDefault,
+    stopPropagation() {
+      propagationWasStopped = true;
+    },
+    target: domEvent.target,
+    timeStamp: timestamp,
+    touchHistory: responderTouchHistoryStore.touchHistory
+  };
+
+  // Using getters and functions serves two purposes:
+  // 1) The value of `currentTarget` is not initially available.
+  // 2) Measuring the clientRect may cause layout jank and should only be done on-demand.
+  function locationX(x) {
+    rect = rect || getBoundingClientRect(responderEvent.currentTarget);
+    if (rect) {
+      return x - rect.left;
+    }
+  }
+  function locationY(y) {
+    rect = rect || getBoundingClientRect(responderEvent.currentTarget);
+    if (rect) {
+      return y - rect.top;
+    }
+  }
+
+  return responderEvent;
+}

package/src/modules/useResponderEvents/index.js

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) Nicolas Gallagher
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * Hook for integrating the Responder System into React
+ *
+ *   function SomeComponent({ onStartShouldSetResponder }) {
+ *     const ref = useRef(null);
+ *     useResponderEvents(ref, { onStartShouldSetResponder });
+ *     return <div ref={ref} />
+ *   }
+ */
+
+import type { ResponderConfig } from './ResponderSystem';
+
+import * as React from 'react';
+import * as ResponderSystem from './ResponderSystem';
+
+const emptyObject = {};
+let idCounter = 0;
+
+function useStable<T>(getInitialValue: () => T): T {
+  const ref = React.useRef<T | null>(null);
+  if (ref.current == null) {
+    ref.current = getInitialValue();
+  }
+  return ref.current;
+}
+
+export default function useResponderEvents(
+  hostRef: any,
+  config: ResponderConfig = emptyObject
+) {
+  const id = useStable(() => idCounter++);
+  const isAttachedRef = React.useRef(false);
+
+  // This is a separate effects so it doesn't run when the config changes.
+  // On initial mount, attach global listeners if needed.
+  // On unmount, remove node potentially attached to the Responder System.
+  React.useEffect(() => {
+    ResponderSystem.attachListeners();
+    return () => {
+      ResponderSystem.removeNode(id);
+    };
+  }, [id]);
+
+  // Register and unregister with the Responder System as necessary
+  React.useEffect(() => {
+    const {
+      onMoveShouldSetResponder,
+      onMoveShouldSetResponderCapture,
+      onScrollShouldSetResponder,
+      onScrollShouldSetResponderCapture,
+      onSelectionChangeShouldSetResponder,
+      onSelectionChangeShouldSetResponderCapture,
+      onStartShouldSetResponder,
+      onStartShouldSetResponderCapture
+    } = config;
+
+    const requiresResponderSystem =
+      onMoveShouldSetResponder != null ||
+      onMoveShouldSetResponderCapture != null ||
+      onScrollShouldSetResponder != null ||
+      onScrollShouldSetResponderCapture != null ||
+      onSelectionChangeShouldSetResponder != null ||
+      onSelectionChangeShouldSetResponderCapture != null ||
+      onStartShouldSetResponder != null ||
+      onStartShouldSetResponderCapture != null;
+
+    const node = hostRef.current;
+
+    if (requiresResponderSystem) {
+      ResponderSystem.addNode(id, node, config);
+      isAttachedRef.current = true;
+    } else if (isAttachedRef.current) {
+      ResponderSystem.removeNode(id);
+      isAttachedRef.current = false;
+    }
+  }, [config, hostRef, id]);
+
+  React.useDebugValue({
+    isResponder: hostRef.current === ResponderSystem.getResponderNode()
+  });
+  React.useDebugValue(config);
+}

package/src/modules/useResponderEvents/utils.js

@@ -0,0 +1,179 @@
+/**
+ * Copyright (c) Nicolas Gallagher
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import isSelectionValid from '../../modules/isSelectionValid';
+
+const keyName = '__reactResponderId';
+
+function getEventPath(domEvent: any): Array<any> {
+  // The 'selectionchange' event always has the 'document' as the target.
+  // Use the anchor node as the initial target to reconstruct a path.
+  // (We actually only need the first "responder" node in practice.)
+  if (domEvent.type === 'selectionchange') {
+    const target = window.getSelection().anchorNode;
+    return composedPathFallback(target);
+  } else {
+    const path =
+      domEvent.composedPath != null
+        ? domEvent.composedPath()
+        : composedPathFallback(domEvent.target);
+    return path;
+  }
+}
+
+function composedPathFallback(target: any): Array<any> {
+  const path = [];
+  while (target != null && target !== document.body) {
+    path.push(target);
+    target = target.parentNode;
+  }
+  return path;
+}
+
+/**
+ * Retrieve the responderId from a host node
+ */
+function getResponderId(node: any): ?number {
+  if (node != null) {
+    return node[keyName];
+  }
+  return null;
+}
+
+/**
+ * Store the responderId on a host node
+ */
+export function setResponderId(node: any, id: number) {
+  if (node != null) {
+    node[keyName] = id;
+  }
+}
+
+/**
+ * Filter the event path to contain only the nodes attached to the responder system
+ */
+export function getResponderPaths(domEvent: any): {|
+  idPath: Array<number>,
+  nodePath: Array<any>
+|} {
+  const idPath = [];
+  const nodePath = [];
+  const eventPath = getEventPath(domEvent);
+  for (let i = 0; i < eventPath.length; i++) {
+    const node = eventPath[i];
+    const id = getResponderId(node);
+    if (id != null) {
+      idPath.push(id);
+      nodePath.push(node);
+    }
+  }
+  return { idPath, nodePath };
+}
+
+/**
+ * Walk the paths and find the first common ancestor
+ */
+export function getLowestCommonAncestor(
+  pathA: Array<any>,
+  pathB: Array<any>
+): any {
+  let pathALength = pathA.length;
+  let pathBLength = pathB.length;
+  if (
+    // If either path is empty
+    pathALength === 0 ||
+    pathBLength === 0 ||
+    // If the last elements aren't the same there can't be a common ancestor
+    // that is connected to the responder system
+    pathA[pathALength - 1] !== pathB[pathBLength - 1]
+  ) {
+    return null;
+  }
+
+  let itemA = pathA[0];
+  let indexA = 0;
+  let itemB = pathB[0];
+  let indexB = 0;
+
+  // If A is deeper, skip indices that can't match.
+  if (pathALength - pathBLength > 0) {
+    indexA = pathALength - pathBLength;
+    itemA = pathA[indexA];
+    pathALength = pathBLength;
+  }
+
+  // If B is deeper, skip indices that can't match
+  if (pathBLength - pathALength > 0) {
+    indexB = pathBLength - pathALength;
+    itemB = pathB[indexB];
+    pathBLength = pathALength;
+  }
+
+  // Walk in lockstep until a match is found
+  let depth = pathALength;
+  while (depth--) {
+    if (itemA === itemB) {
+      return itemA;
+    }
+    itemA = pathA[indexA++];
+    itemB = pathB[indexB++];
+  }
+  return null;
+}
+
+/**
+ * Determine whether any of the active touches are within the current responder.
+ * This cannot rely on W3C `targetTouches`, as neither IE11 nor Safari implement it.
+ */
+export function hasTargetTouches(target: any, touches: any): boolean {
+  if (!touches || touches.length === 0) {
+    return false;
+  }
+  for (let i = 0; i < touches.length; i++) {
+    const node = touches[i].target;
+    if (node != null) {
+      if (target.contains(node)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+/**
+ * Ignore 'selectionchange' events that don't correspond with a person's intent to
+ * select text.
+ */
+export function hasValidSelection(domEvent: any): boolean {
+  if (domEvent.type === 'selectionchange') {
+    return isSelectionValid();
+  }
+  return domEvent.type === 'select';
+}
+
+/**
+ * Events are only valid if the primary button was used without specific modifier keys.
+ */
+export function isPrimaryPointerDown(domEvent: any): boolean {
+  const { altKey, button, buttons, ctrlKey, type } = domEvent;
+  const isTouch = type === 'touchstart' || type === 'touchmove';
+  const isPrimaryMouseDown =
+    type === 'mousedown' && (button === 0 || buttons === 1);
+  const isPrimaryMouseMove = type === 'mousemove' && buttons === 1;
+  const noModifiers = altKey === false && ctrlKey === false;
+
+  if (
+    isTouch ||
+    (isPrimaryMouseDown && noModifiers) ||
+    (isPrimaryMouseMove && noModifiers)
+  ) {
+    return true;
+  }
+  return false;
+}