@office-iss/react-native-win32 0.71.4 → 0.72.0-preview.1

package/Libraries/Components/TextInput/TextInput.js

@@ -27,15 +27,20 @@ import StyleSheet, {
 import Text from '../../Text/Text';
 import TextAncestor from '../../Text/TextAncestor';
 import Platform from '../../Utilities/Platform';
-import setAndForwardRef from '../../Utilities/setAndForwardRef';
+import useMergeRefs from '../../Utilities/useMergeRefs';
 import TextInputState from './TextInputState';
 import invariant from 'invariant';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
-
-const {useLayoutEffect, useRef, useState} = React;
+import {useCallback, useLayoutEffect, useRef, useState} from 'react';
 
 type ReactRefSetter<T> = {current: null | T, ...} | ((ref: null | T) => mixed);
+type TextInputInstance = React.ElementRef<HostComponent<mixed>> & {
+  +clear: () => void,
+  +isFocused: () => boolean,
+  +getNativeRef: () => ?React.ElementRef<HostComponent<mixed>>,
+  +setSelection: (start: number, end: number) => void,
+};
 
 let AndroidTextInput;
 let AndroidTextInputCommands;
@@ -592,7 +597,7 @@ export type Props = $ReadOnly<{|
    * On Android devices manufactured by Xiaomi with Android Q,
    * when keyboardType equals 'email-address'this will be set
    * in native to 'true' to prevent a system related crash. This
-   * will cause cursor to be diabled as a side-effect.
+   * will cause cursor to be disabled as a side-effect.
    *
    */
   caretHidden?: ?boolean,
@@ -614,9 +619,7 @@ export type Props = $ReadOnly<{|
    */
   editable?: ?boolean,
 
-  forwardedRef?: ?ReactRefSetter<
-    React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
-  >,
+  forwardedRef?: ?ReactRefSetter<TextInputInstance>,
 
   /**
    * `enterKeyHint` defines what action label (or icon) to present for the enter key on virtual keyboards.
@@ -954,13 +957,6 @@ export type Props = $ReadOnly<{|
   value?: ?Stringish,
 |}>;
 
-type ImperativeMethods = $ReadOnly<{|
-  clear: () => void,
-  isFocused: () => boolean,
-  getNativeRef: () => ?React.ElementRef<HostComponent<mixed>>,
-  setSelection: (start: number, end: number) => void,
-|}>;
-
 const emptyFunctionThatReturnsTrue = () => true;
 
 /**
@@ -1075,6 +1071,18 @@ const emptyFunctionThatReturnsTrue = () => true;
  *
  */
 function InternalTextInput(props: Props): React.Node {
+  const {
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-selected': ariaSelected,
+    accessibilityState,
+    id,
+    tabIndex,
+    ...otherProps
+  } = props;
+
   const inputRef = useRef<null | React.ElementRef<HostComponent<mixed>>>(null);
 
   // Android sends a "onTextChanged" event followed by a "onSelectionChanged" event, for
@@ -1190,74 +1198,74 @@ function InternalTextInput(props: Props): React.Node {
     }
   }, [inputRef]);
 
-  function clear(): void {
-    if (inputRef.current != null) {
-      viewCommands.setTextAndSelection(
-        inputRef.current,
-        mostRecentEventCount,
-        '',
-        0,
-        0,
-      );
-    }
-  }
-
-  function setSelection(start: number, end: number): void {
-    if (inputRef.current != null) {
-      viewCommands.setTextAndSelection(
-        inputRef.current,
-        mostRecentEventCount,
-        null,
-        start,
-        end,
-      );
-    }
-  }
-
-  // TODO: Fix this returning true on null === null, when no input is focused
-  function isFocused(): boolean {
-    return TextInputState.currentlyFocusedInput() === inputRef.current;
-  }
-
-  function getNativeRef(): ?React.ElementRef<HostComponent<mixed>> {
-    return inputRef.current;
-  }
-
-  const _setNativeRef = setAndForwardRef({
-    getForwardedRef: () => props.forwardedRef,
-    setLocalRef: ref => {
-      inputRef.current = ref;
+  const setLocalRef = useCallback(
+    (instance: TextInputInstance | null) => {
+      inputRef.current = instance;
 
       /*
-        Hi reader from the future. I'm sorry for this.
-
-        This is a hack. Ideally we would forwardRef to the underlying
-        host component. However, since TextInput has it's own methods that can be
-        called as well, if we used the standard forwardRef then these
-        methods wouldn't be accessible and thus be a breaking change.
-
-        We have a couple of options of how to handle this:
-        - Return a new ref with everything we methods from both. This is problematic
-          because we need React to also know it is a host component which requires
-          internals of the class implementation of the ref.
-        - Break the API and have some other way to call one set of the methods or
-          the other. This is our long term approach as we want to eventually
-          get the methods on host components off the ref. So instead of calling
-          ref.measure() you might call ReactNative.measure(ref). This would hopefully
-          let the ref for TextInput then have the methods like `.clear`. Or we do it
-          the other way and make it TextInput.clear(textInputRef) which would be fine
-          too. Either way though is a breaking change that is longer term.
-        - Mutate this ref. :( Gross, but accomplishes what we need in the meantime
-          before we can get to the long term breaking change.
-        */
-      if (ref) {
-        ref.clear = clear;
-        ref.isFocused = isFocused;
-        ref.getNativeRef = getNativeRef;
-        ref.setSelection = setSelection;
+      Hi reader from the future. I'm sorry for this.
+
+      This is a hack. Ideally we would forwardRef to the underlying
+      host component. However, since TextInput has it's own methods that can be
+      called as well, if we used the standard forwardRef then these
+      methods wouldn't be accessible and thus be a breaking change.
+
+      We have a couple of options of how to handle this:
+      - Return a new ref with everything we methods from both. This is problematic
+        because we need React to also know it is a host component which requires
+        internals of the class implementation of the ref.
+      - Break the API and have some other way to call one set of the methods or
+        the other. This is our long term approach as we want to eventually
+        get the methods on host components off the ref. So instead of calling
+        ref.measure() you might call ReactNative.measure(ref). This would hopefully
+        let the ref for TextInput then have the methods like `.clear`. Or we do it
+        the other way and make it TextInput.clear(textInputRef) which would be fine
+        too. Either way though is a breaking change that is longer term.
+      - Mutate this ref. :( Gross, but accomplishes what we need in the meantime
+        before we can get to the long term breaking change.
+      */
+      if (instance != null) {
+        // $FlowFixMe[incompatible-use] - See the explanation above.
+        Object.assign(instance, {
+          clear(): void {
+            if (inputRef.current != null) {
+              viewCommands.setTextAndSelection(
+                inputRef.current,
+                mostRecentEventCount,
+                '',
+                0,
+                0,
+              );
+            }
+          },
+          // TODO: Fix this returning true on null === null, when no input is focused
+          isFocused(): boolean {
+            return TextInputState.currentlyFocusedInput() === inputRef.current;
+          },
+          getNativeRef(): ?React.ElementRef<HostComponent<mixed>> {
+            return inputRef.current;
+          },
+          setSelection(start: number, end: number): void {
+            if (inputRef.current != null) {
+              viewCommands.setTextAndSelection(
+                inputRef.current,
+                mostRecentEventCount,
+                null,
+                start,
+                end,
+              );
+            }
+          },
+        });
       }
     },
-  });
+    [mostRecentEventCount, viewCommands],
+  );
+
+  const ref = useMergeRefs<TextInputInstance | null>(
+    setLocalRef,
+    props.forwardedRef,
+  );
 
   const _onChange = (event: ChangeEvent) => {
     const currentText = event.nativeEvent.text;
@@ -1395,13 +1403,26 @@ function InternalTextInput(props: Props): React.Node {
   // so omitting onBlur and onFocus pressability handlers here.
   const {onBlur, onFocus, ...eventHandlers} = usePressability(config) || {};
 
-  const _accessibilityState = {
-    busy: props['aria-busy'] ?? props.accessibilityState?.busy,
-    checked: props['aria-checked'] ?? props.accessibilityState?.checked,
-    disabled: props['aria-disabled'] ?? props.accessibilityState?.disabled,
-    expanded: props['aria-expanded'] ?? props.accessibilityState?.expanded,
-    selected: props['aria-selected'] ?? props.accessibilityState?.selected,
-  };
+  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,
+    };
+  }
+
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  let style = flattenStyle(props.style);
 
   if (Platform.OS === 'ios') {
     const RCTTextInputView =
@@ -1409,10 +1430,7 @@ function InternalTextInput(props: Props): React.Node {
         ? RCTMultilineTextInputView
         : RCTSinglelineTextInputView;
 
-    const style =
-      props.multiline === true
-        ? StyleSheet.flatten([styles.multilineInput, props.style])
-        : props.style;
+    style = props.multiline === true ? [styles.multilineInput, style] : style;
 
     const useOnChangeSync =
       (props.unstable_onChangeSync || props.unstable_onChangeTextSync) &&
@@ -1420,16 +1438,18 @@ function InternalTextInput(props: Props): React.Node {
 
     textInput = (
       <RCTTextInputView
-        ref={_setNativeRef}
-        {...props}
+        // $FlowFixMe[incompatible-type] - Figure out imperative + forward refs.
+        ref={ref}
+        {...otherProps}
         {...eventHandlers}
-        accessible={accessible}
         accessibilityState={_accessibilityState}
+        accessible={accessible}
         submitBehavior={submitBehavior}
         caretHidden={caretHidden}
         dataDetectorTypes={props.dataDetectorTypes}
-        focusable={focusable}
+        focusable={tabIndex !== undefined ? !tabIndex : focusable}
         mostRecentEventCount={mostRecentEventCount}
+        nativeID={id ?? props.nativeID}
         onBlur={_onBlur}
         onKeyPressSync={props.unstable_onKeyPressSync}
         onChange={_onChange}
@@ -1445,7 +1465,6 @@ function InternalTextInput(props: Props): React.Node {
       />
     );
   } else if (Platform.OS === 'android') {
-    const style = [props.style];
     const autoCapitalize = props.autoCapitalize || 'sentences';
     const _accessibilityLabelledBy =
       props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy;
@@ -1470,19 +1489,21 @@ function InternalTextInput(props: Props): React.Node {
        * match up exactly with the props for TextInput. This will need to get
        * fixed */
       <AndroidTextInput
-        ref={_setNativeRef}
-        {...props}
+        // $FlowFixMe[incompatible-type] - Figure out imperative + forward refs.
+        ref={ref}
+        {...otherProps}
         {...eventHandlers}
-        accessible={accessible}
         accessibilityState={_accessibilityState}
         accessibilityLabelledBy={_accessibilityLabelledBy}
+        accessible={accessible}
         autoCapitalize={autoCapitalize}
         submitBehavior={submitBehavior}
         caretHidden={caretHidden}
         children={children}
         disableFullscreenUI={props.disableFullscreenUI}
-        focusable={focusable}
+        focusable={tabIndex !== undefined ? !tabIndex : focusable}
         mostRecentEventCount={mostRecentEventCount}
+        nativeID={id ?? props.nativeID}
         numberOfLines={props.rows ?? props.numberOfLines}
         onBlur={_onBlur}
         onChange={_onChange}
@@ -1592,7 +1613,7 @@ const autoCompleteWebToTextContentTypeMap = {
 
 const ExportedForwardRef: React.AbstractComponent<
   React.ElementConfig<typeof InternalTextInput>,
-  React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
+  TextInputInstance,
 > = React.forwardRef(function TextInput(
   {
     allowFontScaling = true,
@@ -1605,18 +1626,19 @@ const ExportedForwardRef: React.AbstractComponent<
     enterKeyHint,
     returnKeyType,
     inputMode,
+    showSoftInputOnFocus,
     keyboardType,
     ...restProps
   },
-  forwardedRef: ReactRefSetter<
-    React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
-  >,
+  forwardedRef: ReactRefSetter<TextInputInstance>,
 ) {
-  const style = flattenStyle(restProps.style);
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  let style = flattenStyle(restProps.style);
 
   if (style?.verticalAlign != null) {
     style.textAlignVertical =
       verticalAlignToTextAlignVerticalMap[style.verticalAlign];
+    delete style.verticalAlign;
   }
 
   return (
@@ -1631,6 +1653,9 @@ const ExportedForwardRef: React.AbstractComponent<
       keyboardType={
         inputMode ? inputModeToKeyboardTypeMap[inputMode] : keyboardType
       }
+      showSoftInputOnFocus={
+        inputMode == null ? showSoftInputOnFocus : inputMode !== 'none'
+      }
       autoComplete={
         Platform.OS === 'android'
           ? // $FlowFixMe[invalid-computed-prop]
@@ -1657,6 +1682,8 @@ const ExportedForwardRef: React.AbstractComponent<
   );
 });
 
+ExportedForwardRef.displayName = 'TextInput';
+
 /**
  * Switch to `deprecated-react-native-prop-types` for compatibility with future
  * releases. This is deprecated and will be removed in the future.