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

package/src/ResponderTouchHistoryStore.ts

@@ -0,0 +1,213 @@
+/**
+ * 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 { Touch, TouchEvent } from './types'
+import { isEndish, isMoveish, isStartish } from './types'
+
+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 = {
+  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 MAX_TOUCH_BANK = 20
+
+function timestampForTouch(touch: Touch): number {
+  // The legacy internal implementation provides "timeStamp", which has been
+  // renamed to "timestamp".
+  return touch['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) {
+    // eslint-disable-next-line no-console
+    console.error('Touch object is missing identifier.')
+  }
+  if (process.env.NODE_ENV === 'development') {
+    if (identifier > MAX_TOUCH_BANK) {
+      // eslint-disable-next-line no-console
+      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]
+          //  @ts-ignore
+          if (touchTrackToCheck != null && touchTrackToCheck.touchActive) {
+            touchHistory.indexOfSingleActiveTouch = i
+            break
+          }
+        }
+        if (process.env.NODE_ENV === 'development') {
+          const activeRecord = touchBank[touchHistory.indexOfSingleActiveTouch]
+          //  @ts-ignore
+          if (!(activeRecord != null && activeRecord.touchActive)) {
+            console.error('Cannot find single active touch.')
+          }
+        }
+      }
+    }
+  }
+
+  get touchHistory(): TouchHistory {
+    return this._touchHistory
+  }
+}

package/src/createResponderEvent.ts

@@ -0,0 +1,187 @@
+/**
+ * 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'
+import { getBoundingClientRect } from './utils'
+
+export 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
+}
+
+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 as any
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './useResponderEvents'

package/src/types.ts

@@ -0,0 +1,78 @@
+/**
+ * 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 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'
+
+export function isStartish(eventType: unknown): boolean {
+  return eventType === TOUCH_START || eventType === MOUSE_DOWN
+}
+
+export function isMoveish(eventType: unknown): boolean {
+  return eventType === TOUCH_MOVE || eventType === MOUSE_MOVE
+}
+
+export function isEndish(eventType: unknown): boolean {
+  return eventType === TOUCH_END || eventType === MOUSE_UP || isCancelish(eventType)
+}
+
+export function isCancelish(eventType: unknown): boolean {
+  return eventType === TOUCH_CANCEL || eventType === MOUSE_CANCEL
+}
+
+export function isScroll(eventType: unknown): boolean {
+  return eventType === SCROLL
+}
+
+export function isSelectionChange(eventType: unknown): boolean {
+  return eventType === SELECT || eventType === SELECTION_CHANGE
+}

package/src/useResponderEvents.ts

@@ -0,0 +1,72 @@
+/**
+ * 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 React from 'react'
+
+import * as ResponderSystem from './ResponderSystem'
+
+export * from './utils'
+
+const emptyObject = {}
+
+export function useResponderEvents(
+  hostRef: any,
+  config: ResponderSystem.ResponderConfig = emptyObject
+) {
+  const id = React.useId()
+  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])
+
+  if (process.env.NODE_ENV === 'development') {
+    React.useDebugValue({
+      isResponder: hostRef.current === ResponderSystem.getResponderNode(),
+    })
+    React.useDebugValue(config)
+  }
+}