@office-iss/react-native-win32 0.78.2 → 0.79.0-preview.1

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -9,7 +9,7 @@
  */
 
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
+import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
 import View from '../../Components/View/View';
 import Pressability, {
@@ -20,42 +20,60 @@ import StyleSheet, {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 
-type AndroidProps = $ReadOnly<{|
+type AndroidProps = $ReadOnly<{
   nextFocusDown?: ?number,
   nextFocusForward?: ?number,
   nextFocusLeft?: ?number,
   nextFocusRight?: ?number,
   nextFocusUp?: ?number,
-|}>;
+}>;
 
-type IOSProps = $ReadOnly<{|
+type IOSProps = $ReadOnly<{
   hasTVPreferredFocus?: ?boolean,
-|}>;
-
-type Props = $ReadOnly<{|
-  ...React.ElementConfig<TouchableWithoutFeedback>,
-  ...AndroidProps,
-  ...IOSProps,
+}>;
 
+type TouchableHighlightBaseProps = $ReadOnly<{
+  /**
+   * Determines what the opacity of the wrapped view should be when touch is active.
+   */
   activeOpacity?: ?number,
+  /**
+   * The color of the underlay that will show through when the touch is active.
+   */
   underlayColor?: ?ColorValue,
+  /**
+   * @see https://reactnative.dev/docs/view#style
+   */
   style?: ?ViewStyleProp,
+  /**
+   * Called immediately after the underlay is shown
+   */
   onShowUnderlay?: ?() => void,
+  /**
+   * Called immediately after the underlay is hidden
+   */
   onHideUnderlay?: ?() => void,
   testOnly_pressed?: ?boolean,
 
   hostRef: React.RefSetter<React.ElementRef<typeof View>>,
-|}>;
+}>;
+
+type TouchableHighlightProps = $ReadOnly<{
+  ...TouchableWithoutFeedbackProps,
+  ...AndroidProps,
+  ...IOSProps,
+  ...TouchableHighlightBaseProps,
+}>;
 
-type ExtraStyles = $ReadOnly<{|
+type ExtraStyles = $ReadOnly<{
   child: ViewStyleProp,
   underlay: ViewStyleProp,
-|}>;
+}>;
 
-type State = $ReadOnly<{|
+type State = $ReadOnly<{
   pressability: Pressability,
   extraStyles: ?ExtraStyles,
-|}>;
+}>;
 
 /**
  * A wrapper for making views respond properly to touches.
@@ -153,7 +171,10 @@ type State = $ReadOnly<{|
  * ```
  *
  */
-class TouchableHighlight extends React.Component<Props, State> {
+class TouchableHighlightImpl extends React.Component<
+  TouchableHighlightProps,
+  State,
+> {
   _hideTimeout: ?TimeoutID;
   _isMounted: boolean = false;
 
@@ -368,7 +389,7 @@ class TouchableHighlight extends React.Component<Props, State> {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
-  componentDidUpdate(prevProps: Props, prevState: State) {
+  componentDidUpdate(prevProps: TouchableHighlightProps, prevState: State) {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
@@ -381,13 +402,13 @@ class TouchableHighlight extends React.Component<Props, State> {
   }
 }
 
-const Touchable: component(
-  ref: React.RefSetter<React.ElementRef<typeof View>>,
-  ...props: $ReadOnly<$Diff<Props, {|+hostRef: mixed|}>>
+const TouchableHighlight: component(
+  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ...props: $ReadOnly<$Diff<TouchableHighlightProps, {+hostRef: mixed}>>
 ) = React.forwardRef((props, hostRef) => (
-  <TouchableHighlight {...props} hostRef={hostRef} />
+  <TouchableHighlightImpl {...props} hostRef={hostRef} />
 ));
 
-Touchable.displayName = 'TouchableHighlight';
+TouchableHighlight.displayName = 'TouchableHighlight';
 
-module.exports = Touchable;
+export default TouchableHighlight;

package/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -8,8 +8,8 @@
  * @format
  */
 
-import type {PressEvent} from '../../Types/CoreEventTypes';
-import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
+import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
 import View from '../../Components/View/View';
 import Pressability, {
@@ -23,61 +23,82 @@ import {Commands} from '../View/ViewNativeComponent';
 import invariant from 'invariant';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
-  ...React.ElementConfig<TouchableWithoutFeedback>,
-
+type TVProps = {
   /**
-   * Determines the type of background drawable that's going to be used to
-   * display feedback. It takes an object with `type` property and extra data
-   * depending on the `type`. It's recommended to use one of the static
-   * methods to generate that dictionary.
-   */
-  background?: ?(
-    | $ReadOnly<{|
-        type: 'ThemeAttrAndroid',
-        attribute:
-          | 'selectableItemBackground'
-          | 'selectableItemBackgroundBorderless',
-        rippleRadius: ?number,
-      |}>
-    | $ReadOnly<{|
-        type: 'RippleAndroid',
-        color: ?number,
-        borderless: boolean,
-        rippleRadius: ?number,
-      |}>
-  ),
-
-  /**
-   * TV preferred focus (see documentation for the View component).
+   * *(Apple TV only)* TV preferred focus (see documentation for the View component).
+   *
+   * @platform ios
    */
   hasTVPreferredFocus?: ?boolean,
 
   /**
-   * TV next focus down (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates down. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusDown?: ?number,
 
   /**
-   * TV next focus forward (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates forward. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusForward?: ?number,
 
   /**
-   * TV next focus left (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates left. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusLeft?: ?number,
 
   /**
-   * TV next focus right (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates right. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusRight?: ?number,
 
   /**
-   * TV next focus up (see documentation for the View component).
+   * Designates the next view to receive focus when the user navigates up. See the Android documentation.
+   *
+   * @platform android
    */
   nextFocusUp?: ?number,
+};
 
+export type TouchableNativeFeedbackProps = $ReadOnly<{
+  ...TouchableWithoutFeedbackProps,
+  ...TVProps,
+  /**
+   * Determines the type of background drawable that's going to be used to display feedback.
+   * It takes an object with type property and extra data depending on the type.
+   * It's recommended to use one of the following static methods to generate that dictionary:
+   *      1) TouchableNativeFeedback.SelectableBackground() - will create object that represents android theme's
+   *         default background for selectable elements (?android:attr/selectableItemBackground)
+   *      2) TouchableNativeFeedback.SelectableBackgroundBorderless() - will create object that represent android
+   *         theme's default background for borderless selectable elements
+   *         (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+
+   *      3) TouchableNativeFeedback.Ripple(color, borderless) - will create object that represents ripple drawable
+   *         with specified color (as a string). If property borderless evaluates to true the ripple will render
+   *         outside of the view bounds (see native actionbar buttons as an example of that behavior). This background
+   *         type is available on Android API level 21+
+   */
+  background?: ?(
+    | $ReadOnly<{
+        type: 'ThemeAttrAndroid',
+        attribute:
+          | 'selectableItemBackground'
+          | 'selectableItemBackgroundBorderless',
+        rippleRadius: ?number,
+      }>
+    | $ReadOnly<{
+        type: 'RippleAndroid',
+        color: ?number,
+        borderless: boolean,
+        rippleRadius: ?number,
+      }>
+  ),
   /**
    * Set to true to add the ripple effect to the foreground of the view, instead
    * of the background. This is useful if one of your child views has a
@@ -89,56 +110,80 @@ type Props = $ReadOnly<{|
    * versions, this will fallback to background.
    */
   useForeground?: ?boolean,
-|}>;
+}>;
 
-type State = $ReadOnly<{|
+type State = $ReadOnly<{
   pressability: Pressability,
-|}>;
+}>;
 
-class TouchableNativeFeedback extends React.Component<Props, State> {
+/**
+ * A wrapper for making views respond properly to touches (Android only).
+ * On Android this component uses native state drawable to display touch feedback.
+ * At the moment it only supports having a single View instance as a child node,
+ * as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
+ *
+ * Background drawable of native feedback touchable can be customized with background property.
+ *
+ * @see https://reactnative.dev/docs/touchablenativefeedback#content
+ */
+class TouchableNativeFeedback extends React.Component<
+  TouchableNativeFeedbackProps,
+  State,
+> {
   /**
-   * Creates a value for the `background` prop that uses the Android theme's
-   * default background for selectable elements.
+   * Creates an object that represents android theme's default background for
+   * selectable elements (?android:attr/selectableItemBackground).
+   *
+   * @param rippleRadius The radius of ripple effect
    */
-  static SelectableBackground: (rippleRadius: ?number) => $ReadOnly<{|
+  static SelectableBackground: (rippleRadius?: ?number) => $ReadOnly<{
     attribute: 'selectableItemBackground',
     type: 'ThemeAttrAndroid',
     rippleRadius: ?number,
-  |}> = (rippleRadius: ?number) => ({
+  }> = (rippleRadius?: ?number) => ({
     type: 'ThemeAttrAndroid',
     attribute: 'selectableItemBackground',
     rippleRadius,
   });
 
   /**
-   * Creates a value for the `background` prop that uses the Android theme's
-   * default background for borderless selectable elements. Requires API 21+.
+   * Creates an object that represent android theme's default background for borderless
+   * selectable elements (?android:attr/selectableItemBackgroundBorderless).
+   * Available on android API level 21+.
+   *
+   * @param rippleRadius The radius of ripple effect
    */
-  static SelectableBackgroundBorderless: (rippleRadius: ?number) => $ReadOnly<{|
+  static SelectableBackgroundBorderless: (rippleRadius?: ?number) => $ReadOnly<{
     attribute: 'selectableItemBackgroundBorderless',
     type: 'ThemeAttrAndroid',
     rippleRadius: ?number,
-  |}> = (rippleRadius: ?number) => ({
+  }> = (rippleRadius?: ?number) => ({
     type: 'ThemeAttrAndroid',
     attribute: 'selectableItemBackgroundBorderless',
     rippleRadius,
   });
 
   /**
-   * Creates a value for the `background` prop that uses the Android ripple with
-   * the supplied color. If `borderless` is true, the ripple will render outside
-   * of the view bounds. Requires API 21+.
+   * Creates an object that represents ripple drawable with specified color (as a
+   * string). If property `borderless` evaluates to true the ripple will
+   * render outside of the view bounds (see native actionbar buttons as an
+   * example of that behavior). This background type is available on Android
+   * API level 21+.
+   *
+   * @param color The ripple color
+   * @param borderless If the ripple can render outside it's bounds
+   * @param rippleRadius The radius of ripple effect
    */
   static Ripple: (
     color: string,
     borderless: boolean,
-    rippleRadius: ?number,
-  ) => $ReadOnly<{|
+    rippleRadius?: ?number,
+  ) => $ReadOnly<{
     borderless: boolean,
     color: ?number,
     rippleRadius: ?number,
     type: 'RippleAndroid',
-  |}> = (color: string, borderless: boolean, rippleRadius: ?number) => {
+  }> = (color: string, borderless: boolean, rippleRadius?: ?number) => {
     const processedColor = processColor(color);
     invariant(
       processedColor == null || typeof processedColor === 'number',
@@ -220,7 +265,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
     }
   }
 
-  _dispatchHotspotUpdate(event: PressEvent): void {
+  _dispatchHotspotUpdate(event: GestureResponderEvent): void {
     if (Platform.OS === 'android') {
       const {locationX, locationY} = event.nativeEvent;
       const hostComponentRef = findHostInstance_DEPRECATED(this);
@@ -336,7 +381,10 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
     );
   }
 
-  componentDidUpdate(prevProps: Props, prevState: State) {
+  componentDidUpdate(
+    prevProps: TouchableNativeFeedbackProps,
+    prevState: State,
+  ) {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
@@ -363,4 +411,4 @@ const getBackgroundProp =
 
 TouchableNativeFeedback.displayName = 'TouchableNativeFeedback';
 
-module.exports = TouchableNativeFeedback;
+export default TouchableNativeFeedback;