@tamagui/react-native-use-responder-events 1.0.1-beta.194

package/src/utils.ts

@@ -0,0 +1,192 @@
+/**
+ * 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.
+ */
+
+const keyName = '__reactResponderId'
+
+export const canUseDOM = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+)
+
+export const getBoundingClientRect = (node: HTMLElement | null): void | DOMRect => {
+  if (!node) return
+  if (node.nodeType !== 1) return
+  if (node.getBoundingClientRect) {
+    return node.getBoundingClientRect()
+  }
+}
+
+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: any[] = []
+  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 | null {
+  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: any[] = []
+  const nodePath: any[] = []
+  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
+}
+
+export function isSelectionValid(): boolean {
+  const selection = window.getSelection()
+  if (!selection) return false
+  const string = selection.toString()
+  const anchorNode = selection.anchorNode
+  const focusNode = selection.focusNode
+  const isTextNode =
+    (anchorNode && anchorNode.nodeType === window.Node.TEXT_NODE) ||
+    (focusNode && focusNode.nodeType === window.Node.TEXT_NODE)
+  return string.length >= 1 && string !== '\n' && !!isTextNode
+}

package/types/PressResponder.d.ts

@@ -0,0 +1,92 @@
+/**
+ * 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.
+ */
+/// <reference types="node" />
+declare type ClickEvent = any;
+declare type KeyboardEvent = any;
+declare type ResponderEvent = any;
+export declare type PressResponderConfig = {
+    cancelable?: boolean | null;
+    disabled?: boolean | null;
+    delayLongPress?: number | null;
+    delayPressStart?: number | null;
+    delayPressEnd?: number | null;
+    onLongPress?: ((event: ResponderEvent) => void) | null;
+    onPress?: ((event: ClickEvent) => void) | null;
+    onPressChange?: ((event: ResponderEvent) => void) | null;
+    onPressStart?: ((event: ResponderEvent) => void) | null;
+    onPressMove?: ((event: ResponderEvent) => void) | null;
+    onPressEnd?: ((event: ResponderEvent) => void) | null;
+};
+export declare type EventHandlers = {
+    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;
+};
+declare enum States {
+    DELAY = 0,
+    ERROR = 1,
+    LONG_PRESS_DETECTED = 2,
+    NOT_RESPONDER = 3,
+    RESPONDER_ACTIVE_LONG_PRESS_START = 4,
+    RESPONDER_ACTIVE_PRESS_START = 5,
+    RESPONDER_INACTIVE_PRESS_START = 6,
+    RESPONDER_GRANT = 7,
+    RESPONDER_RELEASE = 8,
+    RESPONDER_TERMINATED = 9
+}
+declare type TouchState = States.NOT_RESPONDER | States.RESPONDER_INACTIVE_PRESS_START | States.RESPONDER_ACTIVE_PRESS_START | States.RESPONDER_ACTIVE_LONG_PRESS_START | States.ERROR;
+declare type TouchSignal = States.DELAY | States.RESPONDER_GRANT | States.RESPONDER_RELEASE | States.RESPONDER_TERMINATED | States.LONG_PRESS_DETECTED;
+declare type TimeoutID = NodeJS.Timer | null;
+export declare class PressResponder {
+    _config: PressResponderConfig;
+    _eventHandlers?: EventHandlers | null;
+    _isPointerTouch?: boolean;
+    _longPressDelayTimeout?: TimeoutID;
+    _longPressDispatched?: boolean;
+    _pressDelayTimeout?: TimeoutID;
+    _pressOutDelayTimeout?: TimeoutID;
+    _selectionTerminated?: boolean;
+    _touchActivatePosition?: {
+        pageX: number;
+        pageY: number;
+    } | null;
+    _touchState: TouchState;
+    constructor(config: PressResponderConfig);
+    configure(config: PressResponderConfig): void;
+    /**
+     * Resets any pending timers. This should be called on unmount.
+     */
+    reset(): void;
+    /**
+     * Returns a set of props to spread into the interactive element.
+     */
+    getEventHandlers(): EventHandlers;
+    _createEventHandlers(): EventHandlers;
+    /**
+     * Receives a state machine signal, performs side effects of the transition
+     * and stores the new state. Validates the transition as well.
+     */
+    _receiveSignal(signal: TouchSignal, event: ResponderEvent): void;
+    /**
+     * Performs a transition between touchable states and identify any activations
+     * or deactivations (and callback invocations).
+     */
+    _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;
+}
+export {};
+//# sourceMappingURL=PressResponder.d.ts.map

package/types/ResponderSystem.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 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.
+ */
+import type { ResponderEvent } from './createResponderEvent';
+declare type ResponderId = string;
+export declare type ResponderConfig = {
+    onResponderEnd?: ((e: ResponderEvent) => void) | null;
+    onResponderGrant?: ((e: ResponderEvent) => void | boolean) | null;
+    onResponderMove?: ((e: ResponderEvent) => void) | null;
+    onResponderRelease?: ((e: ResponderEvent) => void) | null;
+    onResponderReject?: ((e: ResponderEvent) => void) | null;
+    onResponderStart?: ((e: ResponderEvent) => void) | null;
+    onResponderTerminate?: ((e: ResponderEvent) => void) | null;
+    onResponderTerminationRequest?: ((e: ResponderEvent) => boolean) | null;
+    onStartShouldSetResponder?: ((e: ResponderEvent) => boolean) | null;
+    onStartShouldSetResponderCapture?: ((e: ResponderEvent) => boolean) | null;
+    onMoveShouldSetResponder?: ((e: ResponderEvent) => boolean) | null;
+    onMoveShouldSetResponderCapture?: ((e: ResponderEvent) => boolean) | null;
+    onScrollShouldSetResponder?: ((e: ResponderEvent) => boolean) | null;
+    onScrollShouldSetResponderCapture?: ((e: ResponderEvent) => boolean) | null;
+    onSelectionChangeShouldSetResponder?: ((e: ResponderEvent) => boolean) | null;
+    onSelectionChangeShouldSetResponderCapture?: ((e: ResponderEvent) => boolean) | null;
+};
+export declare function attachListeners(): void;
+/**
+ * Register a node with the ResponderSystem.
+ */
+export declare function addNode(id: ResponderId, node: any, config: ResponderConfig): void;
+/**
+ * Unregister a node with the ResponderSystem.
+ */
+export declare function removeNode(id: ResponderId): void;
+/**
+ * Allow the current responder to be terminated from within components to support
+ * more complex requirements, such as use with other React libraries for working
+ * with scroll views, input views, etc.
+ */
+export declare function terminateResponder(): void;
+/**
+ * Allow unit tests to inspect the current responder in the system.
+ * FOR TESTING ONLY.
+ */
+export declare function getResponderNode(): any;
+export {};
+//# sourceMappingURL=ResponderSystem.d.ts.map

package/types/ResponderTouchHistoryStore.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+import type { TouchEvent } from './types';
+declare type TouchRecord = {
+    currentPageX: number;
+    currentPageY: number;
+    currentTimeStamp: number;
+    previousPageX: number;
+    previousPageY: number;
+    previousTimeStamp: number;
+    startPageX: number;
+    startPageY: number;
+    startTimeStamp: number;
+    touchActive: boolean;
+};
+export declare type TouchHistory = {
+    indexOfSingleActiveTouch: number;
+    mostRecentTimeStamp: number;
+    numberActiveTouches: number;
+    touchBank: Array<TouchRecord>;
+};
+export declare class ResponderTouchHistoryStore {
+    _touchHistory: {
+        touchBank: never[];
+        numberActiveTouches: number;
+        indexOfSingleActiveTouch: number;
+        mostRecentTimeStamp: number;
+    };
+    recordTouchTrack(topLevelType: string, nativeEvent: TouchEvent): void;
+    get touchHistory(): TouchHistory;
+}
+export {};
+//# sourceMappingURL=ResponderTouchHistoryStore.d.ts.map

package/types/createResponderEvent.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 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.
+ */
+import { ResponderTouchHistoryStore, TouchHistory } from './ResponderTouchHistoryStore';
+export declare type ResponderEvent = {
+    bubbles: boolean;
+    cancelable: boolean;
+    currentTarget: any;
+    defaultPrevented: boolean | null;
+    dispatchConfig: {
+        registrationName?: string;
+        phasedRegistrationNames?: {
+            bubbled: string;
+            captured: string;
+        };
+    };
+    eventPhase: number | null;
+    isDefaultPrevented: () => boolean;
+    isPropagationStopped: () => boolean;
+    isTrusted: boolean | null;
+    preventDefault: () => void;
+    stopPropagation: () => void;
+    nativeEvent: TouchEvent;
+    persist: () => void;
+    target: any | null;
+    timeStamp: number;
+    touchHistory: TouchHistory;
+};
+/**
+ * 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;
+//# sourceMappingURL=createResponderEvent.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useResponderEvents';
+//# sourceMappingURL=index.d.ts.map

package/types/types.d.ts

@@ -0,0 +1,52 @@
+/**
+ * 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 declare type Touch = {
+    force: number;
+    identifier: number;
+    locationX: any;
+    locationY: any;
+    pageX: number;
+    pageY: number;
+    target: any;
+    timestamp: number;
+};
+export declare type TouchEvent = {
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    changedTouches: Array<Touch>;
+    force: number;
+    identifier: number;
+    locationX: any;
+    locationY: any;
+    pageX: number;
+    pageY: number;
+    target: any;
+    timestamp: number;
+    touches: Array<Touch>;
+};
+export declare const BLUR = "blur";
+export declare const CONTEXT_MENU = "contextmenu";
+export declare const FOCUS_OUT = "focusout";
+export declare const MOUSE_DOWN = "mousedown";
+export declare const MOUSE_MOVE = "mousemove";
+export declare const MOUSE_UP = "mouseup";
+export declare const MOUSE_CANCEL = "dragstart";
+export declare const TOUCH_START = "touchstart";
+export declare const TOUCH_MOVE = "touchmove";
+export declare const TOUCH_END = "touchend";
+export declare const TOUCH_CANCEL = "touchcancel";
+export declare const SCROLL = "scroll";
+export declare const SELECT = "select";
+export declare const SELECTION_CHANGE = "selectionchange";
+export declare function isStartish(eventType: unknown): boolean;
+export declare function isMoveish(eventType: unknown): boolean;
+export declare function isEndish(eventType: unknown): boolean;
+export declare function isCancelish(eventType: unknown): boolean;
+export declare function isScroll(eventType: unknown): boolean;
+export declare function isSelectionChange(eventType: unknown): boolean;
+//# sourceMappingURL=types.d.ts.map

package/types/useResponderEvents.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+import * as ResponderSystem from './ResponderSystem';
+export * from './utils';
+export declare function useResponderEvents(hostRef: any, config?: ResponderSystem.ResponderConfig): void;
+//# sourceMappingURL=useResponderEvents.d.ts.map

package/types/utils.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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 declare const canUseDOM: boolean;
+export declare const getBoundingClientRect: (node: HTMLElement | null) => void | DOMRect;
+/**
+ * Store the responderId on a host node
+ */
+export declare function setResponderId(node: any, id: number): void;
+/**
+ * Filter the event path to contain only the nodes attached to the responder system
+ */
+export declare function getResponderPaths(domEvent: any): {
+    idPath: Array<number>;
+    nodePath: Array<any>;
+};
+/**
+ * Walk the paths and find the first common ancestor
+ */
+export declare function getLowestCommonAncestor(pathA: Array<any>, pathB: Array<any>): any;
+/**
+ * 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 declare function hasTargetTouches(target: any, touches: any): boolean;
+/**
+ * Ignore 'selectionchange' events that don't correspond with a person's intent to
+ * select text.
+ */
+export declare function hasValidSelection(domEvent: any): boolean;
+/**
+ * Events are only valid if the primary button was used without specific modifier keys.
+ */
+export declare function isPrimaryPointerDown(domEvent: any): boolean;
+export declare function isSelectionValid(): boolean;
+//# sourceMappingURL=utils.d.ts.map