@react-native-oh/react-native-harmony 0.72.10

package/Libraries/Components/Button/Button.harmony.js

@@ -0,0 +1,451 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ * @generate-docs
+ */
+
+'use strict';
+
+import type {TextStyleProp, ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';
+import type {Button as ButtonType} from 'react-native/Libraries/Button/Button.flow';
+import type {
+  AccessibilityActionEvent,
+  AccessibilityActionInfo,
+  AccessibilityState,
+} from 'react-native/Libraries/Components/View/ViewAccessibility';
+
+import StyleSheet, {type ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import Text from 'react-native/Libraries/Text/Text';
+import Platform from '../../Utilities/Platform';
+import TouchableNativeFeedback from 'react-native/Libraries/Components/Touchable/TouchableNativeFeedback';
+import TouchableOpacity from 'react-native/Libraries/Components/Touchable/TouchableOpacity';
+import View from 'react-native/Libraries/Components/View/View';
+import invariant from 'invariant';
+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.
+   */
+  title: string,
+
+  /**
+    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
+   */
+  touchSoundDisabled?: ?boolean,
+
+  /**
+    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
+   */
+  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
+   */
+  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
+   */
+  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
+   */
+  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
+   */
+  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
+   */
+  nextFocusUp?: ?number,
+
+  /**
+    Text to display for blindness accessibility features.
+   */
+  accessibilityLabel?: ?string,
+  /**
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-label'?: ?string,
+  /**
+    If `true`, disable all interactions for this component.
+
+    @default false
+   */
+  disabled?: ?boolean,
+
+  /**
+    Used to locate this view in end-to-end tests.
+   */
+  testID?: ?string,
+
+  /**
+   * Accessibility props.
+   */
+  accessible?: ?boolean,
+  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+  onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
+  accessibilityState?: ?AccessibilityState,
+
+  /**
+   * alias for accessibilityState
+   *
+   * see https://reactnative.dev/docs/accessibility#accessibilitystate
+   */
+  'aria-busy'?: ?boolean,
+  'aria-checked'?: ?boolean | 'mixed',
+  'aria-disabled'?: ?boolean,
+  'aria-expanded'?: ?boolean,
+  'aria-selected'?: ?boolean,
+
+  /**
+   * [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services.
+   */
+  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
+  accessibilityHint?: ?string,
+  accessibilityLanguage?: ?Stringish,
+|}>;
+
+/**
+  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-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});
+      }
+    }
+
+    let _accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      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);
+    }
+
+    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>
+        </View>
+      </Touchable>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  button: Platform.select({
+    ios: {},
+    android: {
+      elevation: 4,
+      // Material design blue from https://material.google.com/style/color.html#color-color-palette
+      backgroundColor: '#2196F3',
+      borderRadius: 2,
+    },
+    // RNOH:patch -add harmony default button style
+    harmony: {
+        backgroundColor: '#317aff',
+        borderRadius: 8
+    }
+  }),
+  text: {
+    textAlign: 'center',
+    margin: 8,
+    ...Platform.select({
+      ios: {
+        // iOS blue from https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/
+        color: '#007AFF',
+        fontSize: 18,
+      },
+      android: {
+        color: 'white',
+        fontWeight: '500',
+      },
+      // RNOH: patch - add harmony default button text style
+      harmony: {
+        color: '#FFFFFF',
+        fontSize: 16
+      }
+    }),
+  },
+  buttonDisabled: Platform.select({
+    ios: {},
+    android: {
+      elevation: 0,
+      backgroundColor: '#dfdfdf',
+    },
+    // RNOH: patch - add harmony default button disabled style
+    harmony: {
+        opacity: 0.4
+    }
+  }),
+  textDisabled: Platform.select({
+    ios: {
+      color: '#cdcdcd',
+    },
+    android: {
+      color: '#a1a1a1',
+    },
+    // RNOH: patch - add harmony default button disabled text style
+    harmony: {}
+  }),
+});
+
+module.exports = (Button: ButtonType);

package/Libraries/Components/RefreshControl/RefreshControl.harmony.js

@@ -0,0 +1,208 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+const OS = "ios"; // RNOH: patch - replaced occurrences Platform.OS with OS
+
+//RNOH: patch - fix imports
+import type { ColorValue } from "react-native/Libraries/StyleSheet/StyleSheet";
+import type { ViewProps } from "react-native/Libraries/Components/View/ViewPropTypes";
+
+import AndroidSwipeRefreshLayoutNativeComponent, {
+  Commands as AndroidSwipeRefreshLayoutCommands,
+} from "react-native/Libraries/Components/RefreshControl/AndroidSwipeRefreshLayoutNativeComponent";
+import PullToRefreshViewNativeComponent, {
+  Commands as PullToRefreshCommands,
+} from "react-native/Libraries/Components/RefreshControl/PullToRefreshViewNativeComponent";
+
+const Platform = require("../../Utilities/Platform");
+const React = require("react");
+
+type IOSProps = $ReadOnly<{|
+  /**
+   * The color of the refresh indicator.
+   */
+  tintColor?: ?ColorValue,
+  /**
+   * Title color.
+   */
+  titleColor?: ?ColorValue,
+  /**
+   * The title displayed under the refresh indicator.
+   */
+  title?: ?string,
+|}>;
+
+type AndroidProps = $ReadOnly<{|
+  /**
+   * Whether the pull to refresh functionality is enabled.
+   */
+  enabled?: ?boolean,
+  /**
+   * The colors (at least one) that will be used to draw the refresh indicator.
+   */
+  colors?: ?$ReadOnlyArray<ColorValue>,
+  /**
+   * The background color of the refresh indicator.
+   */
+  progressBackgroundColor?: ?ColorValue,
+  /**
+   * Size of the refresh indicator.
+   */
+  size?: ?("default" | "large"),
+|}>;
+
+export type RefreshControlProps = $ReadOnly<{|
+  ...ViewProps,
+  ...IOSProps,
+  ...AndroidProps,
+
+  /**
+   * Called when the view starts refreshing.
+   */
+  onRefresh?: ?() => void | Promise<void>,
+
+  /**
+   * Whether the view should be indicating an active refresh.
+   */
+  refreshing: boolean,
+
+  /**
+   * Progress view top offset
+   */
+  progressViewOffset?: ?number,
+|}>;
+
+/**
+ * This component is used inside a ScrollView or ListView to add pull to refresh
+ * functionality. When the ScrollView is at `scrollY: 0`, swiping down
+ * triggers an `onRefresh` event.
+ *
+ * ### Usage example
+ *
+ * ``` js
+ * class RefreshableList extends Component {
+ *   constructor(props) {
+ *     super(props);
+ *     this.state = {
+ *       refreshing: false,
+ *     };
+ *   }
+ *
+ *   _onRefresh() {
+ *     this.setState({refreshing: true});
+ *     fetchData().then(() => {
+ *       this.setState({refreshing: false});
+ *     });
+ *   }
+ *
+ *   render() {
+ *     return (
+ *       <ListView
+ *         refreshControl={
+ *           <RefreshControl
+ *             refreshing={this.state.refreshing}
+ *             onRefresh={this._onRefresh.bind(this)}
+ *           />
+ *         }
+ *         ...
+ *       >
+ *       ...
+ *       </ListView>
+ *     );
+ *   }
+ *   ...
+ * }
+ * ```
+ *
+ * __Note:__ `refreshing` is a controlled prop, this is why it needs to be set to true
+ * in the `onRefresh` function otherwise the refresh indicator will stop immediately.
+ */
+class RefreshControl extends React.Component<RefreshControlProps> {
+  _nativeRef: ?React.ElementRef<
+    | typeof PullToRefreshViewNativeComponent
+    | typeof AndroidSwipeRefreshLayoutNativeComponent
+  >;
+  _lastNativeRefreshing = false;
+
+  componentDidMount() {
+    this._lastNativeRefreshing = this.props.refreshing;
+  }
+
+  componentDidUpdate(prevProps: RefreshControlProps) {
+    // RefreshControl is a controlled component so if the native refreshing
+    // value doesn't match the current js refreshing prop update it to
+    // the js value.
+    if (this.props.refreshing !== prevProps.refreshing) {
+      this._lastNativeRefreshing = this.props.refreshing;
+    } else if (
+      this.props.refreshing !== this._lastNativeRefreshing &&
+      this._nativeRef
+    ) {
+      // RNOH: patch - replaced occurrences Platform.OS with OS
+      if (OS === "android") {
+        AndroidSwipeRefreshLayoutCommands.setNativeRefreshing(
+          this._nativeRef,
+          this.props.refreshing
+        );
+      } else {
+        PullToRefreshCommands.setNativeRefreshing(
+          this._nativeRef,
+          this.props.refreshing
+        );
+      }
+      this._lastNativeRefreshing = this.props.refreshing;
+    }
+  }
+
+  render(): React.Node {
+    // RNOH: patch - replaced occurrences Platform.OS with OS
+    if (OS === "ios") {
+      const { enabled, colors, progressBackgroundColor, size, ...props } =
+        this.props;
+      return (
+        <PullToRefreshViewNativeComponent
+          {...props}
+          ref={this._setNativeRef}
+          onRefresh={this._onRefresh}
+        />
+      );
+    } else {
+      const { tintColor, titleColor, title, ...props } = this.props;
+      return (
+        <AndroidSwipeRefreshLayoutNativeComponent
+          {...props}
+          ref={this._setNativeRef}
+          onRefresh={this._onRefresh}
+        />
+      );
+    }
+  }
+
+  _onRefresh = () => {
+    this._lastNativeRefreshing = true;
+
+    // $FlowFixMe[unused-promise]
+    this.props.onRefresh && this.props.onRefresh();
+
+    // The native component will start refreshing so force an update to
+    // make sure it stays in sync with the js component.
+    this.forceUpdate();
+  };
+
+  _setNativeRef = (
+    ref: ?React.ElementRef<
+      | typeof PullToRefreshViewNativeComponent
+      | typeof AndroidSwipeRefreshLayoutNativeComponent
+    >
+  ) => {
+    this._nativeRef = ref;
+  };
+}
+module.exports = RefreshControl;