@office-iss/react-native-win32 0.73.2 → 0.74.0-preview.1

package/Libraries/Components/Button.win32.js

@@ -6,14 +6,12 @@
  *
  * @format
  * @flow
- * @generate-docs
  */
 
 'use strict';
 
 import type {TextStyleProp, ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {PressEvent} from '../Types/CoreEventTypes';
-import type {Button as ButtonType} from './Button.flow';
 import type {
   AccessibilityActionEvent,
   AccessibilityActionInfo,
@@ -23,7 +21,7 @@ import type {
 import StyleSheet, {type ColorValue} from '../StyleSheet/StyleSheet';
 import Text from '../Text/Text';
 import Platform from '../Utilities/Platform';
-import {PlatformColor} from '../StyleSheet/PlatformColorValueTypes';
+import {PlatformColor} from '../StyleSheet/PlatformColorValueTypes'; // Win32
 import TouchableNativeFeedback from './Touchable/TouchableNativeFeedback';
 import TouchableOpacity from './Touchable/TouchableOpacity';
 import View from './View/View';
@@ -32,101 +30,101 @@ import * as React from 'react';
 
 type ButtonProps = $ReadOnly<{|
   /**
-     Text to display inside the button. On Android the given title will be
-     converted to the uppercased form.
-    */
+    Text to display inside the button. On Android the given title will be
+    converted to the uppercased form.
+   */
   title: string,
 
   /**
-     Handler to be called when the user taps the button. The first function
-     argument is an event in form of [PressEvent](pressevent).
-    */
+    Handler to be called when the user taps the button. The first function
+    argument is an event in form of [PressEvent](pressevent).
+   */
   onPress: (event?: PressEvent) => mixed,
 
   /**
-     If `true`, doesn't play system sound on touch.
- 
-     @platform android
- 
-     @default false
-    */
+    If `true`, doesn't play system sound on touch.
+
+    @platform android
+
+    @default false
+   */
   touchSoundDisabled?: ?boolean,
 
   /**
-     Color of the text (iOS), or background color of the button (Android).
- 
-     @default {@platform android} '#2196F3'
-     @default {@platform ios} '#007AFF'
-    */
+    Color of the text (iOS), or background color of the button (Android).
+
+    @default {@platform android} '#2196F3'
+    @default {@platform ios} '#007AFF'
+   */
   color?: ?ColorValue,
 
   /**
-     TV preferred focus.
- 
-     @platform tv
- 
-     @default false
-    */
+    TV preferred focus.
+
+    @platform tv
+
+    @default false
+   */
   hasTVPreferredFocus?: ?boolean,
 
   /**
-     Designates the next view to receive focus when the user navigates down. See
-     the [Android documentation][android:nextFocusDown].
- 
-     [android:nextFocusDown]:
-     https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown
- 
-     @platform android, tv
-    */
+    Designates the next view to receive focus when the user navigates down. See
+    the [Android documentation][android:nextFocusDown].
+
+    [android:nextFocusDown]:
+    https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown
+
+    @platform android, tv
+   */
   nextFocusDown?: ?number,
 
   /**
-     Designates the next view to receive focus when the user navigates forward.
-     See the [Android documentation][android:nextFocusForward].
- 
-     [android:nextFocusForward]:
-     https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward
- 
-     @platform android, tv
-    */
+    Designates the next view to receive focus when the user navigates forward.
+    See the [Android documentation][android:nextFocusForward].
+
+    [android:nextFocusForward]:
+    https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward
+
+    @platform android, tv
+   */
   nextFocusForward?: ?number,
 
   /**
-     Designates the next view to receive focus when the user navigates left. See
-     the [Android documentation][android:nextFocusLeft].
- 
-     [android:nextFocusLeft]:
-     https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft
- 
-     @platform android, tv
-    */
+    Designates the next view to receive focus when the user navigates left. See
+    the [Android documentation][android:nextFocusLeft].
+
+    [android:nextFocusLeft]:
+    https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft
+
+    @platform android, tv
+   */
   nextFocusLeft?: ?number,
 
   /**
-     Designates the next view to receive focus when the user navigates right. See
-     the [Android documentation][android:nextFocusRight].
- 
-     [android:nextFocusRight]:
-     https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight
- 
-     @platform android, tv
-    */
+    Designates the next view to receive focus when the user navigates right. See
+    the [Android documentation][android:nextFocusRight].
+
+    [android:nextFocusRight]:
+    https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight
+
+    @platform android, tv
+   */
   nextFocusRight?: ?number,
 
   /**
-     Designates the next view to receive focus when the user navigates up. See
-     the [Android documentation][android:nextFocusUp].
- 
-     [android:nextFocusUp]:
-     https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp
- 
-     @platform android, tv
-    */
+    Designates the next view to receive focus when the user navigates up. See
+    the [Android documentation][android:nextFocusUp].
+
+    [android:nextFocusUp]:
+    https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp
+
+    @platform android, tv
+   */
   nextFocusUp?: ?number,
 
   /**
-     Text to display for blindness accessibility features.
-    */
+    Text to display for blindness accessibility features.
+   */
   accessibilityLabel?: ?string,
   /**
    * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
@@ -134,15 +132,15 @@ type ButtonProps = $ReadOnly<{|
    */
   'aria-label'?: ?string,
   /**
-     If `true`, disable all interactions for this component.
- 
-     @default false
-    */
+    If `true`, disable all interactions for this component.
+
+    @default false
+   */
   disabled?: ?boolean,
 
   /**
-     Used to locate this view in end-to-end tests.
-    */
+    Used to locate this view in end-to-end tests.
+   */
   testID?: ?string,
 
   /**
@@ -175,231 +173,232 @@ type ButtonProps = $ReadOnly<{|
 |}>;
 
 /**
-   A basic button component that should render nicely on any platform. Supports a
-   minimal level of customization.
- 
-   If this button doesn't look right for your app, you can build your own button
-   using [TouchableOpacity](touchableopacity) or
-   [TouchableWithoutFeedback](touchablewithoutfeedback). For inspiration, look at
-   the [source code for this button component][button:source]. Or, take a look at
-   the [wide variety of button components built by the community]
-   [button:examples].
- 
-   [button:source]:
-   https://github.com/facebook/react-native/blob/HEAD/Libraries/Components/Button.js
- 
-   [button:examples]:
-   https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button
- 
-   ```jsx
-   <Button
-     onPress={onPressLearnMore}
-     title="Learn More"
-     color="#841584"
-     accessibilityLabel="Learn more about this purple button"
-   />
-   ```
- 
-   ```SnackPlayer name=Button%20Example
-   import React from 'react';
-   import { StyleSheet, Button, View, SafeAreaView, Text, Alert } from 'react-native';
- 
-   const Separator = () => (
-     <View style={styles.separator} />
-   );
- 
-   const App = () => (
-     <SafeAreaView style={styles.container}>
-       <View>
-         <Text style={styles.title}>
-           The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by everyone.
-         </Text>
-         <Button
-           title="Press me"
-           onPress={() => Alert.alert('Simple Button pressed')}
-         />
-       </View>
-       <Separator />
-       <View>
-         <Text style={styles.title}>
-           Adjust the color in a way that looks standard on each platform. On  iOS, the color prop controls the color of the text. On Android, the color adjusts the background color of the button.
-         </Text>
-         <Button
-           title="Press me"
-           color="#f194ff"
-           onPress={() => Alert.alert('Button with adjusted color pressed')}
-         />
-       </View>
-       <Separator />
-       <View>
-         <Text style={styles.title}>
-           All interaction for the component are disabled.
-         </Text>
-         <Button
-           title="Press me"
-           disabled
-           onPress={() => Alert.alert('Cannot press this one')}
-         />
-       </View>
-       <Separator />
-       <View>
-         <Text style={styles.title}>
-           This layout strategy lets the title define the width of the button.
-         </Text>
-         <View style={styles.fixToText}>
-           <Button
-             title="Left button"
-             onPress={() => Alert.alert('Left button pressed')}
-           />
-           <Button
-             title="Right button"
-             onPress={() => Alert.alert('Right button pressed')}
-           />
-         </View>
-       </View>
-     </SafeAreaView>
-   );
- 
-   const styles = StyleSheet.create({
-     container: {
-       flex: 1,
-       justifyContent: 'center',
-       marginHorizontal: 16,
-     },
-     title: {
-       textAlign: 'center',
-       marginVertical: 8,
-     },
-     fixToText: {
-       flexDirection: 'row',
-       justifyContent: 'space-between',
-     },
-     separator: {
-       marginVertical: 8,
-       borderBottomColor: '#737373',
-       borderBottomWidth: StyleSheet.hairlineWidth,
-     },
-   });
- 
-   export default App;
-   ```
-  */
-
-class Button extends React.Component<ButtonProps> {
-  render(): React.Node {
-    const {
-      accessibilityLabel,
-      accessibilityState,
-      'aria-busy': ariaBusy,
-      'aria-checked': ariaChecked,
-      'aria-disabled': ariaDisabled,
-      'aria-expanded': ariaExpanded,
-      'aria-label': ariaLabel,
-      'aria-multiselectable': ariaMultiselectable, // Win32
-      'aria-required': ariaRequired, // Win32
-      'aria-selected': ariaSelected,
-      importantForAccessibility,
-      color,
-      onPress,
-      touchSoundDisabled,
-      title,
-      hasTVPreferredFocus,
-      nextFocusDown,
-      nextFocusForward,
-      nextFocusLeft,
-      nextFocusRight,
-      nextFocusUp,
-      testID,
-      accessible,
-      accessibilityActions,
-      accessibilityHint,
-      accessibilityLanguage,
-      onAccessibilityAction,
-    } = this.props;
-    const buttonStyles: Array<ViewStyleProp> = [styles.button];
-    const textStyles: Array<TextStyleProp> = [styles.text];
-    if (color) {
-      if (Platform.OS === 'ios') {
-        textStyles.push({color: color});
-      } else {
-        buttonStyles.push({backgroundColor: color});
-      }
-    }
+  A basic button component that should render nicely on any platform. Supports a
+  minimal level of customization.
 
-    let _accessibilityState = {
-      busy: ariaBusy ?? accessibilityState?.busy,
-      checked: ariaChecked ?? accessibilityState?.checked,
-      disabled: ariaDisabled ?? accessibilityState?.disabled,
-      expanded: ariaExpanded ?? accessibilityState?.expanded,
-      multiselectable:
-        ariaMultiselectable ?? accessibilityState?.multiselectable, // Win32
-      required: ariaRequired ?? accessibilityState?.required, // Win32
-      selected: ariaSelected ?? accessibilityState?.selected,
-    };
-
-    const disabled =
-      this.props.disabled != null
-        ? this.props.disabled
-        : _accessibilityState?.disabled;
-
-    _accessibilityState =
-      disabled !== _accessibilityState?.disabled
-        ? {..._accessibilityState, disabled}
-        : _accessibilityState;
-
-    if (disabled) {
-      buttonStyles.push(styles.buttonDisabled);
-      textStyles.push(styles.textDisabled);
-    }
+  If this button doesn't look right for your app, you can build your own button
+  using [TouchableOpacity](touchableopacity) or
+  [TouchableWithoutFeedback](touchablewithoutfeedback). For inspiration, look at
+  the [source code for this button component][button:source]. Or, take a look at
+  the [wide variety of button components built by the community]
+  [button:examples].
+
+  [button:source]:
+  https://github.com/facebook/react-native/blob/HEAD/Libraries/Components/Button.js
+
+  [button:examples]:
+  https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button
+
+  ```jsx
+  <Button
+    onPress={onPressLearnMore}
+    title="Learn More"
+    color="#841584"
+    accessibilityLabel="Learn more about this purple button"
+  />
+  ```
+
+  ```SnackPlayer name=Button%20Example
+  import React from 'react';
+  import { StyleSheet, Button, View, SafeAreaView, Text, Alert } from 'react-native';
 
-    invariant(
-      typeof title === 'string',
-      'The title prop of a Button must be a string',
-    );
-    const formattedTitle =
-      Platform.OS === 'android' ? title.toUpperCase() : title;
-    const Touchable =
-      Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
-
-    // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused.
-    const _importantForAccessibility =
-      importantForAccessibility === 'no'
-        ? 'no-hide-descendants'
-        : importantForAccessibility;
-
-    return (
-      <Touchable
-        accessible={accessible}
-        accessibilityActions={accessibilityActions}
-        onAccessibilityAction={onAccessibilityAction}
-        accessibilityLabel={ariaLabel || accessibilityLabel}
-        accessibilityHint={accessibilityHint}
-        accessibilityLanguage={accessibilityLanguage}
-        accessibilityRole="button"
-        accessibilityState={_accessibilityState}
-        importantForAccessibility={_importantForAccessibility}
-        hasTVPreferredFocus={hasTVPreferredFocus}
-        nextFocusDown={nextFocusDown}
-        nextFocusForward={nextFocusForward}
-        nextFocusLeft={nextFocusLeft}
-        nextFocusRight={nextFocusRight}
-        nextFocusUp={nextFocusUp}
-        testID={testID}
-        disabled={disabled}
-        onPress={onPress}
-        touchSoundDisabled={touchSoundDisabled}>
-        <View style={buttonStyles}>
-          <Text style={textStyles} disabled={disabled}>
-            {formattedTitle}
-          </Text>
+  const Separator = () => (
+    <View style={styles.separator} />
+  );
+
+  const App = () => (
+    <SafeAreaView style={styles.container}>
+      <View>
+        <Text style={styles.title}>
+          The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by everyone.
+        </Text>
+        <Button
+          title="Press me"
+          onPress={() => Alert.alert('Simple Button pressed')}
+        />
+      </View>
+      <Separator />
+      <View>
+        <Text style={styles.title}>
+          Adjust the color in a way that looks standard on each platform. On  iOS, the color prop controls the color of the text. On Android, the color adjusts the background color of the button.
+        </Text>
+        <Button
+          title="Press me"
+          color="#f194ff"
+          onPress={() => Alert.alert('Button with adjusted color pressed')}
+        />
+      </View>
+      <Separator />
+      <View>
+        <Text style={styles.title}>
+          All interaction for the component are disabled.
+        </Text>
+        <Button
+          title="Press me"
+          disabled
+          onPress={() => Alert.alert('Cannot press this one')}
+        />
+      </View>
+      <Separator />
+      <View>
+        <Text style={styles.title}>
+          This layout strategy lets the title define the width of the button.
+        </Text>
+        <View style={styles.fixToText}>
+          <Button
+            title="Left button"
+            onPress={() => Alert.alert('Left button pressed')}
+          />
+          <Button
+            title="Right button"
+            onPress={() => Alert.alert('Right button pressed')}
+          />
         </View>
-      </Touchable>
-    );
+      </View>
+    </SafeAreaView>
+  );
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+      marginHorizontal: 16,
+    },
+    title: {
+      textAlign: 'center',
+      marginVertical: 8,
+    },
+    fixToText: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    separator: {
+      marginVertical: 8,
+      borderBottomColor: '#737373',
+      borderBottomWidth: StyleSheet.hairlineWidth,
+    },
+  });
+
+  export default App;
+  ```
+ */
+
+const Button: React.AbstractComponent<
+  ButtonProps,
+  React.ElementRef<typeof TouchableNativeFeedback | typeof TouchableOpacity>,
+> = React.forwardRef((props: ButtonProps, ref) => {
+  // Win32
+  const {
+    accessibilityLabel,
+    accessibilityState,
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-label': ariaLabel,
+    'aria-multiselectable': ariaMultiselectable, // Win32
+    'aria-required': ariaRequired, // Win32
+    'aria-selected': ariaSelected,
+    importantForAccessibility,
+    color,
+    onPress,
+    touchSoundDisabled,
+    title,
+    hasTVPreferredFocus,
+    nextFocusDown,
+    nextFocusForward,
+    nextFocusLeft,
+    nextFocusRight,
+    nextFocusUp,
+    testID,
+    accessible,
+    accessibilityActions,
+    accessibilityHint,
+    accessibilityLanguage,
+    onAccessibilityAction,
+  } = props;
+  const buttonStyles: Array<ViewStyleProp> = [styles.button];
+  const textStyles: Array<TextStyleProp> = [styles.text];
+  if (color) {
+    if (Platform.OS === 'ios') {
+      textStyles.push({color: color});
+    } else {
+      buttonStyles.push({backgroundColor: color});
+    }
   }
-}
+
+  let _accessibilityState = {
+    busy: ariaBusy ?? accessibilityState?.busy,
+    checked: ariaChecked ?? accessibilityState?.checked,
+    disabled: ariaDisabled ?? accessibilityState?.disabled,
+    expanded: ariaExpanded ?? accessibilityState?.expanded,
+    multiselectable: ariaMultiselectable ?? accessibilityState?.multiselectable, // Win32
+    required: ariaRequired ?? accessibilityState?.required, // Win32
+    selected: ariaSelected ?? accessibilityState?.selected,
+  };
+
+  const disabled =
+    props.disabled != null ? props.disabled : _accessibilityState?.disabled;
+
+  _accessibilityState =
+    disabled !== _accessibilityState?.disabled
+      ? {..._accessibilityState, disabled}
+      : _accessibilityState;
+
+  if (disabled) {
+    buttonStyles.push(styles.buttonDisabled);
+    textStyles.push(styles.textDisabled);
+  }
+
+  invariant(
+    typeof title === 'string',
+    'The title prop of a Button must be a string',
+  );
+  const formattedTitle =
+    Platform.OS === 'android' ? title.toUpperCase() : title;
+  const Touchable =
+    Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
+
+  // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused.
+  const _importantForAccessibility =
+    importantForAccessibility === 'no'
+      ? 'no-hide-descendants'
+      : importantForAccessibility;
+
+  return (
+    <Touchable
+      accessible={accessible}
+      accessibilityActions={accessibilityActions}
+      onAccessibilityAction={onAccessibilityAction}
+      accessibilityLabel={ariaLabel || accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityLanguage={accessibilityLanguage}
+      accessibilityRole="button"
+      accessibilityState={_accessibilityState}
+      importantForAccessibility={_importantForAccessibility}
+      hasTVPreferredFocus={hasTVPreferredFocus}
+      nextFocusDown={nextFocusDown}
+      nextFocusForward={nextFocusForward}
+      nextFocusLeft={nextFocusLeft}
+      nextFocusRight={nextFocusRight}
+      nextFocusUp={nextFocusUp}
+      testID={testID}
+      disabled={disabled}
+      onPress={onPress}
+      touchSoundDisabled={touchSoundDisabled}
+      ref={ref}>
+      <View style={buttonStyles}>
+        <Text style={textStyles} disabled={disabled}>
+          {formattedTitle}
+        </Text>
+      </View>
+    </Touchable>
+  );
+});
+
+Button.displayName = 'Button';
 
 const styles = StyleSheet.create({
-  // $FlowFixMe[underconstrained-implicit-instantiation]
   button: Platform.select({
     ios: {},
     android: {
@@ -412,7 +411,6 @@ const styles = StyleSheet.create({
   text: {
     textAlign: 'center',
     margin: 8,
-    // $FlowFixMe[underconstrained-implicit-instantiation]
     ...Platform.select({
       ios: {
         // iOS blue from https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/
@@ -425,21 +423,19 @@ const styles = StyleSheet.create({
       },
     }),
   },
-  // $FlowFixMe[underconstrained-implicit-instantiation]
   buttonDisabled: Platform.select({
     ios: {},
     android: {
       elevation: 0,
       backgroundColor: '#dfdfdf',
     },
-    // [Windows
+    // [Win32
     windows: {
       backgroundColor: PlatformColor('ButtonBackgroundDisabled'),
       borderColor: PlatformColor('ButtonBorderBrushDisabled'),
     },
-    // Windows]
+    // Win32]
   }),
-  // $FlowFixMe[underconstrained-implicit-instantiation]
   textDisabled: Platform.select({
     ios: {
       color: '#cdcdcd',
@@ -447,12 +443,12 @@ const styles = StyleSheet.create({
     android: {
       color: '#a1a1a1',
     },
-    // [Windows
+    // [Win32
     windows: {
       color: PlatformColor('ButtonForegroundDisabled'),
     },
-    // Windows]
+    // Win32]
   }),
 });
 
-module.exports = (Button: ButtonType);
+export default Button;