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

package/Libraries/Components/DatePickerIOS/DatePickerIOS.tsx

@@ -0,0 +1,285 @@
+/**
+ * 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.
+ */
+
+/**
+ * Implements the DatePickerIOS component which is removed from newer RN releases.
+ * Main functionality is delegated to native components:
+ *  - [TimePicker](https://developer.huawei.com/consumer/en/doc/harmonyos-references/ts-basic-components-timepicker)
+ *  - [DatePicker](https://developer.huawei.com/consumer/en/doc/harmonyos-references/ts-basic-components-datepicker)
+ *
+ * There is no direct equivalent for mode='datetime', so we construct one by rendering the DatePicker and TimePicker side-by-side.
+ * A few properties are not supported due to the above native components' limitations, and overall platform limitations.
+ *
+ * These include:
+ *
+ *  - [minuteInterval](https://reactnative-archive-august-2023.netlify.app/docs/0.61/datepickerios#minuteinterval)
+ *    TimePicker provides no direct way to set the minute interval. A hand-rolled component can support this easily,
+ *    but it would take too much effort to have it provide all the other functionalities already present in TimePicker, like localization.
+ *
+ *  - [locale](https://reactnative-archive-august-2023.netlify.app/docs/0.61/datepickerios#locale)
+ *    Expanding on the previous point, TimePicker uses the system locale and does not allow overriding it.
+ *    Supporting multiple locales reliably for any component takes considerable effort, and requires active maintenance.
+ *    Creating a custom TimePicker with this in mind does not seem worthwile.
+ *
+ *  - [timeZoneOffsetInMinutes](https://reactnative-archive-august-2023.netlify.app/docs/0.61/datepickerios#timezoneoffsetinminutes)
+ *    This ties into mentioned localization issues. Standard JS Date APIs do not provide any direct timezone support,
+ *    and the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)
+ *    for HarmonyOS are not stable yet (see e.g. Date..toLocaleDateString() returning 'dateFormat not implemented'. This is squarely outside the scope of implementing DatePickerIOS).
+ *    Any naive implementation of timezone offsets like adding/subtracting minutes is too brittle to be considered.
+ */
+
+import RNDatePickerNative from '../../../src/private/specs/components/DatePickerNativeComponent';
+import RNTimePickerNative from '../../../src/private/specs/components/TimePickerNativeComponent';
+import type {NativeProps as NativePickerProps} from '../../../src/private/specs/components/DatePickerNativeComponent';
+import {forwardRef, useState} from 'react';
+import {ViewProps, NativeMethods, View} from 'react-native';
+import nullthrows from 'nullthrows';
+import {NativeSyntheticEvent} from '@react-native-oh/react-native-harmony';
+
+// #region types
+// For developer convenience
+
+// NOTE[RNOH]: Removed SyntheticEvent wrapper
+type Event = Readonly<{
+  timestamp: number;
+}>;
+
+type DateTimePickerEvent = NativeSyntheticEvent<
+  Readonly<{
+    timestamp: number;
+  }>
+>;
+
+type Props = Readonly<
+  ViewProps & {
+    /**
+     * The currently selected date.
+     */
+    date?: Date;
+
+    /**
+     * Provides an initial value that will change when the user starts selecting
+     * a date. It is useful for simple use-cases where you do not want to deal
+     * with listening to events and updating the date prop to keep the
+     * controlled state in sync. The controlled state has known bugs which
+     * causes it to go out of sync with native. The initialDate prop is intended
+     * to allow you to have native be source of truth.
+     */
+    initialDate?: Date;
+
+    /**
+     * The date picker locale.
+     */
+    locale?: string;
+
+    /**
+     * Maximum date.
+     *
+     * Restricts the range of possible date/time values.
+     */
+    maximumDate?: Date;
+
+    /**
+     * Minimum date.
+     *
+     * Restricts the range of possible date/time values.
+     */
+    minimumDate?: Date;
+
+    /**
+     * The interval at which minutes can be selected.
+     */
+    minuteInterval?: 1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30;
+
+    /**
+     * The date picker mode.
+     */
+    mode?: 'date' | 'time' | 'datetime';
+
+    /**
+     * Date change handler.
+     *
+     * This is called when the user changes the date or time in the UI.
+     * The first and only argument is an Event. For getting the date the picker
+     * was changed to, use onDateChange instead.
+     */
+    onChange?: (event: Event) => void;
+
+    /**
+     * Date change handler.
+     *
+     * This is called when the user changes the date or time in the UI.
+     * The first and only argument is a Date object representing the new
+     * date and time.
+     */
+    onDateChange: (date: Date) => void;
+
+    /**
+     * Timezone offset in minutes.
+     *
+     * By default, the date picker will use the device's timezone. With this
+     * parameter, it is possible to force a certain timezone offset. For
+     * instance, to show times in Pacific Standard Time, pass -7 * 60.
+     */
+    timeZoneOffsetInMinutes?: number;
+  }
+>;
+
+// #endregion
+
+function dateToMilliseconds(date?: Date): number | undefined {
+  return date?.getTime();
+}
+
+const DateTimePickerIOS = forwardRef(function DateTimePickerIOS(
+  props: NativePickerProps,
+  ref: React.Ref<NativeMethods>,
+) {
+  const {onChange, date, style, ...nativeProps} = props;
+  const [selectedDate, setSelectedDate] = useState(date);
+
+  // The two pickers are very likely to go out of sync,
+  // so when gluing them together we have to make
+  // sure the signaled date is synced manually
+  const onDateChange = (event: DateTimePickerEvent) => {
+    const timestamp = event.nativeEvent.timestamp;
+    const pickerDate = new Date(timestamp);
+
+    const oldDate = new Date(selectedDate);
+    const newDate = new Date(
+      pickerDate.getFullYear(),
+      pickerDate.getMonth(),
+      pickerDate.getDay(),
+      oldDate.getHours(),
+      oldDate.getMinutes(),
+    );
+
+    const correctedTimestampEvent: DateTimePickerEvent = {
+      nativeEvent: {
+        timestamp: newDate.getTime(),
+        ...event.nativeEvent,
+      },
+      ...event,
+    };
+
+    setSelectedDate(newDate.getTime());
+    onChange && onChange(correctedTimestampEvent);
+  };
+
+  const onTimeChange = (event: DateTimePickerEvent) => {
+    const timestamp = event.nativeEvent.timestamp;
+    const pickerDate = new Date(timestamp);
+
+    const oldDate = new Date(selectedDate);
+    const newDate = new Date(
+      oldDate.getFullYear(),
+      oldDate.getMonth(),
+      oldDate.getDay(),
+      pickerDate.getHours(),
+      pickerDate.getMinutes(),
+    );
+
+    const correctedTimestampEvent: DateTimePickerEvent = {
+      nativeEvent: {
+        timestamp: newDate.getTime(),
+        ...event.nativeEvent,
+      },
+      ...event,
+    };
+
+    setSelectedDate(newDate.getTime());
+    onChange && onChange(correctedTimestampEvent);
+  };
+
+  return (
+    <View style={{flexDirection: 'row', ...(style as object)}}>
+      <RNDatePickerNative
+        date={selectedDate}
+        ref={ref as any}
+        style={{flex: 1}}
+        onChange={onDateChange}
+        {...nativeProps}
+      />
+      <RNTimePickerNative
+        date={selectedDate}
+        ref={ref as any}
+        style={{flex: 1}}
+        onChange={onTimeChange}
+        {...nativeProps}
+      />
+    </View>
+  );
+});
+DateTimePickerIOS.displayName = 'DateTimePickerIOS';
+
+const DatePickerIOS = forwardRef(
+  (props: Props, ref: React.Ref<NativeMethods>) => {
+    const {
+      date,
+      initialDate,
+      onChange,
+      onDateChange,
+      minimumDate,
+      maximumDate,
+      locale,
+      mode,
+      style,
+      ...other
+    } = props;
+
+    const _date: Date = nullthrows(
+      date || initialDate,
+      'A selected date or initial date should be specified.',
+    );
+
+    const _onChange = (event: DateTimePickerEvent) => {
+      const timestamp = event.nativeEvent.timestamp;
+      const pickerDate = new Date(timestamp);
+
+      onDateChange && onDateChange(pickerDate);
+      onChange &&
+        onChange({
+          timestamp: timestamp,
+        });
+    };
+
+    const nativeProps = {
+      date: dateToMilliseconds(_date),
+      maximumDate: dateToMilliseconds(maximumDate),
+      minimumDate: dateToMilliseconds(minimumDate),
+      locale: locale !== null && locale !== '' ? locale : undefined,
+      onChange: _onChange,
+      style: {width: '100%', height: '100%'} as object,
+      ref: ref as any,
+      ...other,
+    };
+
+    const picker = (() => {
+      switch (mode) {
+        case 'time':
+          return <RNTimePickerNative {...nativeProps} />;
+        case 'datetime':
+          return <DateTimePickerIOS {...nativeProps} />;
+        case 'date':
+        default:
+          return <RNDatePickerNative {...nativeProps} />;
+      }
+    })();
+
+    // We use the outer wrapping view for general view props and the inner one
+    // to enforce a default height for the date picker, same as the RN implementation:
+    // https://github.com/facebook/react-native/blob/v0.61.5/Libraries/Components/DatePicker/DatePickerIOS.ios.js#L187
+    return (
+      <View style={style}>
+        <View style={{height: 216, width: '100%'}}>{picker}</View>
+      </View>
+    );
+  },
+);
+DatePickerIOS.displayName = 'DatePickerIOS';
+
+export default DatePickerIOS;

package/Libraries/Components/MaskedView/MaskedView.tsx

@@ -0,0 +1,32 @@
+import React, { useRef } from "react";
+import { View, StyleSheet } from "react-native";
+import RNMaskedView from "../../../src/private/specs/components/MaskedViewNativeComponent";
+
+export type MaskedViewProps = Partial<import("react-native").ViewProps> & {
+  children?: React.ReactNode;
+  maskElement: React.ReactNode;
+};
+
+export default function MaskedView(props: MaskedViewProps) {
+  const { maskElement, children, ...otherViewProps } = props;
+  const hasWarnedInvalidRenderMaskRef = useRef(false);
+
+  if (!React.isValidElement(maskElement)) {
+    if (!hasWarnedInvalidRenderMaskRef.current) {
+      console.warn(
+        "MaskedView: Invalid `maskElement` prop was passed to MaskedView. Expected a React Element. No mask will render."
+      );
+      hasWarnedInvalidRenderMaskRef.current = true;
+    }
+    return <View {...otherViewProps}>{children}</View>;
+  }
+
+  return (
+    <RNMaskedView {...otherViewProps}>
+      <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+        {maskElement}
+      </View>
+      {children}
+    </RNMaskedView>
+  );
+}

package/Libraries/Components/Picker/Picker.tsx

@@ -0,0 +1,303 @@
+/**
+ * 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.
+ *
+ */
+
+import React from 'react';
+import {
+  ColorValue,
+  StyleProp,
+  TextStyle,
+  StyleSheet,
+  processColor,
+} from '@react-native-oh/react-native-harmony';
+
+import PickerNativeComponent, {
+  NativePickerItem,
+} from '../../../src/private/specs/components/PickerNativeComponent';
+
+/**
+ * Default height:
+ * - OHOS: 40
+ * - Android: 50
+ *
+ * Android's default height is used on OHOS to avoid layout inconsistencies between platforms.
+ * However, on OHOS 40 looks better because rounding creates half of a circle. To eliminate this
+ * problem, the default background color was set to transparent,
+ * which is the default color also used on Android.
+ *
+ */
+const DEFAULT_HEIGHT = 50;
+/**
+ * Default radius:
+ * - OHOS: 20
+ * - Android: 0
+ *
+ * OHOS uses rounding for Buttons and Picker Items.
+ */
+const DEFAULT_RADIUS = 20;
+const OHOS_NATIVE_BUTTON_COLOR = 'rgb(10,85,236)';
+const RNOH_BUTTON_COLOR_WITH_OPACITY_25 = 'rgba(49,122,255,0.25)';
+
+const MODE_DIALOG = 'dialog' as const;
+const MODE_DROPDOWN = 'dropdown' as const;
+
+type PickerItemProps = Readonly<{
+  /**
+   * Text to display for this item.
+   */
+  label: string;
+
+  /**
+   * The value to be passed to picker's `onValueChange` callback when
+   * this item is selected. Can be a string or an integer.
+   */
+  value?: number | string;
+
+  /**
+   * Color of this item's text.
+   */
+  color?: ColorValue;
+
+  /**
+   * Used to locate the item in end-to-end tests.
+   */
+  testID?: string;
+}>;
+
+/**
+ * Individual selectable item in a Picker.
+ */
+class PickerItem extends React.Component<PickerItemProps> {
+  render() {
+    // The items are not rendered directly
+    throw null;
+    return null;
+  }
+}
+
+type PickerProps = Readonly<{
+  children?: React.ReactNode | React.ReactNode[];
+  style?: StyleProp<TextStyle>;
+
+  /**
+   * Value matching value of one of the items. Can be a string or an integer.
+   */
+  selectedValue?: number | string;
+
+  /**
+   * Callback for when an item is selected. This is called with the following parameters:
+   *   - `itemValue`: the `value` prop of the item that was selected
+   *   - `itemIndex`: the index of the selected item in this picker
+   */
+  onValueChange?: (itemValue: string | number, itemIndex: number) => void;
+
+  /**
+   * If set to false, the picker will be disabled, i.e. the user will not be able to make a
+   * selection.
+   */
+  enabled?: boolean;
+
+  /**
+   * On Android, specifies how to display the selection items when the user taps on the picker:
+   *
+   *   - 'dialog': Show a modal dialog. This is the default.
+   *   - 'dropdown': Shows a dropdown anchored to the picker view
+   */
+  mode?: 'dialog' | 'dropdown';
+
+  /**
+   * Style to apply to each of the item labels.
+   */
+  itemStyle?: StyleProp<TextStyle>;
+
+  /**
+   * Style to apply to each of the item labels. (OHOS only)
+   */
+  selectedItemStyle?: StyleProp<TextStyle>;
+
+  /**
+   * Prompt string for this picker, used on Android in dialog mode as the title of the dialog.
+   */
+  prompt?: string;
+
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  testID?: string;
+}>;
+
+/**
+ * Renders the native picker component on iOS and Android. Example:
+ *
+ *     <Picker
+ *       selectedValue={this.state.language}
+ *       onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
+ *       <Picker.Item label="Java" value="java" />
+ *       <Picker.Item label="JavaScript" value="js" />
+ *     </Picker>
+ */
+export default class Picker extends React.Component<PickerProps> {
+  /**
+   * On Android, display the options in a dialog.
+   */
+  static MODE_DIALOG = MODE_DIALOG;
+
+  /**
+   * On Android, display the options in a dropdown (this is the default).
+   */
+  static MODE_DROPDOWN = MODE_DROPDOWN;
+
+  static Item: typeof PickerItem = PickerItem;
+
+  static defaultProps = {
+    mode: MODE_DIALOG,
+  };
+
+  private getPickerItemsAsProp(): NativePickerItem[] {
+    return React.Children.toArray(this.props.children).flatMap((child) => {
+      if (
+        React.isValidElement(child) &&
+        typeof child.type === 'function' &&
+        child.type.name === PickerItem.name
+      ) {
+        const p = child.props as PickerItemProps;
+        return [{ label: p.label, value: p.value } satisfies NativePickerItem];
+      }
+      return [];
+    });
+  }
+
+  override render() {
+    const {
+      selectedValue,
+      enabled,
+      mode,
+      prompt,
+      onValueChange,
+      style,
+      itemStyle,
+      selectedItemStyle,
+      testID
+    } = this.props;
+
+    const flatStyle = StyleSheet.flatten(style) ?? {};
+    const {
+      borderWidth,
+      borderBottomWidth,
+      borderTopWidth,
+      borderRightWidth,
+      borderLeftWidth,
+      borderStartWidth,
+      borderEndWidth,
+      borderColor,
+      borderRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomStartRadius,
+      borderBottomEndRadius,
+      borderTopEndRadius,
+      borderTopStartRadius,
+      borderStyle,
+      borderBottomColor,
+      borderTopColor,
+      borderRightColor,
+      borderLeftColor,
+      borderStartColor,
+      borderEndColor,
+      ...restStyle
+    } = flatStyle;
+    const pickerBorderWidth = typeof borderWidth === 'number' ? borderWidth : undefined;
+    const pickerBorderTopWidth = typeof borderTopWidth === 'number' ? borderTopWidth : undefined;
+    const pickerBorderBottomWidth = typeof borderBottomWidth === 'number' ? borderBottomWidth : undefined;
+    const pickerBorderLeftWidth = typeof borderLeftWidth === 'number' ? borderLeftWidth : undefined;
+    const pickerBorderRightWidth = typeof borderRightWidth === 'number' ? borderRightWidth : undefined;
+    const pickerBorderRadius = typeof borderRadius === 'number' ? borderRadius : DEFAULT_RADIUS;
+    const pickerBorderBottomLeftRadius = typeof borderBottomLeftRadius === 'number' ? borderBottomLeftRadius : (typeof borderBottomStartRadius === 'number' ? borderBottomStartRadius : 0);
+    const pickerBorderBottomRightRadius = typeof borderBottomRightRadius === 'number' ? borderBottomRightRadius : (typeof borderBottomEndRadius === 'number' ? borderBottomEndRadius : 0);
+    const pickerBorderTopLeftRadius = typeof borderTopLeftRadius === 'number' ? borderTopLeftRadius : (typeof borderTopStartRadius === 'number' ? borderTopStartRadius : 0);
+    const pickerBorderTopRightRadius = typeof borderTopRightRadius === 'number' ? borderTopRightRadius : (typeof borderTopEndRadius === 'number' ? borderTopEndRadius : 0);
+    const pickerBorderColor = processColor(borderColor === undefined ? "white" : borderColor);
+    const pickerBorderBottomColor = processColor(borderBottomColor);
+    const pickerBorderTopColor = processColor(borderTopColor);
+    const pickerBorderRightColor = processColor(borderRightColor);
+    const pickerBorderLeftColor = processColor(borderLeftColor);
+    const pickerBorderStartColor = processColor(borderStartColor);
+    const pickerBorderEndColor = processColor(borderEndColor);
+    
+    const containerStyle = StyleSheet.compose(
+      { height: DEFAULT_HEIGHT, borderRadius: DEFAULT_RADIUS },
+      restStyle
+    );
+    const flatItemStyle = StyleSheet.flatten(itemStyle);
+    const flatSelectedItemStyle = StyleSheet.flatten(selectedItemStyle);
+
+    return (
+      <PickerNativeComponent
+        testID={testID}
+        style={containerStyle}
+        selectedValue={selectedValue}
+        enabled={enabled}
+        mode={mode}
+        prompt={prompt}
+        items={this.getPickerItemsAsProp()}
+        onValueChange={(e) => {
+          onValueChange?.(
+            e.nativeEvent.itemValue as string | number,
+            e.nativeEvent.itemIndex
+          );
+        }}
+        fontColor={processColor(flatStyle?.color ?? 'black') ?? undefined}
+        itemFontColor={
+          processColor(flatItemStyle?.color ?? 'black') ?? undefined
+        }
+        itemBackgroundColor={
+          processColor(
+            flatItemStyle?.backgroundColor ?? 'rgba(255,255,255,0)'
+          ) ?? undefined
+        }
+        selectedItemFontColor={
+          processColor(
+            /**
+             * The Native Button Color provides a better contrast than RNOH_BUTTON_COLOR, because it's slightly darker.
+             * The color inconsistency between RNOH_BUTTON_COLOR and Native Button Color isn't noticeable in this scenario.
+             */
+            flatSelectedItemStyle?.color ?? OHOS_NATIVE_BUTTON_COLOR
+          ) ?? undefined
+        }
+        selectedItemBackgroundColor={
+          processColor(
+            flatSelectedItemStyle?.backgroundColor ??
+              /**
+               * Reusing RNOH Button color here for consistency between default colors used by RNOH components.
+               */
+              RNOH_BUTTON_COLOR_WITH_OPACITY_25
+          ) ?? undefined
+        }
+        pickerBorderWidth={pickerBorderWidth}
+        pickerBorderTopWidth={pickerBorderTopWidth}
+        pickerBorderBottomWidth={pickerBorderBottomWidth}
+        pickerBorderLeftWidth={pickerBorderLeftWidth}
+        pickerBorderRightWidth={pickerBorderRightWidth}
+        pickerBorderColor={pickerBorderColor}
+        pickerBorderBottomColor={pickerBorderBottomColor}
+        pickerBorderTopColor={pickerBorderTopColor}
+        pickerBorderRightColor={pickerBorderRightColor}
+        pickerBorderLeftColor={pickerBorderLeftColor}
+        pickerBorderStartColor={pickerBorderStartColor}
+        pickerBorderEndColor={pickerBorderEndColor}
+        pickerBorderRadius={pickerBorderRadius}
+        pickerBorderBottomLeftRadius={pickerBorderBottomLeftRadius}
+        pickerBorderBottomRightRadius={pickerBorderBottomRightRadius}
+        pickerBorderTopLeftRadius={pickerBorderTopLeftRadius}
+        pickerBorderTopRightRadius={pickerBorderTopRightRadius}
+        pickerBorderStyle={borderStyle}
+      />
+    );
+  }
+}