react-native-windows 0.70.8 → 0.71.0-preview.1

package/Libraries/Components/TextInput/TextInput.js

@@ -8,30 +8,30 @@
  * @format
  */
 
-import * as React from 'react';
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {
+  PressEvent,
+  ScrollEvent,
+  SyntheticEvent,
+} from '../../Types/CoreEventTypes';
+import type {ViewProps} from '../View/ViewPropTypes';
+import type {TextInputType} from './TextInput.flow';
 
-import Platform from '../../Utilities/Platform';
+import usePressability from '../../Pressability/usePressability';
+import flattenStyle from '../../StyleSheet/flattenStyle';
 import StyleSheet, {
+  type ColorValue,
   type TextStyleProp,
   type ViewStyleProp,
-  type ColorValue,
 } from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import TextAncestor from '../../Text/TextAncestor';
+import Platform from '../../Utilities/Platform';
+import setAndForwardRef from '../../Utilities/setAndForwardRef';
 import TextInputState from './TextInputState';
 import invariant from 'invariant';
 import nullthrows from 'nullthrows';
-import setAndForwardRef from '../../Utilities/setAndForwardRef';
-
-import usePressability from '../../Pressability/usePressability';
-
-import type {ViewProps} from '../View/ViewPropTypes';
-import type {
-  SyntheticEvent,
-  ScrollEvent,
-  PressEvent,
-} from '../../Types/CoreEventTypes';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import * as React from 'react';
 
 const {useLayoutEffect, useRef, useState} = React;
 
@@ -155,6 +155,16 @@ export type KeyboardType =
   // Android-only
   | 'visible-password';
 
+export type InputMode =
+  | 'none'
+  | 'text'
+  | 'decimal'
+  | 'numeric'
+  | 'tel'
+  | 'search'
+  | 'email'
+  | 'url';
+
 export type ReturnKeyType =
   // Cross Platform
   | 'done'
@@ -173,6 +183,8 @@ export type ReturnKeyType =
   | 'route'
   | 'yahoo';
 
+export type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline';
+
 export type AutoCapitalize = 'none' | 'sentences' | 'words' | 'characters';
 
 export type TextContentType =
@@ -205,9 +217,48 @@ export type TextContentType =
   | 'newPassword'
   | 'oneTimeCode';
 
+export type enterKeyHintType =
+  | 'enter'
+  | 'done'
+  | 'go'
+  | 'next'
+  | 'previous'
+  | 'search'
+  | 'send';
+
 type PasswordRules = string;
 
 type IOSProps = $ReadOnly<{|
+  /**
+   * Give the keyboard and the system information about the
+   * expected semantic meaning for the content that users enter.
+   * @platform ios
+   */
+  autoComplete?: ?(
+    | 'address-line1'
+    | 'address-line2'
+    | 'cc-number'
+    | 'current-password'
+    | 'country'
+    | 'email'
+    | 'name'
+    | 'additional-name'
+    | 'family-name'
+    | 'given-name'
+    | 'nickname'
+    | 'honorific-prefix'
+    | 'honorific-suffix'
+    | 'new-password'
+    | 'off'
+    | 'one-time-code'
+    | 'organization'
+    | 'organization-title'
+    | 'postal-code'
+    | 'street-address'
+    | 'tel'
+    | 'url'
+    | 'username'
+  ),
   /**
    * When the clear button should appear on the right side of the text view.
    * This property is supported only for single-line TextInput component.
@@ -301,6 +352,12 @@ type IOSProps = $ReadOnly<{|
    * @platform ios
    */
   textContentType?: ?TextContentType,
+
+  /**
+   * Set line break strategy on iOS.
+   * @platform ios
+   */
+  lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
 |}>;
 
 type AndroidProps = $ReadOnly<{|
@@ -390,6 +447,23 @@ type AndroidProps = $ReadOnly<{|
     | 'username'
     | 'username-new'
     | 'off'
+    // additional HTML autocomplete values
+    | 'address-line1'
+    | 'address-line2'
+    | 'bday'
+    | 'bday-day'
+    | 'bday-month'
+    | 'bday-year'
+    | 'country'
+    | 'current-password'
+    | 'honorific-prefix'
+    | 'honorific-suffix'
+    | 'additional-name'
+    | 'family-name'
+    | 'given-name'
+    | 'new-password'
+    | 'one-time-code'
+    | 'sex'
   ),
 
   /**
@@ -450,6 +524,13 @@ type AndroidProps = $ReadOnly<{|
    */
   returnKeyLabel?: ?string,
 
+  /**
+   * Sets the number of rows for a `TextInput`. Use it with multiline set to
+   * `true` to be able to fill the lines.
+   * @platform android
+   */
+  rows?: ?number,
+
   /**
    * When `false`, it will prevent the soft keyboard from showing when the field is focused.
    * Defaults to `true`.
@@ -502,15 +583,6 @@ export type Props = $ReadOnly<{|
    */
   allowFontScaling?: ?boolean,
 
-  /**
-   * If `true`, the text field will blur when submitted.
-   * The default value is true for single-line fields and false for
-   * multiline fields. Note that for multiline fields, setting `blurOnSubmit`
-   * to `true` means that pressing return will blur the field and trigger the
-   * `onSubmitEditing` event instead of inserting a newline into the field.
-   */
-  blurOnSubmit?: ?boolean,
-
   /**
    * If `true`, caret is hidden. The default value is `false`.
    *
@@ -543,6 +615,38 @@ export type Props = $ReadOnly<{|
     React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
   >,
 
+  /**
+   * `enterKeyHint` defines what action label (or icon) to present for the enter key on virtual keyboards.
+   *
+   * The following values is supported:
+   *
+   * - `enter`
+   * - `done`
+   * - `go`
+   * - `next`
+   * - `previous`
+   * - `search`
+   * - `send`
+   */
+  enterKeyHint?: ?enterKeyHintType,
+
+  /**
+   * `inputMode` works like the `inputmode` attribute in HTML, it determines which
+   * keyboard to open, e.g.`numeric` and has precedence over keyboardType
+   *
+   * Support the following values:
+   *
+   * - `none`
+   * - `text`
+   * - `decimal`
+   * - `numeric`
+   * - `tel`
+   * - `search`
+   * - `email`
+   * - `url`
+   */
+  inputMode?: ?InputMode,
+
   /**
    * Determines which keyboard to open, e.g.`numeric`.
    *
@@ -716,6 +820,13 @@ export type Props = $ReadOnly<{|
    */
   placeholderTextColor?: ?ColorValue,
 
+  /** `readOnly` works like the `readonly` attribute in HTML.
+   *  If `true`, text is not editable. The default value is `false`.
+   *  See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
+   *  for more details.
+   */
+  readOnly?: ?boolean,
+
   /**
    * Determines how the return key should look. On Android you can also use
    * `returnKeyLabel`.
@@ -775,6 +886,40 @@ export type Props = $ReadOnly<{|
    */
   selectTextOnFocus?: ?boolean,
 
+  /**
+   * If `true`, the text field will blur when submitted.
+   * The default value is true for single-line fields and false for
+   * multiline fields. Note that for multiline fields, setting `blurOnSubmit`
+   * to `true` means that pressing return will blur the field and trigger the
+   * `onSubmitEditing` event instead of inserting a newline into the field.
+   *
+   * @deprecated
+   * Note that `submitBehavior` now takes the place of `blurOnSubmit` and will
+   * override any behavior defined by `blurOnSubmit`.
+   * @see submitBehavior
+   */
+  blurOnSubmit?: ?boolean,
+
+  /**
+   * When the return key is pressed,
+   *
+   * For single line inputs:
+   *
+   * - `'newline`' defaults to `'blurAndSubmit'`
+   * - `undefined` defaults to `'blurAndSubmit'`
+   *
+   * For multiline inputs:
+   *
+   * - `'newline'` adds a newline
+   * - `undefined` defaults to `'newline'`
+   *
+   * For both single line and multiline inputs:
+   *
+   * - `'submit'` will only send a submit event and not blur the input
+   * - `'blurAndSubmit`' will both blur the input and send a submit event
+   */
+  submitBehavior?: ?SubmitBehavior,
+
   /**
    * Note that not all Text styles are supported, an incomplete list of what is not supported includes:
    *
@@ -976,8 +1121,6 @@ function InternalTextInput(props: Props): React.Node {
   const text =
     typeof props.value === 'string'
       ? props.value
-      : typeof lastNativeText === 'string'
-      ? lastNativeText
       : typeof props.defaultValue === 'string'
       ? props.defaultValue
       : '';
@@ -1187,9 +1330,31 @@ function InternalTextInput(props: Props): React.Node {
 
   let textInput = null;
 
-  // The default value for `blurOnSubmit` is true for single-line fields and
-  // false for multi-line fields.
-  const blurOnSubmit = props.blurOnSubmit ?? !props.multiline;
+  const multiline = props.multiline ?? false;
+
+  let submitBehavior: SubmitBehavior;
+  if (props.submitBehavior != null) {
+    // `submitBehavior` is set explicitly
+    if (!multiline && props.submitBehavior === 'newline') {
+      // For single line text inputs, `'newline'` is not a valid option
+      submitBehavior = 'blurAndSubmit';
+    } else {
+      submitBehavior = props.submitBehavior;
+    }
+  } else if (multiline) {
+    if (props.blurOnSubmit === true) {
+      submitBehavior = 'blurAndSubmit';
+    } else {
+      submitBehavior = 'newline';
+    }
+  } else {
+    // Single line
+    if (props.blurOnSubmit !== false) {
+      submitBehavior = 'blurAndSubmit';
+    } else {
+      submitBehavior = 'submit';
+    }
+  }
 
   const accessible = props.accessible !== false;
   const focusable = props.focusable !== false;
@@ -1227,6 +1392,14 @@ 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,
+  };
+
   if (Platform.OS === 'ios') {
     const RCTTextInputView =
       props.multiline === true
@@ -1248,7 +1421,8 @@ function InternalTextInput(props: Props): React.Node {
         {...props}
         {...eventHandlers}
         accessible={accessible}
-        blurOnSubmit={blurOnSubmit}
+        accessibilityState={_accessibilityState}
+        submitBehavior={submitBehavior}
         caretHidden={caretHidden}
         dataDetectorTypes={props.dataDetectorTypes}
         focusable={focusable}
@@ -1270,6 +1444,8 @@ 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;
     const placeholder = props.placeholder ?? '';
     let children = props.children;
     const childCount = React.Children.count(children);
@@ -1295,13 +1471,16 @@ function InternalTextInput(props: Props): React.Node {
         {...props}
         {...eventHandlers}
         accessible={accessible}
+        accessibilityState={_accessibilityState}
+        accessibilityLabelledBy={_accessibilityLabelledBy}
         autoCapitalize={autoCapitalize}
-        blurOnSubmit={blurOnSubmit}
+        submitBehavior={submitBehavior}
         caretHidden={caretHidden}
         children={children}
         disableFullscreenUI={props.disableFullscreenUI}
         focusable={focusable}
         mostRecentEventCount={mostRecentEventCount}
+        numberOfLines={props.rows ?? props.numberOfLines}
         onBlur={_onBlur}
         onChange={_onChange}
         onFocus={_onFocus}
@@ -1326,6 +1505,88 @@ function InternalTextInput(props: Props): React.Node {
   );
 }
 
+const enterKeyHintToReturnTypeMap = {
+  enter: 'default',
+  done: 'done',
+  go: 'go',
+  next: 'next',
+  previous: 'previous',
+  search: 'search',
+  send: 'send',
+};
+
+const inputModeToKeyboardTypeMap = {
+  none: 'default',
+  text: 'default',
+  decimal: 'decimal-pad',
+  numeric: 'number-pad',
+  tel: 'phone-pad',
+  search: Platform.OS === 'ios' ? 'web-search' : 'default',
+  email: 'email-address',
+  url: 'url',
+};
+
+// Map HTML autocomplete values to Android autoComplete values
+const autoCompleteWebToAutoCompleteAndroidMap = {
+  'address-line1': 'postal-address-region',
+  'address-line2': 'postal-address-locality',
+  bday: 'birthdate-full',
+  'bday-day': 'birthdate-day',
+  'bday-month': 'birthdate-month',
+  'bday-year': 'birthdate-year',
+  'cc-csc': 'cc-csc',
+  'cc-exp': 'cc-exp',
+  'cc-exp-month': 'cc-exp-month',
+  'cc-exp-year': 'cc-exp-year',
+  'cc-number': 'cc-number',
+  country: 'postal-address-country',
+  'current-password': 'password',
+  email: 'email',
+  'honorific-prefix': 'name-prefix',
+  'honorific-suffix': 'name-suffix',
+  name: 'name',
+  'additional-name': 'name-middle',
+  'family-name': 'name-family',
+  'given-name': 'name-given',
+  'new-password': 'password-new',
+  off: 'off',
+  'one-time-code': 'sms-otp',
+  'postal-code': 'postal-code',
+  sex: 'gender',
+  'street-address': 'street-address',
+  tel: 'tel',
+  'tel-country-code': 'tel-country-code',
+  'tel-national': 'tel-national',
+  username: 'username',
+};
+
+// Map HTML autocomplete values to iOS textContentType values
+const autoCompleteWebToTextContentTypeMap = {
+  'address-line1': 'streetAddressLine1',
+  'address-line2': 'streetAddressLine2',
+  'cc-number': 'creditCardNumber',
+  'current-password': 'password',
+  country: 'countryName',
+  email: 'emailAddress',
+  name: 'name',
+  'additional-name': 'middleName',
+  'family-name': 'familyName',
+  'given-name': 'givenName',
+  nickname: 'nickname',
+  'honorific-prefix': 'namePrefix',
+  'honorific-suffix': 'nameSuffix',
+  'new-password': 'newPassword',
+  off: 'none',
+  'one-time-code': 'oneTimeCode',
+  organization: 'organizationName',
+  'organization-title': 'jobTitle',
+  'postal-code': 'postalCode',
+  'street-address': 'fullStreetAddress',
+  tel: 'telephoneNumber',
+  url: 'URL',
+  username: 'username',
+};
+
 const ExportedForwardRef: React.AbstractComponent<
   React.ElementConfig<typeof InternalTextInput>,
   React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
@@ -1334,23 +1595,68 @@ const ExportedForwardRef: React.AbstractComponent<
     allowFontScaling = true,
     rejectResponderTermination = true,
     underlineColorAndroid = 'transparent',
+    autoComplete,
+    textContentType,
+    readOnly,
+    editable,
+    enterKeyHint,
+    returnKeyType,
+    inputMode,
+    keyboardType,
     ...restProps
   },
   forwardedRef: ReactRefSetter<
     React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
   >,
 ) {
+  const style = flattenStyle(restProps.style);
+
+  if (style?.verticalAlign != null) {
+    style.textAlignVertical =
+      verticalAlignToTextAlignVerticalMap[style.verticalAlign];
+  }
+
   return (
     <InternalTextInput
       allowFontScaling={allowFontScaling}
       rejectResponderTermination={rejectResponderTermination}
       underlineColorAndroid={underlineColorAndroid}
+      editable={readOnly !== undefined ? !readOnly : editable}
+      returnKeyType={
+        enterKeyHint ? enterKeyHintToReturnTypeMap[enterKeyHint] : returnKeyType
+      }
+      keyboardType={
+        inputMode ? inputModeToKeyboardTypeMap[inputMode] : keyboardType
+      }
+      autoComplete={
+        Platform.OS === 'android'
+          ? // $FlowFixMe
+            autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
+            autoComplete
+          : undefined
+      }
+      textContentType={
+        Platform.OS === 'ios' &&
+        autoComplete &&
+        autoComplete in autoCompleteWebToTextContentTypeMap
+          ? // $FlowFixMe
+            autoCompleteWebToTextContentTypeMap[autoComplete]
+          : textContentType
+      }
       {...restProps}
       forwardedRef={forwardedRef}
+      style={style}
     />
   );
 });
 
+/**
+ * Switch to `deprecated-react-native-prop-types` for compatibility with future
+ * releases. This is deprecated and will be removed in the future.
+ */
+ExportedForwardRef.propTypes =
+  require('deprecated-react-native-prop-types').TextInputPropTypes;
+
 // $FlowFixMe[prop-missing]
 ExportedForwardRef.State = {
   currentlyFocusedInput: TextInputState.currentlyFocusedInput,
@@ -1378,12 +1684,12 @@ const styles = StyleSheet.create({
   },
 });
 
+const verticalAlignToTextAlignVerticalMap = {
+  auto: 'auto',
+  top: 'top',
+  bottom: 'bottom',
+  middle: 'center',
+};
+
 // $FlowFixMe[unclear-type] Unclear type. Using `any` type is not safe.
-module.exports = ((ExportedForwardRef: any): React.AbstractComponent<
-  React.ElementConfig<typeof InternalTextInput>,
-  $ReadOnly<{|
-    ...React.ElementRef<HostComponent<mixed>>,
-    ...ImperativeMethods,
-  |}>,
-> &
-  TextInputComponentStatics);
+module.exports = ((ExportedForwardRef: any): TextInputType);