@office-iss/react-native-win32 0.0.0-canary.30 → 0.0.0-canary.300

package/Libraries/Components/Touchable/Touchable.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -8,26 +8,34 @@
  * @format
  */
 
-'use strict';
-
-const BoundingDimensions = require('./BoundingDimensions');
-const Platform = require('../../Utilities/Platform');
-const Position = require('./Position');
-const React = require('react');
-const ReactNative = require('../../Renderer/shims/ReactNative');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const TVEventHandler = require('../AppleTV/TVEventHandler');
-const UIManager = require('../../ReactNative/UIManager');
-const View = require('../View/View');
-const SoundManager = require('../Sound/SoundManager');
-
-const keyMirror = require('fbjs/lib/keyMirror');
-const normalizeColor = require('../../StyleSheet/normalizeColor');
-
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
-import type {PressEvent} from '../../Types/CoreEventTypes';
-
-const extractSingleTouch = nativeEvent => {
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import type {
+  BlurEvent,
+  FocusEvent,
+  GestureResponderEvent,
+} from '../../Types/CoreEventTypes';
+
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+import UIManager from '../../ReactNative/UIManager';
+import Platform from '../../Utilities/Platform';
+import SoundManager from '../Sound/SoundManager';
+import BoundingDimensions from './BoundingDimensions';
+import Position from './Position';
+import * as React from 'react';
+
+const extractSingleTouch = (nativeEvent: {
+  +changedTouches: $ReadOnlyArray<GestureResponderEvent['nativeEvent']>,
+  +force?: number,
+  +identifier: number,
+  +locationX: number,
+  +locationY: number,
+  +pageX: number,
+  +pageY: number,
+  +target: ?number,
+  +timestamp: number,
+  +touches: $ReadOnlyArray<GestureResponderEvent['nativeEvent']>,
+}) => {
   const touches = nativeEvent.touches;
   const changedTouches = nativeEvent.changedTouches;
   const hasTouches = touches && touches.length > 0;
@@ -36,8 +44,8 @@ const extractSingleTouch = nativeEvent => {
   return !hasTouches && hasChangedTouches
     ? changedTouches[0]
     : hasTouches
-    ? touches[0]
-    : nativeEvent;
+      ? touches[0]
+      : nativeEvent;
 };
 
 /**
@@ -129,18 +137,18 @@ const extractSingleTouch = nativeEvent => {
  * Touchable states.
  */
 
-const States = keyMirror({
-  NOT_RESPONDER: null, // Not the responder
-  RESPONDER_INACTIVE_PRESS_IN: null, // Responder, inactive, in the `PressRect`
-  RESPONDER_INACTIVE_PRESS_OUT: null, // Responder, inactive, out of `PressRect`
-  RESPONDER_ACTIVE_PRESS_IN: null, // Responder, active, in the `PressRect`
-  RESPONDER_ACTIVE_PRESS_OUT: null, // Responder, active, out of `PressRect`
-  RESPONDER_ACTIVE_LONG_PRESS_IN: null, // Responder, active, in the `PressRect`, after long press threshold
-  RESPONDER_ACTIVE_LONG_PRESS_OUT: null, // Responder, active, out of `PressRect`, after long press threshold
-  ERROR: null,
-});
-
-type State =
+const States = {
+  NOT_RESPONDER: 'NOT_RESPONDER', // Not the responder
+  RESPONDER_INACTIVE_PRESS_IN: 'RESPONDER_INACTIVE_PRESS_IN', // Responder, inactive, in the `PressRect`
+  RESPONDER_INACTIVE_PRESS_OUT: 'RESPONDER_INACTIVE_PRESS_OUT', // Responder, inactive, out of `PressRect`
+  RESPONDER_ACTIVE_PRESS_IN: 'RESPONDER_ACTIVE_PRESS_IN', // Responder, active, in the `PressRect`
+  RESPONDER_ACTIVE_PRESS_OUT: 'RESPONDER_ACTIVE_PRESS_OUT', // Responder, active, out of `PressRect`
+  RESPONDER_ACTIVE_LONG_PRESS_IN: 'RESPONDER_ACTIVE_LONG_PRESS_IN', // Responder, active, in the `PressRect`, after long press threshold
+  RESPONDER_ACTIVE_LONG_PRESS_OUT: 'RESPONDER_ACTIVE_LONG_PRESS_OUT', // Responder, active, out of `PressRect`, after long press threshold
+  ERROR: 'ERROR',
+};
+
+type TouchableState =
   | typeof States.NOT_RESPONDER
   | typeof States.RESPONDER_INACTIVE_PRESS_IN
   | typeof States.RESPONDER_INACTIVE_PRESS_OUT
@@ -190,15 +198,15 @@ const IsLongPressingIn = {
 /**
  * Inputs to the state machine.
  */
-const Signals = keyMirror({
-  DELAY: null,
-  RESPONDER_GRANT: null,
-  RESPONDER_RELEASE: null,
-  RESPONDER_TERMINATED: null,
-  ENTER_PRESS_RECT: null,
-  LEAVE_PRESS_RECT: null,
-  LONG_PRESS_DETECTED: null,
-});
+const Signals = {
+  DELAY: 'DELAY',
+  RESPONDER_GRANT: 'RESPONDER_GRANT',
+  RESPONDER_RELEASE: 'RESPONDER_RELEASE',
+  RESPONDER_TERMINATED: 'RESPONDER_TERMINATED',
+  ENTER_PRESS_RECT: 'ENTER_PRESS_RECT',
+  LEAVE_PRESS_RECT: 'LEAVE_PRESS_RECT',
+  LONG_PRESS_DETECTED: 'LONG_PRESS_DETECTED',
+};
 
 type Signal =
   | typeof Signals.DELAY
@@ -366,38 +374,19 @@ const LONG_PRESS_ALLOWED_MOVEMENT = 10;
  *
  * @lends Touchable.prototype
  */
-const TouchableMixin = {
-  componentDidMount: function() {
+const TouchableMixinImpl = {
+  componentDidMount: function () {
     if (!Platform.isTV) {
       return;
     }
-
-    this._tvEventHandler = new TVEventHandler();
-    this._tvEventHandler.enable(this, function(cmp, evt) {
-      const myTag = ReactNative.findNodeHandle(cmp);
-      evt.dispatchConfig = {};
-      if (myTag === evt.tag) {
-        if (evt.eventType === 'focus') {
-          cmp.touchableHandleFocus(evt);
-        } else if (evt.eventType === 'blur') {
-          cmp.touchableHandleBlur(evt);
-        } else if (evt.eventType === 'select' && Platform.OS !== 'android') {
-          cmp.touchableHandlePress &&
-            !cmp.props.disabled &&
-            cmp.touchableHandlePress(evt);
-        }
-      }
-    });
   },
 
   /**
    * Clear all timeouts on unmount
    */
-  componentWillUnmount: function() {
-    if (this._tvEventHandler) {
-      this._tvEventHandler.disable();
-      delete this._tvEventHandler;
-    }
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  componentWillUnmount: function () {
     this.touchableDelayTimeout && clearTimeout(this.touchableDelayTimeout);
     this.longPressDelayTimeout && clearTimeout(this.longPressDelayTimeout);
     this.pressOutDelayTimeout && clearTimeout(this.pressOutDelayTimeout);
@@ -410,9 +399,12 @@ const TouchableMixin = {
    * @return {object} State object to be placed inside of
    * `this.state.touchable`.
    */
-  touchableGetInitialState: function(): $TEMPORARY$object<{|
-    touchable: $TEMPORARY$object<{|responderID: null, touchState: void|}>,
-  |}> {
+  touchableGetInitialState: function (): {
+    touchable: {
+      touchState: ?TouchableState,
+      responderID: ?GestureResponderEvent['currentTarget'],
+    },
+  } {
     return {
       touchable: {touchState: undefined, responderID: null},
     };
@@ -422,30 +414,36 @@ const TouchableMixin = {
   /**
    * Must return true if embedded in a native platform scroll view.
    */
-  touchableHandleResponderTerminationRequest: function(): any {
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  touchableHandleResponderTerminationRequest: function (): any {
     return !this.props.rejectResponderTermination;
   },
 
   /**
    * Must return true to start the process of `Touchable`.
    */
-  touchableHandleStartShouldSetResponder: function(): any {
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  touchableHandleStartShouldSetResponder: function (): any {
     return !this.props.disabled;
   },
 
   /**
    * Return true to cancel press on long press.
    */
-  touchableLongPressCancelsPress: function(): boolean {
+  touchableLongPressCancelsPress: function (): boolean {
     return true;
   },
 
   /**
    * Place as callback for a DOM element's `onResponderGrant` event.
-   * @param {SyntheticEvent} e Synthetic event from event system.
+   * @param {NativeSyntheticEvent} e Synthetic event from event system.
    *
    */
-  touchableHandleResponderGrant: function(e: PressEvent) {
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  touchableHandleResponderGrant: function (e: GestureResponderEvent) {
     const dispatchID = e.currentTarget;
     // Since e is used in a callback invoked on another event loop
     // (as in setTimeout etc), we need to call e.persist() on the
@@ -486,7 +484,9 @@ const TouchableMixin = {
   /**
    * Place as callback for a DOM element's `onResponderRelease` event.
    */
-  touchableHandleResponderRelease: function(e: PressEvent) {
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  touchableHandleResponderRelease: function (e: GestureResponderEvent) {
     this.pressInLocation = null;
     this._receiveSignal(Signals.RESPONDER_RELEASE, e);
   },
@@ -494,7 +494,9 @@ const TouchableMixin = {
   /**
    * Place as callback for a DOM element's `onResponderTerminate` event.
    */
-  touchableHandleResponderTerminate: function(e: PressEvent) {
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  touchableHandleResponderTerminate: function (e: GestureResponderEvent) {
     this.pressInLocation = null;
     this._receiveSignal(Signals.RESPONDER_TERMINATED, e);
   },
@@ -502,7 +504,9 @@ const TouchableMixin = {
   /**
    * Place as callback for a DOM element's `onResponderMove` event.
    */
-  touchableHandleResponderMove: function(e: PressEvent) {
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  touchableHandleResponderMove: function (e: GestureResponderEvent) {
     // Measurement may not have returned yet.
     if (!this.state.touchable.positionOnActivate) {
       return;
@@ -587,7 +591,9 @@ const TouchableMixin = {
    * element that was blurred just prior to this. This can be overridden when
    * using `Touchable.Mixin.withoutDefaultFocusAndBlur`.
    */
-  touchableHandleFocus: function(e: Event) {
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  touchableHandleFocus: function (e: FocusEvent) {
     this.props.onFocus && this.props.onFocus(e);
   },
 
@@ -599,7 +605,9 @@ const TouchableMixin = {
    * This can be overridden when using
    * `Touchable.Mixin.withoutDefaultFocusAndBlur`.
    */
-  touchableHandleBlur: function(e: Event) {
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  touchableHandleBlur: function (e: BlurEvent) {
     this.props.onBlur && this.props.onBlur(e);
   },
 
@@ -679,7 +687,9 @@ const TouchableMixin = {
    * @sideeffects
    * @private
    */
-  _remeasureMetricsOnActivation: function() {
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  _remeasureMetricsOnActivation: function () {
     const responderID = this.state.touchable.responderID;
     if (responderID == null) {
       return;
@@ -692,7 +702,9 @@ const TouchableMixin = {
     }
   },
 
-  _handleQueryLayout: function(
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  _handleQueryLayout: function (
     l: number,
     t: number,
     w: number,
@@ -705,25 +717,33 @@ const TouchableMixin = {
       return;
     }
     this.state.touchable.positionOnActivate &&
+      // $FlowFixMe[prop-missing]
       Position.release(this.state.touchable.positionOnActivate);
     this.state.touchable.dimensionsOnActivate &&
+      // $FlowFixMe[prop-missing]
       BoundingDimensions.release(this.state.touchable.dimensionsOnActivate);
+    // $FlowFixMe[prop-missing]
     this.state.touchable.positionOnActivate = Position.getPooled(
       globalX,
       globalY,
     );
+    // $FlowFixMe[prop-missing]
     this.state.touchable.dimensionsOnActivate = BoundingDimensions.getPooled(
       w,
       h,
     );
   },
 
-  _handleDelay: function(e: PressEvent) {
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  _handleDelay: function (e: GestureResponderEvent) {
     this.touchableDelayTimeout = null;
     this._receiveSignal(Signals.DELAY, e);
   },
 
-  _handleLongDelay: function(e: PressEvent) {
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  _handleLongDelay: function (e: GestureResponderEvent) {
     this.longPressDelayTimeout = null;
     const curState = this.state.touchable.touchState;
     if (
@@ -742,7 +762,9 @@ const TouchableMixin = {
    * @throws Error if invalid state transition or unrecognized signal.
    * @sideeffects
    */
-  _receiveSignal: function(signal: Signal, e: PressEvent) {
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  _receiveSignal: function (signal: Signal, e: GestureResponderEvent) {
     const responderID = this.state.touchable.responderID;
     const curState = this.state.touchable.touchState;
     const nextState = Transitions[curState] && Transitions[curState][signal];
@@ -781,19 +803,23 @@ const TouchableMixin = {
     }
   },
 
-  _cancelLongPressDelayTimeout: function() {
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  _cancelLongPressDelayTimeout: function () {
     this.longPressDelayTimeout && clearTimeout(this.longPressDelayTimeout);
     this.longPressDelayTimeout = null;
   },
 
-  _isHighlight: function(state: State): boolean {
+  _isHighlight: function (state: TouchableState): boolean {
     return (
       state === States.RESPONDER_ACTIVE_PRESS_IN ||
       state === States.RESPONDER_ACTIVE_LONG_PRESS_IN
     );
   },
 
-  _savePressInLocation: function(e: PressEvent) {
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  _savePressInLocation: function (e: GestureResponderEvent) {
     const touch = extractSingleTouch(e.nativeEvent);
     const pageX = touch && touch.pageX;
     const pageY = touch && touch.pageY;
@@ -802,7 +828,7 @@ const TouchableMixin = {
     this.pressInLocation = {pageX, pageY, locationX, locationY};
   },
 
-  _getDistanceBetweenPoints: function(
+  _getDistanceBetweenPoints: function (
     aX: number,
     aY: number,
     bX: number,
@@ -824,11 +850,13 @@ const TouchableMixin = {
    * @param {Event} e Native event.
    * @sideeffects
    */
-  _performSideEffectsForTransition: function(
-    curState: State,
-    nextState: State,
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  _performSideEffectsForTransition: function (
+    curState: TouchableState,
+    nextState: TouchableState,
     signal: Signal,
-    e: PressEvent,
+    e: GestureResponderEvent,
   ) {
     const curIsHighlight = this._isHighlight(curState);
     const newIsHighlight = this._isHighlight(nextState);
@@ -845,11 +873,15 @@ const TouchableMixin = {
       curState === States.NOT_RESPONDER &&
       nextState === States.RESPONDER_INACTIVE_PRESS_IN;
 
+    /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
+     * https://fburl.com/workplace/6291gfvu */
     const isActiveTransition = !IsActive[curState] && IsActive[nextState];
     if (isInitialTransition || isActiveTransition) {
       this._remeasureMetricsOnActivation();
     }
 
+    /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
+     * https://fburl.com/workplace/6291gfvu */
     if (IsPressingIn[curState] && signal === Signals.LONG_PRESS_DETECTED) {
       this.touchableHandleLongPress && this.touchableHandleLongPress(e);
     }
@@ -860,13 +892,19 @@ const TouchableMixin = {
       this._endHighlight(e);
     }
 
+    /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
+     * https://fburl.com/workplace/6291gfvu */
     if (IsPressingIn[curState] && signal === Signals.RESPONDER_RELEASE) {
       const hasLongPressHandler = !!this.props.onLongPress;
       const pressIsLongButStillCallOnPress =
+        /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
+         * https://fburl.com/workplace/6291gfvu */
         IsLongPressingIn[curState] && // We *are* long pressing.. // But either has no long handler
         (!hasLongPressHandler || !this.touchableLongPressCancelsPress()); // or we're told to ignore it.
 
       const shouldInvokePress =
+        /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
+         * https://fburl.com/workplace/6291gfvu */
         !IsLongPressingIn[curState] || pressIsLongButStillCallOnPress;
       if (shouldInvokePress && this.touchableHandlePress) {
         if (!newIsHighlight && !curIsHighlight) {
@@ -885,12 +923,16 @@ const TouchableMixin = {
     this.touchableDelayTimeout = null;
   },
 
-  _startHighlight: function(e: PressEvent) {
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  _startHighlight: function (e: GestureResponderEvent) {
     this._savePressInLocation(e);
     this.touchableHandleActivePressIn && this.touchableHandleActivePressIn(e);
   },
 
-  _endHighlight: function(e: PressEvent) {
+  /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
+   * Flow's LTI update could not be added via codemod */
+  _endHighlight: function (e: GestureResponderEvent) {
     if (this.touchableHandleActivePressOut) {
       if (
         this.touchableGetPressOutDelayMS &&
@@ -905,7 +947,7 @@ const TouchableMixin = {
     }
   },
 
-  withoutDefaultFocusAndBlur: ({}: $TEMPORARY$object<{||}>),
+  withoutDefaultFocusAndBlur: ({}: {...}),
 };
 
 /**
@@ -918,12 +960,12 @@ const {
   touchableHandleFocus,
   touchableHandleBlur,
   ...TouchableMixinWithoutDefaultFocusAndBlur
-} = TouchableMixin;
-TouchableMixin.withoutDefaultFocusAndBlur = TouchableMixinWithoutDefaultFocusAndBlur;
+} = TouchableMixinImpl;
+TouchableMixinImpl.withoutDefaultFocusAndBlur =
+  TouchableMixinWithoutDefaultFocusAndBlur;
 
-const Touchable = {
-  Mixin: TouchableMixin,
-  TOUCH_TARGET_DEBUG: false, // Highlights all touchable targets. Toggle with Inspector.
+const TouchableImpl = {
+  Mixin: TouchableMixinImpl,
   /**
    * Renders a debugging overlay to visualize touch target with hitSlop (might not work on Android).
    */
@@ -931,54 +973,15 @@ const Touchable = {
     color,
     hitSlop,
   }: {
-    color: string | number,
-    hitSlop: EdgeInsetsProp,
+    color: ColorValue,
+    hitSlop?: EdgeInsetsProp,
     ...
   }): null | React.Node => {
-    if (!Touchable.TOUCH_TARGET_DEBUG) {
-      return null;
-    }
-    if (!__DEV__) {
-      throw Error(
-        'Touchable.TOUCH_TARGET_DEBUG should not be enabled in prod!',
-      );
-    }
-    const debugHitSlopStyle = {};
-    hitSlop = hitSlop || {top: 0, bottom: 0, left: 0, right: 0};
-    for (const key in hitSlop) {
-      debugHitSlopStyle[key] = -hitSlop[key];
-    }
-    const normalizedColor = normalizeColor(color);
-    if (typeof normalizedColor !== 'number') {
-      return null;
+    if (__DEV__) {
+      return <PressabilityDebugView color={color} hitSlop={hitSlop} />;
     }
-    const hexColor =
-      '#' + ('00000000' + normalizedColor.toString(16)).substr(-8);
-    return (
-      <View
-        pointerEvents="none"
-        style={[
-          styles.debug,
-          /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment suppresses
-           * an error found when Flow v0.111 was deployed. To see the error,
-           * delete this comment and run Flow. */
-          {
-            borderColor: hexColor.slice(0, -2) + '55', // More opaque
-            backgroundColor: hexColor.slice(0, -2) + '0F', // Less opaque
-            ...debugHitSlopStyle,
-          },
-        ]}
-      />
-    );
+    return null;
   },
 };
 
-const styles = StyleSheet.create({
-  debug: {
-    position: 'absolute',
-    borderWidth: 1,
-    borderStyle: 'dashed',
-  },
-});
-
-module.exports = Touchable;
+export default TouchableImpl;