react-native-windows 0.73.10 → 0.74.0-preview.1

package/Libraries/Components/TextInput/TextInput.js

@@ -137,6 +137,9 @@ type DataDetectorTypesType =
   | 'link'
   | 'address'
   | 'calendarEvent'
+  | 'trackingNumber'
+  | 'flightNumber'
+  | 'lookupSuggestion'
   | 'none'
   | 'all';
 
@@ -808,6 +811,11 @@ export type Props = $ReadOnly<{|
    */
   unstable_onKeyPressSync?: ?(e: KeyPressEvent) => mixed,
 
+  /**
+   * Called when a single tap gesture is detected.
+   */
+  onPress?: ?(event: PressEvent) => mixed,
+
   /**
    * Called when a touch is engaged.
    */
@@ -909,6 +917,12 @@ export type Props = $ReadOnly<{|
    */
   selectionColor?: ?ColorValue,
 
+  /**
+   * The text selection handle color.
+   * @platform android
+   */
+  selectionHandleColor?: ?ColorValue,
+
   /**
    * If `true`, all text will automatically be selected on focus.
    */
@@ -1035,8 +1049,8 @@ const emptyFunctionThatReturnsTrue = () => true;
  *     return (
  *       <TextInput
  *         {...this.props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
- *         editable = {true}
- *         maxLength = {40}
+ *         editable={true}
+ *         maxLength={40}
  *       />
  *     );
  *   }
@@ -1060,8 +1074,8 @@ const emptyFunctionThatReturnsTrue = () => true;
  *        borderBottomWidth: 1 }}
  *      >
  *        <UselessTextInput
- *          multiline = {true}
- *          numberOfLines = {4}
+ *          multiline={true}
+ *          numberOfLines={4}
  *          onChangeText={(text) => this.setState({text})}
  *          value={this.state.text}
  *        />
@@ -1103,6 +1117,9 @@ function InternalTextInput(props: Props): React.Node {
     id,
     tabIndex,
     selection: propsSelection,
+    selectionColor,
+    selectionHandleColor,
+    cursorColor,
     ...otherProps
   } = props;
 
@@ -1270,10 +1287,7 @@ function InternalTextInput(props: Props): React.Node {
     [mostRecentEventCount, viewCommands],
   );
 
-  const ref = useMergeRefs<TextInputInstance | null>(
-    setLocalRef,
-    props.forwardedRef,
-  );
+  const ref = useMergeRefs<TextInputInstance>(setLocalRef, props.forwardedRef);
 
   const _onChange = (event: ChangeEvent) => {
     const currentText = event.nativeEvent.text;
@@ -1378,27 +1392,37 @@ function InternalTextInput(props: Props): React.Node {
   const accessible = props.accessible !== false;
   const focusable = props.focusable !== false;
 
+  const {
+    editable,
+    hitSlop,
+    onPress,
+    onPressIn,
+    onPressOut,
+    rejectResponderTermination,
+  } = props;
+
   const config = React.useMemo(
     () => ({
-      hitSlop: props.hitSlop,
+      hitSlop,
       onPress: (event: PressEvent) => {
-        if (props.editable !== false) {
+        onPress?.(event);
+        if (editable !== false) {
           if (inputRef.current != null) {
             inputRef.current.focus();
           }
         }
       },
-      onPressIn: props.onPressIn,
-      onPressOut: props.onPressOut,
-      cancelable:
-        Platform.OS === 'ios' ? !props.rejectResponderTermination : null,
+      onPressIn: onPressIn,
+      onPressOut: onPressOut,
+      cancelable: Platform.OS === 'ios' ? !rejectResponderTermination : null,
     }),
     [
-      props.editable,
-      props.hitSlop,
-      props.onPressIn,
-      props.onPressOut,
-      props.rejectResponderTermination,
+      editable,
+      hitSlop,
+      onPress,
+      onPressIn,
+      onPressOut,
+      rejectResponderTermination,
     ],
   );
 
@@ -1431,8 +1455,7 @@ function InternalTextInput(props: Props): React.Node {
     };
   }
 
-  // $FlowFixMe[underconstrained-implicit-instantiation]
-  let style = flattenStyle(props.style);
+  const style = flattenStyle<TextStyleProp>(props.style);
 
   if (Platform.OS === 'ios') {
     const RCTTextInputView =
@@ -1440,7 +1463,12 @@ function InternalTextInput(props: Props): React.Node {
         ? RCTMultilineTextInputView
         : RCTSinglelineTextInputView;
 
-    style = props.multiline === true ? [styles.multilineInput, style] : style;
+    const useMultilineDefaultStyle =
+      props.multiline === true &&
+      (style == null ||
+        (style.padding == null &&
+          style.paddingVertical == null &&
+          style.paddingTop == null));
 
     const useOnChangeSync =
       (props.unstable_onChangeSync || props.unstable_onChangeTextSync) &&
@@ -1470,7 +1498,10 @@ function InternalTextInput(props: Props): React.Node {
         onSelectionChange={_onSelectionChange}
         onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
         selection={selection}
-        style={style}
+        style={StyleSheet.compose(
+          useMultilineDefaultStyle ? styles.multilineDefault : null,
+          style,
+        )}
         text={text}
       />
     );
@@ -1488,7 +1519,15 @@ function InternalTextInput(props: Props): React.Node {
     if (childCount > 1) {
       children = <Text>{children}</Text>;
     }
-
+    // For consistency with iOS set cursor/selectionHandle color as selectionColor
+    const colorProps = {
+      selectionColor,
+      selectionHandleColor:
+        selectionHandleColor === undefined
+          ? selectionColor
+          : selectionHandleColor,
+      cursorColor: cursorColor === undefined ? selectionColor : cursorColor,
+    };
     textInput = (
       /* $FlowFixMe[prop-missing] the types for AndroidTextInput don't match up
        * exactly with the props for TextInput. This will need to get fixed */
@@ -1502,6 +1541,7 @@ function InternalTextInput(props: Props): React.Node {
         // $FlowFixMe[incompatible-type] - Figure out imperative + forward refs.
         ref={ref}
         {...otherProps}
+        {...colorProps}
         {...eventHandlers}
         accessibilityState={_accessibilityState}
         accessibilityLabelledBy={_accessibilityLabelledBy}
@@ -1712,13 +1752,6 @@ 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.
- */
-ExportedForwardRef.propTypes =
-  require('deprecated-react-native-prop-types').TextInputPropTypes;
-
 // $FlowFixMe[prop-missing]
 ExportedForwardRef.State = {
   currentlyFocusedInput: TextInputState.currentlyFocusedInput,
@@ -1738,7 +1771,7 @@ export type TextInputComponentStatics = $ReadOnly<{|
 |}>;
 
 const styles = StyleSheet.create({
-  multilineInput: {
+  multilineDefault: {
     // This default top inset makes RCTMultilineTextInputView seem as close as possible
     // to single-line RCTSinglelineTextInputView defaults, using the system defaults
     // of font size 17 and a height of 31 points.

package/Libraries/Components/TextInput/TextInput.windows.js

@@ -149,6 +149,9 @@ type DataDetectorTypesType =
   | 'link'
   | 'address'
   | 'calendarEvent'
+  | 'trackingNumber'
+  | 'flightNumber'
+  | 'lookupSuggestion'
   | 'none'
   | 'all';
 
@@ -885,6 +888,11 @@ export type Props = $ReadOnly<{|
    */
   unstable_onKeyPressSync?: ?(e: KeyPressEvent) => mixed,
 
+  /**
+   * Called when a single tap gesture is detected.
+   */
+  onPress?: ?(event: PressEvent) => mixed,
+
   /**
    * Called when a touch is engaged.
    */
@@ -986,6 +994,12 @@ export type Props = $ReadOnly<{|
    */
   selectionColor?: ?ColorValue,
 
+  /**
+   * The text selection handle color.
+   * @platform android
+   */
+  selectionHandleColor?: ?ColorValue,
+
   /**
    * If `true`, all text will automatically be selected on focus.
    */
@@ -1112,8 +1126,8 @@ const emptyFunctionThatReturnsTrue = () => true;
  *     return (
  *       <TextInput
  *         {...this.props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
- *         editable = {true}
- *         maxLength = {40}
+ *         editable={true}
+ *         maxLength={40}
  *       />
  *     );
  *   }
@@ -1137,8 +1151,8 @@ const emptyFunctionThatReturnsTrue = () => true;
  *        borderBottomWidth: 1 }}
  *      >
  *        <UselessTextInput
- *          multiline = {true}
- *          numberOfLines = {4}
+ *          multiline={true}
+ *          numberOfLines={4}
  *          onChangeText={(text) => this.setState({text})}
  *          value={this.state.text}
  *        />
@@ -1180,6 +1194,9 @@ function InternalTextInput(props: Props): React.Node {
     id,
     tabIndex,
     selection: propsSelection,
+    selectionColor,
+    selectionHandleColor,
+    cursorColor,
     ...otherProps
   } = props;
 
@@ -1353,10 +1370,7 @@ function InternalTextInput(props: Props): React.Node {
     [mostRecentEventCount, viewCommands],
   );
 
-  const ref = useMergeRefs<TextInputInstance | null>(
-    setLocalRef,
-    props.forwardedRef,
-  );
+  const ref = useMergeRefs<TextInputInstance>(setLocalRef, props.forwardedRef);
 
   const _onChange = (event: ChangeEvent) => {
     const currentText = event.nativeEvent.text;
@@ -1467,27 +1481,37 @@ function InternalTextInput(props: Props): React.Node {
 
   const focusable = props.focusable !== false;
 
+  const {
+    editable,
+    hitSlop,
+    onPress,
+    onPressIn,
+    onPressOut,
+    rejectResponderTermination,
+  } = props;
+
   const config = React.useMemo(
     () => ({
-      hitSlop: props.hitSlop,
+      hitSlop,
       onPress: (event: PressEvent) => {
-        if (props.editable !== false) {
+        onPress?.(event);
+        if (editable !== false) {
           if (inputRef.current != null) {
             inputRef.current.focus();
           }
         }
       },
-      onPressIn: props.onPressIn,
-      onPressOut: props.onPressOut,
-      cancelable:
-        Platform.OS === 'ios' ? !props.rejectResponderTermination : null,
+      onPressIn: onPressIn,
+      onPressOut: onPressOut,
+      cancelable: Platform.OS === 'ios' ? !rejectResponderTermination : null,
     }),
     [
-      props.editable,
-      props.hitSlop,
-      props.onPressIn,
-      props.onPressOut,
-      props.rejectResponderTermination,
+      editable,
+      hitSlop,
+      onPress,
+      onPressIn,
+      onPressOut,
+      rejectResponderTermination,
     ],
   );
 
@@ -1507,8 +1531,8 @@ function InternalTextInput(props: Props): React.Node {
       // $FlowFixMe - keyDownEvents was already checked to not be undefined
       for (const el of props.keyDownEvents) {
         if (
-          event.nativeEvent.code == el.code &&
-          el.handledEventPhase == eventPhase.Bubbling
+          event.nativeEvent.code === el.code &&
+          el.handledEventPhase === eventPhase.Bubbling
         ) {
           event.stopPropagation();
         }
@@ -1521,7 +1545,7 @@ function InternalTextInput(props: Props): React.Node {
     if (props.keyUpEvents && event.isPropagationStopped() !== true) {
       // $FlowFixMe - keyDownEvents was already checked to not be undefined
       for (const el of props.keyUpEvents) {
-        if (event.nativeEvent.code == el.code && el.handledEventPhase == 3) {
+        if (event.nativeEvent.code === el.code && el.handledEventPhase === 3) {
           event.stopPropagation();
         }
       }
@@ -1533,7 +1557,7 @@ function InternalTextInput(props: Props): React.Node {
     if (props.keyDownEvents && event.isPropagationStopped() !== true) {
       // $FlowFixMe - keyDownEvents was already checked to not be undefined
       for (const el of props.keyDownEvents) {
-        if (event.nativeEvent.code == el.code && el.handledEventPhase == 1) {
+        if (event.nativeEvent.code === el.code && el.handledEventPhase === 1) {
           event.stopPropagation();
         }
       }
@@ -1545,7 +1569,7 @@ function InternalTextInput(props: Props): React.Node {
     if (props.keyUpEvents && event.isPropagationStopped() !== true) {
       // $FlowFixMe - keyDownEvents was already checked to not be undefined
       for (const el of props.keyUpEvents) {
-        if (event.nativeEvent.code == el.code && el.handledEventPhase == 1) {
+        if (event.nativeEvent.code === el.code && el.handledEventPhase === 1) {
           event.stopPropagation();
         }
       }
@@ -1577,8 +1601,7 @@ function InternalTextInput(props: Props): React.Node {
     );
   }
 
-  // $FlowFixMe[underconstrained-implicit-instantiation]
-  let style = flattenStyle(props.style);
+  const style = flattenStyle<TextStyleProp>(props.style);
 
   if (Platform.OS === 'ios') {
     const RCTTextInputView =
@@ -1586,7 +1609,12 @@ function InternalTextInput(props: Props): React.Node {
         ? RCTMultilineTextInputView
         : RCTSinglelineTextInputView;
 
-    style = props.multiline === true ? [styles.multilineInput, style] : style;
+    const useMultilineDefaultStyle =
+      props.multiline === true &&
+      (style == null ||
+        (style.padding == null &&
+          style.paddingVertical == null &&
+          style.paddingTop == null));
 
     const useOnChangeSync =
       (props.unstable_onChangeSync || props.unstable_onChangeTextSync) &&
@@ -1617,7 +1645,10 @@ function InternalTextInput(props: Props): React.Node {
         onSelectionChange={_onSelectionChange}
         onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
         selection={selection}
-        style={style}
+        style={StyleSheet.compose(
+          useMultilineDefaultStyle ? styles.multilineDefault : null,
+          style,
+        )}
         text={text}
       />
     );
@@ -1635,7 +1666,15 @@ function InternalTextInput(props: Props): React.Node {
     if (childCount > 1) {
       children = <Text>{children}</Text>;
     }
-
+    // For consistency with iOS set cursor/selectionHandle color as selectionColor
+    const colorProps = {
+      selectionColor,
+      selectionHandleColor:
+        selectionHandleColor === undefined
+          ? selectionColor
+          : selectionHandleColor,
+      cursorColor: cursorColor === undefined ? selectionColor : cursorColor,
+    };
     textInput = (
       /* $FlowFixMe[prop-missing] the types for AndroidTextInput don't match up
        * exactly with the props for TextInput. This will need to get fixed */
@@ -1649,6 +1688,7 @@ function InternalTextInput(props: Props): React.Node {
         // $FlowFixMe[incompatible-type] - Figure out imperative + forward refs.
         ref={ref}
         {...otherProps}
+        {...colorProps}
         {...eventHandlers}
         accessibilityErrorMessage={accessibilityErrorMessage}
         accessibilityState={_accessibilityState}
@@ -1683,6 +1723,14 @@ function InternalTextInput(props: Props): React.Node {
   } // [Windows
   else if (Platform.OS === 'windows') {
     textInput = (
+      /* $FlowFixMe[prop-missing] the types for WindowsTextInput don't match up
+       * exactly with the props for TextInput. This will need to get fixed */
+      /* $FlowFixMe[incompatible-type] the types for WindowsTextInput don't
+       * match up exactly with the props for TextInput. This will need to get
+       * fixed */
+      /* $FlowFixMe[incompatible-type-arg] the types for WindowsTextInput don't
+       * match up exactly with the props for TextInput. This will need to get
+       * fixed */
       <WindowsTextInput
         // $FlowFixMe[incompatible-type] - Figure out imperative + forward refs.
         ref={ref}
@@ -1693,12 +1741,20 @@ function InternalTextInput(props: Props): React.Node {
         mostRecentEventCount={mostRecentEventCount}
         onBlur={_onBlur}
         onChange={_onChange}
+        /* $FlowFixMe[incompatible-type] the types for WindowsTextInput
+         * don't match up exactly with the props for TextInput. This will need
+         * to get fixed */
         onContentSizeChange={props.onContentSizeChange}
         onFocus={_onFocus}
+        /* $FlowFixMe[prop-missing] the types for WindowsTextInput don't match
+         * up exactly with the props for TextInput. This will need to get fixed
+         */
+        /* $FlowFixMe[incompatible-type-arg] the types for WindowsTextInput
+         * don't match up exactly with the props for TextInput. This will need
+         * to get fixed */
         onScroll={_onScroll}
         onSelectionChange={_onSelectionChange}
         onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
-        selection={selection}
         text={text}
         onKeyDown={_keyDown}
         onKeyDownCapture={_keyDownCapture}
@@ -1882,13 +1938,6 @@ 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.
- */
-ExportedForwardRef.propTypes =
-  require('deprecated-react-native-prop-types').TextInputPropTypes;
-
 // $FlowFixMe[prop-missing]
 ExportedForwardRef.State = {
   currentlyFocusedInput: TextInputState.currentlyFocusedInput,
@@ -1908,7 +1957,7 @@ export type TextInputComponentStatics = $ReadOnly<{|
 |}>;
 
 const styles = StyleSheet.create({
-  multilineInput: {
+  multilineDefault: {
     // This default top inset makes RCTMultilineTextInputView seem as close as possible
     // to single-line RCTSinglelineTextInputView defaults, using the system defaults
     // of font size 17 and a height of 31 points.