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

package/src/exports/PanResponder/Alternative.js

@@ -0,0 +1,408 @@
+/**
+ * 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
+ * @format
+ */
+
+/**
+ * PAN RESPONDER
+ *
+ * `PanResponder` uses the Responder System to reconcile several touches into
+ * a single gesture. It makes single-touch gestures resilient to extra touches,
+ * and can be used to recognize simple multi-touch gestures. For each handler,
+ * it provides a `gestureState` object alongside the ResponderEvent object.
+ *
+ * By default, `PanResponder` holds an `InteractionManager` handle to block
+ * long-running JS events from interrupting active gestures.
+ *
+ * A graphical explanation of the touch data flow:
+ *
+ * +----------------------------+             +--------------------------------+
+ * | ResponderTouchHistoryStore |             |TouchHistoryMath                |
+ * +----------------------------+             +----------+---------------------+
+ * |Global store of touchHistory|             |Allocation-less math util       |
+ * |including activeness, start |             |on touch history (centroids     |
+ * |position, prev/cur position.|             |and multitouch movement etc)    |
+ * |                            |             |                                |
+ * +----^-----------------------+             +----^---------------------------+
+ *      |                                          |
+ *      | (records relevant history                |
+ *      |  of touches relevant for                 |
+ *      |  implementing higher level               |
+ *      |  gestures)                               |
+ *      |                                          |
+ * +----+-----------------------+             +----|---------------------------+
+ * | ResponderEventPlugin       |             |    |   Your App/Component      |
+ * +----------------------------+             +----|---------------------------+
+ * |Negotiates which view gets  | Low level   |    |             High level    |
+ * |onResponderMove events.     | events w/   |  +-+-------+     events w/     |
+ * |Also records history into   | touchHistory|  |   Pan   |     multitouch +  |
+ * |ResponderTouchHistoryStore. +---------------->Responder+-----> accumulative|
+ * +----------------------------+ attached to |  |         |     distance and  |
+ *                                 each event |  +---------+     velocity.     |
+ *                                            |                                |
+ *                                            |                                |
+ *                                            +--------------------------------+
+ */
+
+'use strict';
+
+import type { PressEvent } from '../../vendor/react-native/Types/CoreEventTypes';
+
+import InteractionManager from '../InteractionManager';
+import TouchHistoryMath from '../../vendor/react-native/TouchHistoryMath';
+
+export type GestureState = {|
+  // ID of the gestureState; persisted as long as there's a pointer on screen
+  stateID: number,
+  // The latest screen coordinates of the gesture
+  x: number,
+  // The latest screen coordinates of the gesture
+  y: number,
+  // The screen coordinates of the responder grant
+  initialX: number,
+  // The screen coordinates of the responder grant
+  initialY: number,
+  // Accumulated distance of the gesture since it started
+  deltaX: number,
+  // Accumulated distance of the gesture since it started
+  deltaY: number,
+  // Current velocity of the gesture
+  velocityX: number,
+  // Current velocity of the gesture
+  velocityY: number,
+  // Number of touches currently on screen
+  numberActiveTouches: number,
+  _accountsForMovesUpTo: number
+|};
+
+type ActiveCallback = (
+  event: PressEvent,
+  gestureState: GestureState
+) => boolean;
+type PassiveCallback = (event: PressEvent, gestureState: GestureState) => void;
+
+type PanResponderConfig = $ReadOnly<{|
+  // Negotiate for the responder
+  onMoveShouldSetResponder?: ?ActiveCallback,
+  onMoveShouldSetResponderCapture?: ?ActiveCallback,
+  onStartShouldSetResponder?: ?ActiveCallback,
+  onStartShouldSetResponderCapture?: ?ActiveCallback,
+  onPanTerminationRequest?: ?ActiveCallback,
+  // Gesture started
+  onPanGrant?: ?PassiveCallback,
+  // Gesture rejected
+  onPanReject?: ?PassiveCallback,
+  // A pointer touched the screen
+  onPanStart?: ?PassiveCallback,
+  // A pointer moved
+  onPanMove?: ?PassiveCallback,
+  // A pointer was removed from the screen
+  onPanEnd?: ?PassiveCallback,
+  // All pointers removed, gesture successful
+  onPanRelease?: ?PassiveCallback,
+  // Gesture cancelled
+  onPanTerminate?: ?PassiveCallback
+|}>;
+
+const {
+  currentCentroidX,
+  currentCentroidY,
+  currentCentroidXOfTouchesChangedAfter,
+  currentCentroidYOfTouchesChangedAfter,
+  previousCentroidXOfTouchesChangedAfter,
+  previousCentroidYOfTouchesChangedAfter
+} = TouchHistoryMath;
+
+const PanResponder = {
+  _initializeGestureState(gestureState: GestureState) {
+    gestureState.x = 0;
+    gestureState.y = 0;
+    gestureState.initialX = 0;
+    gestureState.initialY = 0;
+    gestureState.deltaX = 0;
+    gestureState.deltaY = 0;
+    gestureState.velocityX = 0;
+    gestureState.velocityY = 0;
+    gestureState.numberActiveTouches = 0;
+    // All `gestureState` accounts for timeStamps up until:
+    gestureState._accountsForMovesUpTo = 0;
+  },
+
+  /**
+   * Take all recently moved touches, calculate how the centroid has changed just for those
+   * recently moved touches, and append that change to an accumulator. This is
+   * to (at least) handle the case where the user is moving three fingers, and
+   * then one of the fingers stops but the other two continue.
+   *
+   * This is very different than taking all of the recently moved touches and
+   * storing their centroid as `dx/dy`. For correctness, we must *accumulate
+   * changes* in the centroid of recently moved touches.
+   *
+   * There is also some nuance with how we handle multiple moved touches in a
+   * single event. Multiple touches generate two 'move' events, each of
+   * them triggering `onResponderMove`. But with the way `PanResponder` works,
+   * all of the gesture inference is performed on the first dispatch, since it
+   * looks at all of the touches. Therefore, `PanResponder` does not call
+   * `onResponderMove` passed the first dispatch. This diverges from the
+   * typical responder callback pattern (without using `PanResponder`), but
+   * avoids more dispatches than necessary.
+   *
+   * When moving two touches in opposite directions, the cumulative
+   * distance is zero in each dimension. When two touches move in parallel five
+   * pixels in the same direction, the cumulative distance is five, not ten. If
+   * two touches start, one moves five in a direction, then stops and the other
+   * touch moves fives in the same direction, the cumulative distance is ten.
+   *
+   * This logic requires a kind of processing of time "clusters" of touch events
+   * so that two touch moves that essentially occur in parallel but move every
+   * other frame respectively, are considered part of the same movement.
+   *
+   * x/y: If a move event has been observed, `(x, y)` is the centroid of the most
+   * recently moved "cluster" of active touches.
+   * deltaX/deltaY: Cumulative touch distance. Accounts for touch moves that are
+   * clustered together in time, moving the same direction. Only valid when
+   * currently responder (otherwise, it only represents the drag distance below
+   * the threshold).
+   */
+  _updateGestureStateOnMove(
+    gestureState: GestureState,
+    touchHistory: $PropertyType<PressEvent, 'touchHistory'>
+  ) {
+    const movedAfter = gestureState._accountsForMovesUpTo;
+    const prevX = previousCentroidXOfTouchesChangedAfter(
+      touchHistory,
+      movedAfter
+    );
+    const prevY = previousCentroidYOfTouchesChangedAfter(
+      touchHistory,
+      movedAfter
+    );
+    const prevDeltaX = gestureState.deltaX;
+    const prevDeltaY = gestureState.deltaY;
+
+    const x = currentCentroidXOfTouchesChangedAfter(touchHistory, movedAfter);
+    const y = currentCentroidYOfTouchesChangedAfter(touchHistory, movedAfter);
+    const deltaX = prevDeltaX + (x - prevX);
+    const deltaY = prevDeltaY + (y - prevY);
+    // TODO: This must be filtered intelligently.
+    const dt =
+      touchHistory.mostRecentTimeStamp - gestureState._accountsForMovesUpTo;
+
+    gestureState.deltaX = deltaX;
+    gestureState.deltaY = deltaY;
+    gestureState.numberActiveTouches = touchHistory.numberActiveTouches;
+    gestureState.velocityX = (deltaX - prevDeltaX) / dt;
+    gestureState.velocityY = (deltaY - prevDeltaY) / dt;
+    gestureState.x = x;
+    gestureState.y = y;
+    gestureState._accountsForMovesUpTo = touchHistory.mostRecentTimeStamp;
+  },
+
+  /**
+   * Enhanced versions of all of the responder callbacks that provide not only
+   * the `ResponderEvent`, but also the `PanResponder` gesture state.
+   *
+   * In general, for events that have capture equivalents, we update the
+   * gestureState once in the capture phase and can use it in the bubble phase
+   * as well.
+   */
+  create(config: PanResponderConfig): {|
+    getInteractionHandle: () => ?number,
+    panHandlers: {|
+      onMoveShouldSetResponder: (event: PressEvent) => boolean,
+      onMoveShouldSetResponderCapture: (event: PressEvent) => boolean,
+      onResponderEnd: (event: PressEvent) => void,
+      onResponderGrant: (event: PressEvent) => void,
+      onResponderMove: (event: PressEvent) => void,
+      onResponderReject: (event: PressEvent) => void,
+      onResponderRelease: (event: PressEvent) => void,
+      onResponderStart: (event: PressEvent) => void,
+      onResponderTerminate: (event: PressEvent) => void,
+      onResponderTerminationRequest: (event: PressEvent) => boolean,
+      onStartShouldSetResponder: (event: PressEvent) => boolean,
+      onStartShouldSetResponderCapture: (event: PressEvent) => boolean
+    |}
+  |} {
+    const interactionState = {
+      handle: (null: ?number)
+    };
+    const gestureState: GestureState = {
+      // Useful for debugging
+      stateID: Math.random(),
+      x: 0,
+      y: 0,
+      initialX: 0,
+      initialY: 0,
+      deltaX: 0,
+      deltaY: 0,
+      velocityX: 0,
+      velocityY: 0,
+      numberActiveTouches: 0,
+      _accountsForMovesUpTo: 0
+    };
+
+    const {
+      onStartShouldSetResponder,
+      onStartShouldSetResponderCapture,
+      onMoveShouldSetResponder,
+      onMoveShouldSetResponderCapture,
+      onPanGrant,
+      onPanStart,
+      onPanMove,
+      onPanEnd,
+      onPanRelease,
+      onPanReject,
+      onPanTerminate,
+      onPanTerminationRequest
+    } = config;
+
+    const panHandlers = {
+      onStartShouldSetResponder(event: PressEvent): boolean {
+        return onStartShouldSetResponder != null
+          ? onStartShouldSetResponder(event, gestureState)
+          : false;
+      },
+      onMoveShouldSetResponder(event: PressEvent): boolean {
+        return onMoveShouldSetResponder != null
+          ? onMoveShouldSetResponder(event, gestureState)
+          : false;
+      },
+      onStartShouldSetResponderCapture(event: PressEvent): boolean {
+        // TODO: Actually, we should reinitialize the state any time
+        // touches.length increases from 0 active to > 0 active.
+        if (event.nativeEvent.touches.length === 1) {
+          PanResponder._initializeGestureState(gestureState);
+        }
+        gestureState.numberActiveTouches =
+          event.touchHistory.numberActiveTouches;
+        return onStartShouldSetResponderCapture != null
+          ? onStartShouldSetResponderCapture(event, gestureState)
+          : false;
+      },
+
+      onMoveShouldSetResponderCapture(event: PressEvent): boolean {
+        const touchHistory = event.touchHistory;
+        // Responder system incorrectly dispatches should* to current responder
+        // Filter out any touch moves past the first one - we would have
+        // already processed multi-touch geometry during the first event.
+        // NOTE: commented out because new responder system should get it right.
+        //if (gestureState._accountsForMovesUpTo === touchHistory.mostRecentTimeStamp) {
+        //  return false;
+        //}
+        PanResponder._updateGestureStateOnMove(gestureState, touchHistory);
+        return onMoveShouldSetResponderCapture != null
+          ? onMoveShouldSetResponderCapture(event, gestureState)
+          : false;
+      },
+
+      onResponderGrant(event: PressEvent): void {
+        if (!interactionState.handle) {
+          interactionState.handle =
+            InteractionManager.createInteractionHandle();
+        }
+        gestureState.initialX = currentCentroidX(event.touchHistory);
+        gestureState.initialY = currentCentroidY(event.touchHistory);
+        gestureState.deltaX = 0;
+        gestureState.deltaY = 0;
+        if (onPanGrant != null) {
+          onPanGrant(event, gestureState);
+        }
+      },
+
+      onResponderReject(event: PressEvent): void {
+        clearInteractionHandle(
+          interactionState,
+          onPanReject,
+          event,
+          gestureState
+        );
+      },
+
+      onResponderStart(event: PressEvent): void {
+        const { numberActiveTouches } = event.touchHistory;
+        gestureState.numberActiveTouches = numberActiveTouches;
+        if (onPanStart != null) {
+          onPanStart(event, gestureState);
+        }
+      },
+
+      onResponderMove(event: PressEvent): void {
+        const touchHistory = event.touchHistory;
+        // Guard against the dispatch of two touch moves when there are two
+        // simultaneously changed touches.
+        if (
+          gestureState._accountsForMovesUpTo ===
+          touchHistory.mostRecentTimeStamp
+        ) {
+          return;
+        }
+        // Filter out any touch moves past the first one - we would have
+        // already processed multi-touch geometry during the first event.
+        PanResponder._updateGestureStateOnMove(gestureState, touchHistory);
+        if (onPanMove != null) {
+          onPanMove(event, gestureState);
+        }
+      },
+
+      onResponderEnd(event: PressEvent): void {
+        const { numberActiveTouches } = event.touchHistory;
+        gestureState.numberActiveTouches = numberActiveTouches;
+        clearInteractionHandle(interactionState, onPanEnd, event, gestureState);
+      },
+
+      onResponderRelease(event: PressEvent): void {
+        clearInteractionHandle(
+          interactionState,
+          onPanRelease,
+          event,
+          gestureState
+        );
+        PanResponder._initializeGestureState(gestureState);
+      },
+
+      onResponderTerminate(event: PressEvent): void {
+        clearInteractionHandle(
+          interactionState,
+          onPanTerminate,
+          event,
+          gestureState
+        );
+        PanResponder._initializeGestureState(gestureState);
+      },
+
+      onResponderTerminationRequest(event: PressEvent): boolean {
+        return onPanTerminationRequest != null
+          ? onPanTerminationRequest(event, gestureState)
+          : true;
+      }
+    };
+    return {
+      panHandlers,
+      getInteractionHandle(): ?number {
+        return interactionState.handle;
+      }
+    };
+  }
+};
+
+function clearInteractionHandle(
+  interactionState: { handle: ?number },
+  callback: ?(ActiveCallback | PassiveCallback),
+  event: PressEvent,
+  gestureState: GestureState
+) {
+  if (interactionState.handle) {
+    InteractionManager.clearInteractionHandle(interactionState.handle);
+    interactionState.handle = null;
+  }
+  if (callback) {
+    callback(event, gestureState);
+  }
+}
+
+export default PanResponder;

package/src/exports/PanResponder/index.js

@@ -0,0 +1,4 @@
+// @flow strict
+
+import PanResponder from '../../vendor/react-native/PanResponder';
+export default PanResponder;

package/src/exports/Picker/PickerItem.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * 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.
+ *
+ * @noflow
+ */
+
+import type { ColorValue } from '../../types';
+
+import createElement from '../createElement';
+
+type Props = {
+  color?: ColorValue,
+  label: string,
+  testID?: string,
+  value?: number | string
+};
+
+export default function PickerItem(props: Props) {
+  const { color, label, testID, value } = props;
+  const style = { color };
+  return createElement('option', { children: label, style, testID, value });
+}

package/src/exports/Picker/index.js

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * 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
+ */
+
+'use client';
+
+import type { PlatformMethods } from '../../types';
+import type { ViewProps } from '../View';
+
+import * as React from 'react';
+import createElement from '../createElement';
+import useMergeRefs from '../../modules/useMergeRefs';
+import usePlatformMethods from '../../modules/usePlatformMethods';
+import PickerItem from './PickerItem';
+import StyleSheet from '../StyleSheet';
+
+type PickerProps = {
+  ...ViewProps,
+  children?: typeof PickerItem | Array<typeof PickerItem>,
+  enabled?: boolean,
+  onValueChange?: (number | string, number) => void,
+  selectedValue?: number | string,
+  style?: any,
+  /* compat */
+  itemStyle?: any,
+  mode?: string,
+  prompt?: string
+};
+
+const Picker: React.AbstractComponent<
+  PickerProps,
+  HTMLElement & PlatformMethods
+> = React.forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    enabled,
+    onValueChange,
+    selectedValue,
+    style,
+    testID,
+    /* eslint-disable */
+    itemStyle,
+    mode,
+    prompt,
+    /* eslint-enable */
+    ...other
+  } = props;
+
+  const hostRef = React.useRef(null);
+
+  function handleChange(e: Object) {
+    const { selectedIndex, value } = e.target;
+    if (onValueChange) {
+      onValueChange(value, selectedIndex);
+    }
+  }
+
+  // $FlowFixMe
+  const supportedProps: any = {
+    children,
+    disabled: enabled === false ? true : undefined,
+    onChange: handleChange,
+    style: [styles.initial, style],
+    testID,
+    value: selectedValue,
+    ...other
+  };
+
+  const platformMethodsRef = usePlatformMethods(supportedProps);
+
+  const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
+
+  supportedProps.ref = setRef;
+
+  return createElement('select', supportedProps);
+});
+
+// $FlowFixMe
+Picker.Item = PickerItem;
+
+const styles = StyleSheet.create({
+  initial: {
+    fontFamily: 'System',
+    fontSize: 'inherit',
+    margin: 0
+  }
+});
+
+export default Picker;

package/src/exports/PixelRatio/index.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * 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 Dimensions from '../Dimensions';
+
+/**
+ * PixelRatio gives access to the device pixel density.
+ */
+export default class PixelRatio {
+  /**
+   * Returns the device pixel density.
+   */
+  static get(): number {
+    return Dimensions.get('window').scale;
+  }
+
+  /**
+   * No equivalent for Web
+   */
+  static getFontScale(): number {
+    return Dimensions.get('window').fontScale || PixelRatio.get();
+  }
+
+  /**
+   * Converts a layout size (dp) to pixel size (px).
+   * Guaranteed to return an integer number.
+   */
+  static getPixelSizeForLayoutSize(layoutSize: number): number {
+    return Math.round(layoutSize * PixelRatio.get());
+  }
+
+  /**
+   * Rounds a layout size (dp) to the nearest layout size that corresponds to
+   * an integer number of pixels. For example, on a device with a PixelRatio
+   * of 3, `PixelRatio.roundToNearestPixel(8.4) = 8.33`, which corresponds to
+   * exactly (8.33 * 3) = 25 pixels.
+   */
+  static roundToNearestPixel(layoutSize: number): number {
+    const ratio = PixelRatio.get();
+    return Math.round(layoutSize * ratio) / ratio;
+  }
+}

package/src/exports/Platform/index.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * 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
+ */
+
+const Platform = {
+  OS: 'web',
+  isTV: true, // TODO: detect TV platforms
+  select: (obj: Object): any => ('web' in obj ? obj.web : obj.default),
+  get isTesting(): boolean {
+    if (process.env.NODE_ENV === 'test') {
+      return true;
+    }
+    return false;
+  },
+  get Version(): string {
+    return '0.0.0';
+  }
+};
+
+export default Platform;