@react-native-oh/react-native-harmony 0.61.16

package/Libraries/Components/PickerIOS/PickerIOS.tsx

@@ -0,0 +1,175 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * This is a controlled component version of RNCPickerHarmony
+ * @format
+ */
+/**
+ * NOTICE: This file is copied from @react-native-oh-tpl/picker and adapted.
+ *
+ * PickerIOS was initially part of the RN hence such copyright header is used.
+ * This component was later extracted and moved to a separate library.
+ * The copyright header above is also used in the react-native-community version, but the community version is converted to TypeScript.
+ * @react-native-oh-tpl/picker is based on from react-native-community and slightly adapted for OHOS.
+ */
+
+"use strict";
+
+import * as React from "react";
+import type {
+  ColorValue,
+  NativeSyntheticEvent,
+  TextStyle,
+  ViewProps,
+} from "react-native";
+import { processColor, StyleSheet, View } from "react-native";
+import PickerIOSNativeComponent, {
+  NativePickerItem,
+} from "../../../src/private/specs/components/PickerIOSNativeComponent";
+
+type PickerHarmonyChangeEvent = NativeSyntheticEvent<{
+  newValue: number | string;
+  newIndex: number;
+}>;
+
+type Label = string | number;
+
+interface Props extends ViewProps {
+  children: React.ReactNode;
+  itemStyle?: TextStyle;
+  numberOfLines?: number;
+  onChange?: (event: PickerHarmonyChangeEvent) => void;
+  onValueChange?: (itemValue: string | number, itemIndex: number) => void;
+  selectedValue?: number | string;
+  selectionColor?: string;
+  themeVariant?: string;
+}
+
+type ItemProps = Readonly<{
+  label?: Label;
+  value?: number | string;
+  color?: ColorValue;
+  testID?: string;
+}>;
+
+type CallbackRef<T> = (value: T) => void;
+type ObjectRef<T> = { current: T };
+type Ref<T> = CallbackRef<T> | ObjectRef<T>;
+
+/**
+ * Constructs a new ref that forwards new values to each of the given refs. The
+ * given refs will always be invoked in the order that they are supplied.
+ *
+ * WARNING: A known problem of merging refs using this approach is that if any
+ * of the given refs change, the returned callback ref will also be changed. If
+ * the returned callback ref is supplied as a `ref` to a React element, this may
+ * lead to problems with the given refs being invoked more times than desired.
+ */
+function useMergeRefs<T>(...refs: Array<Ref<T> | null>): CallbackRef<T> {
+  return React.useCallback((current: T) => {
+    for (const ref of refs) {
+      if (ref == null) continue;
+      if (typeof ref === "function") {
+        ref(current);
+      } else if (typeof (ref as any) === "object") {
+        (ref as any).current = current;
+      }
+    }
+  }, refs as any);
+}
+
+const PickerHarmonyItem: React.FC<ItemProps> = (_props: ItemProps) => null;
+
+const PickerHarmonyWithForwardedRef = React.forwardRef<
+  React.ElementRef<typeof PickerIOSNativeComponent>,
+  Props
+>(function PickerHarmony(props, forwardedRef): React.ReactElement {
+  const {
+    children,
+    selectedValue,
+    selectionColor,
+    themeVariant,
+    testID,
+    itemStyle,
+    numberOfLines,
+    onChange,
+    onValueChange,
+    style,
+  } = props;
+  const nativePickerRef =
+    React.useRef<React.ElementRef<typeof PickerIOSNativeComponent>>(null);
+
+  const ref = useMergeRefs(nativePickerRef, forwardedRef);
+
+  const items = React.useMemo((): NativePickerItem[] => {
+    return React.Children.toArray(children).map((child: any) => ({
+      value: String(child.props.value),
+      label: String(child.props.label),
+      textColor: child.props.color,
+      testID: child.props.testID,
+    }));
+  }, [children]);
+
+  const selectedIndex = React.useMemo((): number => {
+    if (selectedValue === undefined) {
+      return 0;
+    } else {
+      return (
+        items.findIndex((item) => item.value === String(selectedValue)) ?? 0
+      );
+    }
+  }, [items, selectedValue]);
+
+  let parsedNumberOfLines = Math.round(numberOfLines ?? 1);
+  if (parsedNumberOfLines < 1) {
+    parsedNumberOfLines = 1;
+  }
+
+  const _onChange = React.useCallback(
+    (event: PickerHarmonyChangeEvent) => {
+      onChange?.(event);
+      onValueChange?.(event.nativeEvent.newValue, event.nativeEvent.newIndex);
+    },
+    [onChange, onValueChange]
+  );
+
+  return (
+    <View style={style}>
+      <PickerIOSNativeComponent
+        ref={ref}
+        themeVariant={themeVariant}
+        testID={testID}
+        color={processColor(itemStyle?.color) ?? undefined}
+        textAlign={itemStyle?.textAlign}
+        fontSize={itemStyle?.fontSize}
+        fontWeight={itemStyle?.fontWeight as string}
+        fontStyle={itemStyle?.fontStyle}
+        fontFamily={itemStyle?.fontFamily}
+        style={[styles.pickerHarmony, itemStyle]}
+        items={items}
+        onChange={_onChange}
+        numberOfLines={parsedNumberOfLines}
+        selectedIndex={selectedIndex}
+        selectionColor={
+          processColor(selectionColor ?? itemStyle?.color) ?? undefined
+        }
+      />
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  pickerHarmony: {
+    // The picker will conform to whatever width is given, but we do
+    // have to set the component's height explicitly on the
+    // surrounding view to ensure it gets rendered.
+    height: 216,
+  },
+});
+
+(PickerHarmonyWithForwardedRef as any).Item = PickerHarmonyItem;
+
+export default PickerHarmonyWithForwardedRef;

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.tsx

@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/**
+ * NOTICE: This file is copied from @react-native-oh-tpl/progress-bar-android and adapted.
+ *
+ * ProgressBarAndroid was initially part of the RN hence such copyright header is used.
+ * This component was later extracted and moved to a separate library.
+ * The copyright header above is also used in the react-native-community version, but the community version is converted to TypeScript.
+ * @react-native-oh-tpl/progress-bar-android is based on from react-native-community and slightly adapted for OHOS.
+ */
+
+import React from "react";
+import { ColorValue, StyleSheet, processColor } from "react-native";
+
+import type { ViewProps } from "react-native/Libraries/Components/View/ViewPropTypes";
+import RNProgressWheelNativeComponent from "../../../src/private/specs/components/ProgressWheelNativeComponent";
+import RNProgressBarNativeComponent from "../../../src/private/specs/components/ProgressBarNativeComponent";
+
+// #region types
+/**
+ * Style of the ProgressBar and whether it shows indeterminate progress (e.g. spinner).
+ *
+ * `indeterminate` can only be false if `styleAttr` is Horizontal, and requires a
+ * `progress` value.
+ */
+type AnimatingStyle =
+  | {
+      styleAttr: "Horizontal";
+      indeterminate: false;
+      progress: number;
+    }
+  | {
+      styleAttr:
+        | "Horizontal"
+        | "Normal"
+        | "Small"
+        | "Large"
+        | "Inverse"
+        | "SmallInverse"
+        | "LargeInverse";
+      // [RNOH] changed from RN declaration to include undefined,
+      // since .defaultProps used to inject the default was deprecated.
+      indeterminate?: true;
+    };
+
+export type ProgressBarAndroidProps = Readonly<
+  ViewProps &
+    AnimatingStyle & {
+      /**
+       * Whether to show the ProgressBar (true, the default) or hide it (false).
+       */
+      animating?: boolean;
+      /**
+       * Color of the progress bar.
+       */
+      color?: ColorValue;
+      /**
+       * Used to locate this view in end-to-end tests.
+       */
+      testID?: string;
+    }
+>;
+// #endregion
+
+const styleAttrToHeight = (styleAttr: AnimatingStyle["styleAttr"]) => {
+  const attrHeight = {
+    Horizontal: 16,
+    Small: 16,
+    SmallInverse: 16,
+    Normal: 48,
+    Inverse: 48,
+    Large: 76,
+    LargeInverse: 76,
+  };
+  return attrHeight[styleAttr] ?? 16;
+};
+
+/**
+  * React component that wraps the Android-only `ProgressBar`. This component is
+  * used to indicate that the app is loading or there is activity in the app.
+  *
+  * Example:
+  *
+  * ```
+  * render: function() {
+  *   var progressBar =
+  *     <View style={styles.container}>
+  *       <ProgressBar styleAttr="Inverse" />
+  *     </View>;
+
+  *   return (
+  *     <MyLoadingComponent
+  *       componentView={componentView}
+  *       loadingView={progressBar}
+  *       style={styles.loadingComponent}
+  *     />
+  *   );
+  * },
+  * ```
+  */
+const ProgressBarAndroid = React.forwardRef(
+  (props: ProgressBarAndroidProps, forwardedRef) => {
+    // set default values
+    const {
+      color = "#008577",
+      style,
+      styleAttr = "Normal",
+      animating = true,
+      testID
+    } = props;
+
+    const styleSheet = StyleSheet.create({
+      progress: {
+        height: styleAttrToHeight(styleAttr),
+        width: "100%",
+        display: animating ? undefined : "none",
+      },
+    });
+
+    const processedColor = processColor(color);
+    const commonProps = {
+      // typechecking complains about `null` type missing from native component's color type spec without this check
+      color: processedColor ?? undefined,
+      style: [styleSheet.progress, style],
+    };
+
+    if (styleAttr == "Horizontal") {
+      return (
+        <RNProgressBarNativeComponent
+          testID={testID}
+          progress={props.indeterminate === false ? props.progress : undefined}
+          indeterminate={props.indeterminate}
+          {...commonProps}
+          ref={forwardedRef as any}
+        ></RNProgressBarNativeComponent>
+      );
+    }
+
+    return (
+      <RNProgressWheelNativeComponent
+        testID={testID}
+        {...commonProps}
+        ref={forwardedRef as any}
+      />
+    );
+  }
+);
+
+ProgressBarAndroid.displayName = "ProgressBarAndroid";
+
+export default ProgressBarAndroid;

package/Libraries/Components/ProgressViewIOS/ProgressViewIOS.tsx

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2025 Huawei Technologies Co., Ltd.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useEffect } from "react";
+import {
+  StyleSheet,
+  processColor,
+} from "@react-native-oh/react-native-harmony";
+import type { ViewProps, ColorValue, ProcessedColorValue } from "react-native";
+import ProgressViewNativeComponent from "../../../src/private/specs/components/ProgressViewNativeComponent";
+
+// iOS ProgressViewIOS default colors (now as strings)
+const DEFAULT_PROGRESS_TINT = "#0066CC";
+const DEFAULT_TRACK_TINT = "#F5F5F7";
+
+type Props = Readonly<
+  ViewProps & {
+    progressViewStyle?: "default" | "bar";
+    progress?: number;
+    progressTintColor?: ColorValue;
+    trackTintColor?: ColorValue;
+    isIndeterminate?: boolean;
+  }
+>;
+
+export default function ProgressViewIOS(props: Props) {
+  const {
+    progress,
+    progressTintColor,
+    trackTintColor,
+    isIndeterminate,
+    style,
+    ...rest
+  } = props;
+
+  const ref =
+    React.useRef<React.ElementRef<typeof ProgressViewNativeComponent>>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const processedProps: Record<string, ProcessedColorValue> = {
+      progressTintColor: processColor(
+        progressTintColor ?? DEFAULT_PROGRESS_TINT
+      )!,
+      trackTintColor: processColor(trackTintColor ?? DEFAULT_TRACK_TINT)!,
+    };
+
+    ref.current.setNativeProps?.(processedProps);
+  }, [progressTintColor, trackTintColor]);
+
+  return (
+    <ProgressViewNativeComponent
+      {...rest}
+      ref={ref}
+      progress={progress}
+      isIndeterminate={isIndeterminate}
+      style={StyleSheet.compose({ height: 20 }, style)}
+    />
+  );
+}