@office-iss/react-native-win32 0.0.0-canary.25 → 0.0.0-canary.250

package/Libraries/Text/Text.js

@@ -1,302 +1,319 @@
 /**
- * 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.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
-'use strict';
+import type {PressEvent} from '../Types/CoreEventTypes';
+import type {TextProps} from './TextProps';
 
-const DeprecatedTextPropTypes = require('../DeprecatedPropTypes/DeprecatedTextPropTypes');
-const React = require('react');
-const ReactNativeViewAttributes = require('../Components/View/ReactNativeViewAttributes');
-const TextAncestor = require('./TextAncestor');
-const Touchable = require('../Components/Touchable/Touchable');
-const UIManager = require('../ReactNative/UIManager');
+import * as PressabilityDebug from '../Pressability/PressabilityDebug';
+import usePressability from '../Pressability/usePressability';
+import flattenStyle from '../StyleSheet/flattenStyle';
+import processColor from '../StyleSheet/processColor';
+import Platform from '../Utilities/Platform';
+import TextAncestor from './TextAncestor';
+import {NativeText, NativeVirtualText} from './TextNativeComponent';
+import * as React from 'react';
+import {useContext, useMemo, useState} from 'react';
 
-const createReactNativeComponentClass = require('../Renderer/shims/createReactNativeComponentClass');
-const nullthrows = require('nullthrows');
-const processColor = require('../StyleSheet/processColor');
+/**
+ * Text is the fundamental component for displaying text.
+ *
+ * @see https://reactnative.dev/docs/text
+ */
+const Text: React.AbstractComponent<
+  TextProps,
+  React.ElementRef<typeof NativeText | typeof NativeVirtualText>,
+> = React.forwardRef((props: TextProps, forwardedRef) => {
+  const {
+    accessible,
+    accessibilityLabel,
+    accessibilityState,
+    allowFontScaling,
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-label': ariaLabel,
+    'aria-selected': ariaSelected,
+    ellipsizeMode,
+    id,
+    nativeID,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+    onResponderGrant,
+    onResponderMove,
+    onResponderRelease,
+    onResponderTerminate,
+    onResponderTerminationRequest,
+    onStartShouldSetResponder,
+    pressRetentionOffset,
+    suppressHighlighting,
+    ...restProps
+  } = props;
 
-import type {PressEvent} from '../Types/CoreEventTypes';
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
-import type {PressRetentionOffset, TextProps} from './TextProps';
+  const [isHighlighted, setHighlighted] = useState(false);
 
-type ResponseHandlers = $ReadOnly<{|
-  onStartShouldSetResponder: () => boolean,
-  onResponderGrant: (event: PressEvent, dispatchID: string) => void,
-  onResponderMove: (event: PressEvent) => void,
-  onResponderRelease: (event: PressEvent) => void,
-  onResponderTerminate: (event: PressEvent) => void,
-  onResponderTerminationRequest: () => boolean,
-|}>;
+  let _accessibilityState;
+  if (
+    accessibilityState != null ||
+    ariaBusy != null ||
+    ariaChecked != null ||
+    ariaDisabled != null ||
+    ariaExpanded != null ||
+    ariaSelected != null
+  ) {
+    _accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      selected: ariaSelected ?? accessibilityState?.selected,
+    };
+  }
 
-type Props = $ReadOnly<{|
-  ...TextProps,
-  forwardedRef: ?React.Ref<'RCTText' | 'RCTVirtualText'>,
-|}>;
+  const _disabled =
+    restProps.disabled != null
+      ? restProps.disabled
+      : _accessibilityState?.disabled;
 
-type State = {|
-  touchable: {|
-    touchState: ?string,
-    responderID: ?number,
-  |},
-  isHighlighted: boolean,
-  createResponderHandlers: () => ResponseHandlers,
-  responseHandlers: ?ResponseHandlers,
-|};
+  const nativeTextAccessibilityState =
+    _disabled !== _accessibilityState?.disabled
+      ? {..._accessibilityState, disabled: _disabled}
+      : _accessibilityState;
 
-const PRESS_RECT_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
+  const isPressable =
+    (onPress != null ||
+      onLongPress != null ||
+      onStartShouldSetResponder != null) &&
+    _disabled !== true;
 
-const viewConfig = {
-  validAttributes: {
-    ...ReactNativeViewAttributes.UIView,
-    isHighlighted: true,
-    numberOfLines: true,
-    ellipsizeMode: true,
-    allowFontScaling: true,
-    maxFontSizeMultiplier: true,
-    disabled: true,
-    selectable: true,
-    selectionColor: true,
-    adjustsFontSizeToFit: true,
-    minimumFontScale: true,
-    textBreakStrategy: true,
-    onTextLayout: true,
-    onInlineViewLayout: true,
-    dataDetectorType: true,
-  },
-  directEventTypes: {
-    topTextLayout: {
-      registrationName: 'onTextLayout',
-    },
-    topInlineViewLayout: {
-      registrationName: 'onInlineViewLayout',
-    },
-  },
-  uiViewClassName: 'RCTText',
-};
+  const initialized = useLazyInitialization(isPressable);
+  const config = useMemo(
+    () =>
+      initialized
+        ? {
+            disabled: !isPressable,
+            pressRectOffset: pressRetentionOffset,
+            onLongPress,
+            onPress,
+            onPressIn(event: PressEvent) {
+              // Updating isHighlighted causes unnecessary re-renders for platforms that don't use it
+              // in the best case, and cause issues with text selection in the worst case. Forcing
+              // the isHighlighted prop to false on all platforms except iOS.
+              setHighlighted(
+                (suppressHighlighting == null || !suppressHighlighting) &&
+                  Platform.OS === 'ios',
+              );
+              onPressIn?.(event);
+            },
+            onPressOut(event: PressEvent) {
+              setHighlighted(false);
+              onPressOut?.(event);
+            },
+          }
+        : null,
+    [
+      initialized,
+      isPressable,
+      pressRetentionOffset,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+      suppressHighlighting,
+    ],
+  );
 
-/**
- * A React component for displaying text.
- *
- * See https://reactnative.dev/docs/text.html
- */
-class TouchableText extends React.Component<Props, State> {
-  static defaultProps = {
-    accessible: true,
-    allowFontScaling: true,
-    ellipsizeMode: 'tail',
-  };
+  const eventHandlers = usePressability(config);
+  const eventHandlersForText = useMemo(
+    () =>
+      eventHandlers == null
+        ? null
+        : {
+            onResponderGrant(event: PressEvent) {
+              eventHandlers.onResponderGrant(event);
+              if (onResponderGrant != null) {
+                onResponderGrant(event);
+              }
+            },
+            onResponderMove(event: PressEvent) {
+              eventHandlers.onResponderMove(event);
+              if (onResponderMove != null) {
+                onResponderMove(event);
+              }
+            },
+            onResponderRelease(event: PressEvent) {
+              eventHandlers.onResponderRelease(event);
+              if (onResponderRelease != null) {
+                onResponderRelease(event);
+              }
+            },
+            onResponderTerminate(event: PressEvent) {
+              eventHandlers.onResponderTerminate(event);
+              if (onResponderTerminate != null) {
+                onResponderTerminate(event);
+              }
+            },
+            onClick: eventHandlers.onClick,
+            onResponderTerminationRequest:
+              onResponderTerminationRequest != null
+                ? onResponderTerminationRequest
+                : eventHandlers.onResponderTerminationRequest,
+            onStartShouldSetResponder:
+              onStartShouldSetResponder != null
+                ? onStartShouldSetResponder
+                : eventHandlers.onStartShouldSetResponder,
+          },
+    [
+      eventHandlers,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      onResponderTerminationRequest,
+      onStartShouldSetResponder,
+    ],
+  );
 
-  touchableGetPressRectOffset: ?() => PressRetentionOffset;
-  touchableHandleActivePressIn: ?() => void;
-  touchableHandleActivePressOut: ?() => void;
-  touchableHandleLongPress: ?(event: PressEvent) => void;
-  touchableHandlePress: ?(event: PressEvent) => void;
-  touchableHandleResponderGrant: ?(
-    event: PressEvent,
-    dispatchID: string,
-  ) => void;
-  touchableHandleResponderMove: ?(event: PressEvent) => void;
-  touchableHandleResponderRelease: ?(event: PressEvent) => void;
-  touchableHandleResponderTerminate: ?(event: PressEvent) => void;
-  touchableHandleResponderTerminationRequest: ?() => boolean;
+  // TODO: Move this processing to the view configuration.
+  const selectionColor =
+    restProps.selectionColor == null
+      ? null
+      : processColor(restProps.selectionColor);
 
-  state = {
-    ...Touchable.Mixin.touchableGetInitialState(),
-    isHighlighted: false,
-    createResponderHandlers: this._createResponseHandlers.bind(this),
-    responseHandlers: null,
-  };
+  let style = restProps.style;
 
-  static getDerivedStateFromProps(
-    nextProps: Props,
-    prevState: State,
-  ): $Shape<State> | null {
-    return prevState.responseHandlers == null && isTouchable(nextProps)
-      ? {
-          responseHandlers: prevState.createResponderHandlers(),
-        }
-      : null;
+  if (__DEV__) {
+    if (PressabilityDebug.isEnabled() && onPress != null) {
+      style = [restProps.style, {color: 'magenta'}];
+    }
   }
 
-  static viewConfig = viewConfig;
-
-  render(): React.Node {
-    let props = this.props;
-    if (isTouchable(props)) {
-      props = {
-        ...props,
-        ...this.state.responseHandlers,
-        isHighlighted: this.state.isHighlighted,
-      };
-    }
-    if (props.selectionColor != null) {
-      props = {
-        ...props,
-        selectionColor: processColor(props.selectionColor),
-      };
-    }
-    if (__DEV__) {
-      if (Touchable.TOUCH_TARGET_DEBUG && props.onPress != null) {
-        props = {
-          ...props,
-          style: [props.style, {color: 'magenta'}],
-        };
-      }
-    }
-    return (
-      <TextAncestor.Consumer>
-        {hasTextAncestor =>
-          hasTextAncestor ? (
-            <RCTVirtualText {...props} ref={props.forwardedRef} />
-          ) : (
-            <TextAncestor.Provider value={true}>
-              <RCTText {...props} ref={props.forwardedRef} />
-            </TextAncestor.Provider>
-          )
-        }
-      </TextAncestor.Consumer>
+  let numberOfLines = restProps.numberOfLines;
+  if (numberOfLines != null && !(numberOfLines >= 0)) {
+    console.error(
+      `'numberOfLines' in <Text> must be a non-negative number, received: ${numberOfLines}. The value will be set to 0.`,
     );
+    numberOfLines = 0;
   }
 
-  _createResponseHandlers(): ResponseHandlers {
-    return {
-      onStartShouldSetResponder: (): boolean => {
-        const {onStartShouldSetResponder} = this.props;
-        const shouldSetResponder =
-          (onStartShouldSetResponder == null
-            ? false
-            : onStartShouldSetResponder()) || isTouchable(this.props);
+  const hasTextAncestor = useContext(TextAncestor);
 
-        if (shouldSetResponder) {
-          this._attachTouchHandlers();
-        }
-        return shouldSetResponder;
-      },
-      onResponderGrant: (event: PressEvent, dispatchID: string): void => {
-        nullthrows(this.touchableHandleResponderGrant)(event, dispatchID);
-        if (this.props.onResponderGrant != null) {
-          this.props.onResponderGrant.call(this, event, dispatchID);
-        }
-      },
-      onResponderMove: (event: PressEvent): void => {
-        nullthrows(this.touchableHandleResponderMove)(event);
-        if (this.props.onResponderMove != null) {
-          this.props.onResponderMove.call(this, event);
-        }
-      },
-      onResponderRelease: (event: PressEvent): void => {
-        nullthrows(this.touchableHandleResponderRelease)(event);
-        if (this.props.onResponderRelease != null) {
-          this.props.onResponderRelease.call(this, event);
-        }
-      },
-      onResponderTerminate: (event: PressEvent): void => {
-        nullthrows(this.touchableHandleResponderTerminate)(event);
-        if (this.props.onResponderTerminate != null) {
-          this.props.onResponderTerminate.call(this, event);
-        }
-      },
-      onResponderTerminationRequest: (): boolean => {
-        const {onResponderTerminationRequest} = this.props;
-        if (!nullthrows(this.touchableHandleResponderTerminationRequest)()) {
-          return false;
-        }
-        if (onResponderTerminationRequest == null) {
-          return true;
-        }
-        return onResponderTerminationRequest();
-      },
-    };
+  const _accessible = Platform.select({
+    ios: accessible !== false,
+    default: accessible,
+  });
+
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  style = flattenStyle(style);
+
+  if (typeof style?.fontWeight === 'number') {
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
+    style.fontWeight = style?.fontWeight.toString();
   }
 
-  /**
-   * Lazily attaches Touchable.Mixin handlers.
-   */
-  _attachTouchHandlers(): void {
-    if (this.touchableGetPressRectOffset != null) {
-      return;
-    }
-    for (const key in Touchable.Mixin) {
-      if (typeof Touchable.Mixin[key] === 'function') {
-        (this: any)[key] = Touchable.Mixin[key].bind(this);
-      }
-    }
-    this.touchableHandleActivePressIn = (): void => {
-      if (!this.props.suppressHighlighting && isTouchable(this.props)) {
-        this.setState({isHighlighted: true});
-      }
-    };
-    this.touchableHandleActivePressOut = (): void => {
-      if (!this.props.suppressHighlighting && isTouchable(this.props)) {
-        this.setState({isHighlighted: false});
-      }
-    };
-    this.touchableHandlePress = (event: PressEvent): void => {
-      if (this.props.onPress != null) {
-        this.props.onPress(event);
-      }
-    };
-    this.touchableHandleLongPress = (event: PressEvent): void => {
-      if (this.props.onLongPress != null) {
-        this.props.onLongPress(event);
-      }
-    };
-    this.touchableGetPressRectOffset = (): PressRetentionOffset =>
-      this.props.pressRetentionOffset == null
-        ? PRESS_RECT_OFFSET
-        : this.props.pressRetentionOffset;
+  let _selectable = restProps.selectable;
+  if (style?.userSelect != null) {
+    // $FlowFixMe[invalid-computed-prop]
+    _selectable = userSelectToSelectableMap[style.userSelect];
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
+    delete style.userSelect;
   }
-}
 
-const isTouchable = (props: Props): boolean =>
-  props.onPress != null ||
-  props.onLongPress != null ||
-  props.onStartShouldSetResponder != null;
+  if (style?.verticalAlign != null) {
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
+    style.textAlignVertical =
+      // $FlowFixMe[invalid-computed-prop]
+      verticalAlignToTextAlignVerticalMap[style.verticalAlign];
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[cannot-write]
+    delete style.verticalAlign;
+  }
 
-const RCTText = createReactNativeComponentClass(
-  viewConfig.uiViewClassName,
-  () => viewConfig,
-);
+  const _hasOnPressOrOnLongPress =
+    props.onPress != null || props.onLongPress != null;
 
-const RCTVirtualText =
-  UIManager.getViewManagerConfig('RCTVirtualText') == null
-    ? RCTText
-    : createReactNativeComponentClass('RCTVirtualText', () => ({
-        validAttributes: {
-          ...ReactNativeViewAttributes.UIView,
-          isHighlighted: true,
-          maxFontSizeMultiplier: true,
-        },
-        uiViewClassName: 'RCTVirtualText',
-      }));
+  return hasTextAncestor ? (
+    <NativeVirtualText
+      {...restProps}
+      {...eventHandlersForText}
+      accessibilityLabel={ariaLabel ?? accessibilityLabel}
+      accessibilityState={_accessibilityState}
+      isHighlighted={isHighlighted}
+      isPressable={isPressable}
+      nativeID={id ?? nativeID}
+      numberOfLines={numberOfLines}
+      ref={forwardedRef}
+      selectable={_selectable}
+      selectionColor={selectionColor}
+      style={style}
+    />
+  ) : (
+    <TextAncestor.Provider value={true}>
+      <NativeText
+        {...restProps}
+        {...eventHandlersForText}
+        accessibilityLabel={ariaLabel ?? accessibilityLabel}
+        accessibilityState={nativeTextAccessibilityState}
+        accessible={
+          accessible == null && Platform.OS === 'android'
+            ? _hasOnPressOrOnLongPress
+            : _accessible
+        }
+        allowFontScaling={allowFontScaling !== false}
+        disabled={_disabled}
+        ellipsizeMode={ellipsizeMode ?? 'tail'}
+        isHighlighted={isHighlighted}
+        nativeID={id ?? nativeID}
+        numberOfLines={numberOfLines}
+        ref={forwardedRef}
+        selectable={_selectable}
+        selectionColor={selectionColor}
+        style={style}
+      />
+    </TextAncestor.Provider>
+  );
+});
 
-const Text = (
-  props: TextProps,
-  forwardedRef: ?React.Ref<'RCTText' | 'RCTVirtualText'>,
-) => {
-  return <TouchableText {...props} forwardedRef={forwardedRef} />;
-};
-const TextToExport = React.forwardRef(Text);
-TextToExport.displayName = 'Text';
+Text.displayName = 'Text';
 
-// TODO: Deprecate this.
-/* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an error
- * found when Flow v0.89 was deployed. To see the error, delete this comment
- * and run Flow. */
-TextToExport.propTypes = DeprecatedTextPropTypes;
+/**
+ * Returns false until the first time `newValue` is true, after which this will
+ * always return true. This is necessary to lazily initialize `Pressability` so
+ * we do not eagerly create one for every pressable `Text` component.
+ */
+function useLazyInitialization(newValue: boolean): boolean {
+  const [oldValue, setValue] = useState(newValue);
+  if (!oldValue && newValue) {
+    setValue(newValue);
+  }
+  return oldValue;
+}
 
-type TextStatics = $ReadOnly<{|
-  propTypes: typeof DeprecatedTextPropTypes,
-|}>;
+const userSelectToSelectableMap = {
+  auto: true,
+  text: true,
+  none: false,
+  contain: true,
+  all: true,
+};
 
-module.exports = ((TextToExport: any): React.AbstractComponent<
-  TextProps,
-  React.ElementRef<HostComponent<TextProps>>,
-> &
-  TextStatics);
+const verticalAlignToTextAlignVerticalMap = {
+  auto: 'auto',
+  top: 'top',
+  bottom: 'bottom',
+  middle: 'center',
+};
+
+module.exports = Text;