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

package/dist/modules/usePressEvents/PressResponder.js.flow

@@ -0,0 +1,216 @@
+/**
+ * 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 strict-local
+ * @format
+ */
+
+'use strict';
+
+type ClickEvent = any;
+type KeyboardEvent = any;
+type ResponderEvent = any;
+export type PressResponderConfig = $ReadOnly<{|
+  // The gesture can be interrupted by a parent gesture, e.g., scroll.
+  // Defaults to true.
+  cancelable?: ?boolean,
+  // Whether to disable initialization of the press gesture.
+  disabled?: ?boolean,
+  // Duration (in addition to `delayPressStart`) after which a press gesture is
+  // considered a long press gesture. Defaults to 500 (milliseconds).
+  delayLongPress?: ?number,
+  // Duration to wait after press down before calling `onPressStart`.
+  delayPressStart?: ?number,
+  // Duration to wait after letting up before calling `onPressEnd`.
+  delayPressEnd?: ?number,
+  // Called when a long press gesture has been triggered.
+  onLongPress?: ?(event: ResponderEvent) => void,
+  // Called when a press gestute has been triggered.
+  onPress?: ?(event: ClickEvent) => void,
+  // Called when the press is activated to provide visual feedback.
+  onPressChange?: ?(event: ResponderEvent) => void,
+  // Called when the press is activated to provide visual feedback.
+  onPressStart?: ?(event: ResponderEvent) => void,
+  // Called when the press location moves. (This should rarely be used.)
+  onPressMove?: ?(event: ResponderEvent) => void,
+  // Called when the press is deactivated to undo visual feedback.
+  onPressEnd?: ?(event: ResponderEvent) => void,
+|}>;
+export type EventHandlers = $ReadOnly<{|
+  onClick: (event: ClickEvent) => void,
+  onContextMenu: (event: ClickEvent) => void,
+  onKeyDown: (event: KeyboardEvent) => void,
+  onResponderGrant: (event: ResponderEvent) => void,
+  onResponderMove: (event: ResponderEvent) => void,
+  onResponderRelease: (event: ResponderEvent) => void,
+  onResponderTerminate: (event: ResponderEvent) => void,
+  onResponderTerminationRequest: (event: ResponderEvent) => boolean,
+  onStartShouldSetResponder: (event: ResponderEvent) => boolean,
+|}>;
+type TouchState = 'NOT_RESPONDER' | 'RESPONDER_INACTIVE_PRESS_START' | 'RESPONDER_ACTIVE_PRESS_START' | 'RESPONDER_ACTIVE_LONG_PRESS_START' | 'ERROR';
+type TouchSignal = 'DELAY' | 'RESPONDER_GRANT' | 'RESPONDER_RELEASE' | 'RESPONDER_TERMINATED' | 'LONG_PRESS_DETECTED';
+const DELAY = 'DELAY';
+const ERROR = 'ERROR';
+const LONG_PRESS_DETECTED = 'LONG_PRESS_DETECTED';
+const NOT_RESPONDER = 'NOT_RESPONDER';
+const RESPONDER_ACTIVE_LONG_PRESS_START = 'RESPONDER_ACTIVE_LONG_PRESS_START';
+const RESPONDER_ACTIVE_PRESS_START = 'RESPONDER_ACTIVE_PRESS_START';
+const RESPONDER_INACTIVE_PRESS_START = 'RESPONDER_INACTIVE_PRESS_START';
+const RESPONDER_GRANT = 'RESPONDER_GRANT';
+const RESPONDER_RELEASE = 'RESPONDER_RELEASE';
+const RESPONDER_TERMINATED = 'RESPONDER_TERMINATED';
+const Transitions = Object.freeze({
+  NOT_RESPONDER: {
+    DELAY: ERROR,
+    RESPONDER_GRANT: RESPONDER_INACTIVE_PRESS_START,
+    RESPONDER_RELEASE: ERROR,
+    RESPONDER_TERMINATED: ERROR,
+    LONG_PRESS_DETECTED: ERROR
+  },
+  RESPONDER_INACTIVE_PRESS_START: {
+    DELAY: RESPONDER_ACTIVE_PRESS_START,
+    RESPONDER_GRANT: ERROR,
+    RESPONDER_RELEASE: NOT_RESPONDER,
+    RESPONDER_TERMINATED: NOT_RESPONDER,
+    LONG_PRESS_DETECTED: ERROR
+  },
+  RESPONDER_ACTIVE_PRESS_START: {
+    DELAY: ERROR,
+    RESPONDER_GRANT: ERROR,
+    RESPONDER_RELEASE: NOT_RESPONDER,
+    RESPONDER_TERMINATED: NOT_RESPONDER,
+    LONG_PRESS_DETECTED: RESPONDER_ACTIVE_LONG_PRESS_START
+  },
+  RESPONDER_ACTIVE_LONG_PRESS_START: {
+    DELAY: ERROR,
+    RESPONDER_GRANT: ERROR,
+    RESPONDER_RELEASE: NOT_RESPONDER,
+    RESPONDER_TERMINATED: NOT_RESPONDER,
+    LONG_PRESS_DETECTED: RESPONDER_ACTIVE_LONG_PRESS_START
+  },
+  ERROR: {
+    DELAY: NOT_RESPONDER,
+    RESPONDER_GRANT: RESPONDER_INACTIVE_PRESS_START,
+    RESPONDER_RELEASE: NOT_RESPONDER,
+    RESPONDER_TERMINATED: NOT_RESPONDER,
+    LONG_PRESS_DETECTED: NOT_RESPONDER
+  }
+});
+declare var getElementRole: (element: any) => any;
+declare var getElementType: (element: any) => any;
+declare var isActiveSignal: (signal: any) => any;
+declare var isButtonRole: (element: any) => any;
+declare var isPressStartSignal: (signal: any) => any;
+declare var isTerminalSignal: (signal: any) => any;
+declare var isValidKeyPress: (event: any) => any;
+const DEFAULT_LONG_PRESS_DELAY_MS = 450; // 500 - 50
+const DEFAULT_PRESS_DELAY_MS = 50;
+
+/**
+ * =========================== PressResponder Tutorial ===========================
+ *
+ * The `PressResponder` class helps you create press interactions by analyzing the
+ * geometry of elements and observing when another responder (e.g. ScrollView)
+ * has stolen the touch lock. It offers hooks for your component to provide
+ * interaction feedback to the user:
+ *
+ * - When a press has activated (e.g. highlight an element)
+ * - When a press has deactivated (e.g. un-highlight an element)
+ * - When a press sould trigger an action, meaning it activated and deactivated
+ *   while within the geometry of the element without the lock being stolen.
+ *
+ * A high quality interaction isn't as simple as you might think. There should
+ * be a slight delay before activation. Moving your finger beyond an element's
+ * bounds should trigger deactivation, but moving the same finger back within an
+ * element's bounds should trigger reactivation.
+ *
+ * In order to use `PressResponder`, do the following:
+ *
+ *     const pressResponder = new PressResponder(config);
+ *
+ * 2. Choose the rendered component who should collect the press events. On that
+ *    element, spread `pressability.getEventHandlers()` into its props.
+ *
+ *    return (
+ *      <View {...this.state.pressResponder.getEventHandlers()} />
+ *    );
+ *
+ * 3. Reset `PressResponder` when your component unmounts.
+ *
+ *    componentWillUnmount() {
+ *      this.state.pressResponder.reset();
+ *    }
+ *
+ * ==================== Implementation Details ====================
+ *
+ * `PressResponder` only assumes that there exists a `HitRect` node. The `PressRect`
+ * is an abstract box that is extended beyond the `HitRect`.
+ *
+ * # Geometry
+ *
+ *  ┌────────────────────────┐
+ *  │  ┌──────────────────┐  │ - Presses start anywhere within `HitRect`.
+ *  │  │  ┌────────────┐  │  │
+ *  │  │  │ VisualRect │  │  │
+ *  │  │  └────────────┘  │  │ - When pressed down for sufficient amount of time
+ *  │  │    HitRect       │  │   before letting up, `VisualRect` activates.
+ *  │  └──────────────────┘  │
+ *  │       Out Region   o   │
+ *  └────────────────────│───┘
+ *                       └────── When the press is released outside the `HitRect`,
+ *                               the responder is NOT eligible for a "press".
+ *
+ * # State Machine
+ *
+ * ┌───────────────┐ ◀──── RESPONDER_RELEASE
+ * │ NOT_RESPONDER │
+ * └───┬───────────┘ ◀──── RESPONDER_TERMINATED
+ *     │
+ *     │ RESPONDER_GRANT (HitRect)
+ *     │
+ *     ▼
+ * ┌─────────────────────┐          ┌───────────────────┐              ┌───────────────────┐
+ * │ RESPONDER_INACTIVE_ │  DELAY   │ RESPONDER_ACTIVE_ │  T + DELAY   │ RESPONDER_ACTIVE_ │
+ * │ PRESS_START         ├────────▶ │ PRESS_START       ├────────────▶ │ LONG_PRESS_START  │
+ * └─────────────────────┘          └───────────────────┘              └───────────────────┘
+ *
+ * T + DELAY => LONG_PRESS_DELAY + DELAY
+ *
+ * Not drawn are the side effects of each transition. The most important side
+ * effect is the invocation of `onLongPress`. Only when the browser produces a
+ * `click` event is `onPress` invoked.
+ */
+declare export default class PressResponder {
+  _config: PressResponderConfig,
+  _eventHandlers: ?EventHandlers,
+  _isPointerTouch: ?boolean,
+  _longPressDelayTimeout: ?TimeoutID,
+  _longPressDispatched: ?boolean,
+  _pressDelayTimeout: ?TimeoutID,
+  _pressOutDelayTimeout: ?TimeoutID,
+  _selectionTerminated: ?boolean,
+  _touchActivatePosition: ?$ReadOnly<{|
+    pageX: number,
+    pageY: number,
+  |}>,
+  _touchState: TouchState,
+  _responderElement: ?HTMLElement,
+  constructor(config: PressResponderConfig): any,
+  configure(config: PressResponderConfig): void,
+  reset(): void,
+  getEventHandlers(): EventHandlers,
+  _createEventHandlers(): EventHandlers,
+  _receiveSignal(signal: TouchSignal, event: ResponderEvent): void,
+  _performTransitionSideEffects(prevState: TouchState, nextState: TouchState, signal: TouchSignal, event: ResponderEvent): void,
+  _activate(event: ResponderEvent): void,
+  _deactivate(event: ResponderEvent): void,
+  _handleLongPress(event: ResponderEvent): void,
+  _cancelLongPressDelayTimeout(): void,
+  _cancelPressDelayTimeout(): void,
+  _cancelPressOutDelayTimeout(): void,
+}
+declare function normalizeDelay(delay: ?number, min: any, fallback: any): number;
+declare function getTouchFromResponderEvent(event: ResponderEvent): any;

package/dist/modules/usePressEvents/index.js

@@ -0,0 +1,36 @@
+/**
+ * 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.
+ *
+ * 
+ * @format
+ */
+
+'use strict';
+
+import PressResponder from './PressResponder';
+import { useDebugValue, useEffect, useRef } from 'react';
+export default function usePressEvents(hostRef, config) {
+  var pressResponderRef = useRef(null);
+  if (pressResponderRef.current == null) {
+    pressResponderRef.current = new PressResponder(config);
+  }
+  var pressResponder = pressResponderRef.current;
+
+  // Re-configure to use the current node and configuration.
+  useEffect(() => {
+    pressResponder.configure(config);
+  }, [config, pressResponder]);
+
+  // Reset the `pressResponder` when cleanup needs to occur. This is
+  // a separate effect because we do not want to rest the responder when `config` changes.
+  useEffect(() => {
+    return () => {
+      pressResponder.reset();
+    };
+  }, [pressResponder]);
+  useDebugValue(config);
+  return pressResponder.getEventHandlers();
+}

package/dist/modules/usePressEvents/index.js.flow

@@ -0,0 +1,16 @@
+/**
+ * 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 strict-local
+ * @format
+ */
+
+'use strict';
+
+import type { EventHandlers, PressResponderConfig } from './PressResponder';
+import PressResponder from './PressResponder';
+import { useDebugValue, useEffect, useRef } from 'react';
+declare export default function usePressEvents(hostRef: any, config: PressResponderConfig): EventHandlers;

package/dist/modules/useResponderEvents/ResponderEventTypes.js

@@ -0,0 +1,41 @@
+/**
+ * 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.
+ *
+ * 
+ */
+
+export var BLUR = 'blur';
+export var CONTEXT_MENU = 'contextmenu';
+export var FOCUS_OUT = 'focusout';
+export var MOUSE_DOWN = 'mousedown';
+export var MOUSE_MOVE = 'mousemove';
+export var MOUSE_UP = 'mouseup';
+export var MOUSE_CANCEL = 'dragstart';
+export var TOUCH_START = 'touchstart';
+export var TOUCH_MOVE = 'touchmove';
+export var TOUCH_END = 'touchend';
+export var TOUCH_CANCEL = 'touchcancel';
+export var SCROLL = 'scroll';
+export var SELECT = 'select';
+export var SELECTION_CHANGE = 'selectionchange';
+export function isStartish(eventType) {
+  return eventType === TOUCH_START || eventType === MOUSE_DOWN;
+}
+export function isMoveish(eventType) {
+  return eventType === TOUCH_MOVE || eventType === MOUSE_MOVE;
+}
+export function isEndish(eventType) {
+  return eventType === TOUCH_END || eventType === MOUSE_UP || isCancelish(eventType);
+}
+export function isCancelish(eventType) {
+  return eventType === TOUCH_CANCEL || eventType === MOUSE_CANCEL;
+}
+export function isScroll(eventType) {
+  return eventType === SCROLL;
+}
+export function isSelectionChange(eventType) {
+  return eventType === SELECT || eventType === SELECTION_CHANGE;
+}

package/dist/modules/useResponderEvents/ResponderEventTypes.js.flow

@@ -0,0 +1,61 @@
+/**
+ * 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
+ */
+
+export type Touch = {
+  force: number,
+  identifier: number,
+  // The locationX and locationY properties are non-standard additions
+  locationX: any,
+  locationY: any,
+  pageX: number,
+  pageY: number,
+  target: any,
+  // Touches in a list have a timestamp property
+  timestamp: number,
+};
+export type TouchEvent = {
+  altKey: boolean,
+  ctrlKey: boolean,
+  metaKey: boolean,
+  shiftKey: boolean,
+  // TouchList is an array in the Responder system
+  changedTouches: Array<Touch>,
+  force: number,
+  // React Native adds properties to the "nativeEvent that are usually only found on W3C Touches ‾\_(ツ)_/‾
+  identifier: number,
+  locationX: any,
+  locationY: any,
+  pageX: number,
+  pageY: number,
+  target: any,
+  // The timestamp has a lowercase "s" in the Responder system
+  timestamp: number,
+  // TouchList is an array in the Responder system
+  touches: Array<Touch>,
+};
+export const BLUR = 'blur';
+export const CONTEXT_MENU = 'contextmenu';
+export const FOCUS_OUT = 'focusout';
+export const MOUSE_DOWN = 'mousedown';
+export const MOUSE_MOVE = 'mousemove';
+export const MOUSE_UP = 'mouseup';
+export const MOUSE_CANCEL = 'dragstart';
+export const TOUCH_START = 'touchstart';
+export const TOUCH_MOVE = 'touchmove';
+export const TOUCH_END = 'touchend';
+export const TOUCH_CANCEL = 'touchcancel';
+export const SCROLL = 'scroll';
+export const SELECT = 'select';
+export const SELECTION_CHANGE = 'selectionchange';
+declare export function isStartish(eventType: mixed): boolean;
+declare export function isMoveish(eventType: mixed): boolean;
+declare export function isEndish(eventType: mixed): boolean;
+declare export function isCancelish(eventType: mixed): boolean;
+declare export function isScroll(eventType: mixed): boolean;
+declare export function isSelectionChange(eventType: mixed): boolean;