react-native-platform-components 0.0.2

package/src/SelectionMenu.tsx

@@ -0,0 +1,170 @@
+// SelectionMenu.tsx
+import React, { useCallback, useMemo } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import NativeSelectionMenu, {
+  type SelectionMenuOption,
+  type SelectionMenuSelectEvent,
+  type SelectionMenuPresentation,
+} from './SelectionMenuNativeComponent';
+
+import type { AndroidMaterialMode } from './sharedTypes';
+
+export type SelectionMenuProps = {
+  style?: StyleProp<ViewStyle>;
+
+  /** Options are label + data (payload) */
+  options: readonly SelectionMenuOption[];
+
+  /**
+   * Controlled selection by the option's `data`.
+   * Use `null` for "no selection".
+   */
+  selected: string | null;
+
+  disabled?: boolean;
+  placeholder?: string;
+
+  /**
+   * If true, native renders its own inline anchor and manages open/close internally.
+   * If false (default), component is headless and controlled by `visible`.
+   */
+  inlineMode?: boolean;
+
+  /**
+   * Headless mode only (inlineMode === false):
+   * controls whether the native menu UI is presented.
+   */
+  visible?: boolean;
+
+  /**
+   * Headless mode only (inlineMode === false):
+   * presentation hint ("auto" | "popover" | "sheet").
+   */
+  presentation?: SelectionMenuPresentation;
+
+  /**
+   * Called when the user selects an option.
+   * Receives the selected `data` payload, plus label/index for convenience.
+   */
+  onSelect?: (data: string, label: string, index: number) => void;
+
+  /**
+   * Called when the user dismisses without selecting.
+   */
+  onRequestClose?: () => void;
+
+  /**
+   * Pass-through platform props.
+   */
+  ios?: {};
+
+  android?: {
+    /** Material preference ("auto" | "m2" | "m3"). */
+    material?: AndroidMaterialMode;
+  };
+};
+
+function normalizeSelectedData(selected: string | null): string {
+  return selected ?? '';
+}
+
+function normalizeNativeVisible(
+  inlineMode: boolean | undefined,
+  visible: boolean | undefined
+): 'open' | 'closed' | undefined {
+  // Inline mode ignores visible; keep it undefined so native isn't spammed.
+  if (inlineMode) return undefined;
+  return visible ? 'open' : 'closed';
+}
+
+function normalizeNativePresentation(
+  inlineMode: boolean | undefined,
+  presentation: SelectionMenuPresentation | undefined
+): SelectionMenuPresentation | undefined {
+  // Inline mode ignores presentation.
+  if (inlineMode) return undefined;
+  return presentation ?? 'auto';
+}
+
+export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
+  const {
+    style,
+    options,
+    selected,
+    disabled,
+    placeholder,
+    inlineMode,
+    visible,
+    presentation,
+    onSelect,
+    onRequestClose,
+    ios,
+    android,
+  } = props;
+
+  const selectedData = useMemo(
+    () => normalizeSelectedData(selected),
+    [selected]
+  );
+
+  const nativeVisible = useMemo(
+    () => normalizeNativeVisible(inlineMode, visible),
+    [inlineMode, visible]
+  );
+
+  const nativePresentation = useMemo(
+    () => normalizeNativePresentation(inlineMode, presentation),
+    [inlineMode, presentation]
+  );
+
+  const handleSelect = useCallback(
+    (e: { nativeEvent: SelectionMenuSelectEvent }) => {
+      const { index, label, data } = e.nativeEvent;
+      onSelect?.(data, label, index);
+    },
+    [onSelect]
+  );
+
+  const handleRequestClose = useCallback(() => {
+    onRequestClose?.();
+  }, [onRequestClose]);
+
+  // Keep android prop stable and codegen-friendly (string unions live in native spec).
+  const nativeAndroid = useMemo(() => {
+    if (!android) return undefined;
+    return { material: android.material };
+  }, [android]);
+
+  const isAndroidM3Inline =
+    android?.material &&
+    inlineMode &&
+    android.material === 'm3' &&
+    Platform.OS === 'android';
+
+  return (
+    <NativeSelectionMenu
+      style={[style, isAndroidM3Inline && styles.androidInline]}
+      options={options}
+      selectedData={selectedData}
+      interactivity={disabled ? 'disabled' : 'enabled'}
+      placeholder={placeholder}
+      anchorMode={inlineMode ? 'inline' : 'headless'}
+      visible={nativeVisible}
+      presentation={nativePresentation}
+      onSelect={onSelect ? handleSelect : undefined}
+      onRequestClose={onRequestClose ? handleRequestClose : undefined}
+      ios={ios}
+      android={nativeAndroid}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  androidInline: { minHeight: 60 },
+});

package/src/SelectionMenu.web.tsx

@@ -0,0 +1,93 @@
+// SelectionMenu.web.tsx
+import React, { useMemo } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type {
+  SelectionMenuOption,
+  SelectionMenuPresentation,
+} from './SelectionMenuNativeComponent';
+
+export type SelectionMenuProps = {
+  style?: StyleProp<ViewStyle>;
+
+  options: readonly SelectionMenuOption[];
+  selected: string | null;
+
+  disabled?: boolean;
+  placeholder?: string;
+
+  // kept for parity; ignored by <select>
+  inlineMode?: boolean;
+  visible?: boolean;
+  presentation?: SelectionMenuPresentation;
+
+  onSelect?: (data: string, label: string, index: number) => void;
+  onRequestClose?: () => void;
+
+  ios?: {};
+  android?: {};
+};
+
+function toCssStyle(
+  style: StyleProp<ViewStyle>
+): React.CSSProperties | undefined {
+  if (!style) return undefined;
+  if (Array.isArray(style)) {
+    const merged: any = {};
+    for (const s of style) {
+      if (s && typeof s === 'object') Object.assign(merged, s as any);
+    }
+    return merged as React.CSSProperties;
+  }
+  if (typeof style === 'object') return style as any;
+  return undefined;
+}
+
+export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
+  const {
+    style,
+    options,
+    selected,
+    disabled,
+    placeholder,
+    onSelect,
+    onRequestClose,
+  } = props;
+
+  const cssStyle = useMemo(() => toCssStyle(style), [style]);
+  const value = selected ?? '';
+
+  return (
+    <select
+      style={cssStyle}
+      value={value}
+      disabled={!!disabled}
+      onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+        const data = (e.currentTarget as any).value as string;
+
+        // placeholder chosen (or no selection)
+        if (data === '') return;
+
+        const index = options.findIndex((o) => o.data === data);
+        const opt = index >= 0 ? options[index] : undefined;
+
+        onSelect?.(data, opt?.label ?? '', index);
+      }}
+      onBlur={() => {
+        onRequestClose?.();
+      }}
+    >
+      {placeholder ? (
+        <option value="" disabled hidden>
+          {placeholder}
+        </option>
+      ) : null}
+
+      {options.map((opt, idx) => (
+        <option key={`${opt.data}-${idx}`} value={opt.data}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  );
+}

package/src/SelectionMenuNativeComponent.ts

@@ -0,0 +1,106 @@
+// SelectionMenuNativeComponent.ts
+import type { CodegenTypes, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+/**
+ * A single option in the menu.
+ */
+export type SelectionMenuOption = Readonly<{
+  label: string;
+  data: string;
+}>;
+
+/**
+ * Event emitted when the user selects an option.
+ */
+export type SelectionMenuSelectEvent = Readonly<{
+  /** Selected option index (implementation detail; stable for this render) */
+  index: CodegenTypes.Int32;
+
+  /** Selected option label */
+  label: string;
+
+  /** Selected option data payload (source of truth) */
+  data: string;
+}>;
+
+/** Visibility state (headless mode only). */
+export type SelectionMenuVisible = 'open' | 'closed';
+
+/** Presentation hint (headless mode only). */
+export type SelectionMenuPresentation = 'auto' | 'popover' | 'sheet';
+
+/** Interactivity state (no booleans). */
+export type SelectionMenuInteractivity = 'enabled' | 'disabled';
+
+/** Anchor behavior (no booleans). */
+export type SelectionMenuAnchorMode = 'inline' | 'headless';
+
+/**
+ * iOS-specific configuration (reserved).
+ */
+export type IOSProps = Readonly<{}>;
+
+/**
+ * Android-specific configuration.
+ */
+export type AndroidProps = Readonly<{
+  material?: string; // AndroidMaterialMode
+}>;
+
+export interface SelectionMenuProps extends ViewProps {
+  /**
+   * Menu options.
+   */
+  options: ReadonlyArray<SelectionMenuOption>;
+
+  /**
+   * Controlled selection by `data`.
+   *
+   * - Empty string means "no selection".
+   * - Native should treat this as the single source of truth.
+   */
+  selectedData?: CodegenTypes.WithDefault<string, ''>;
+
+  /**
+   * Enabled / disabled state.
+   */
+  interactivity?: string; // SelectionMenuInteractivity
+
+  /**
+   * Placeholder text shown when selectedData === "".
+   */
+  placeholder?: string;
+
+  /**
+   * Inline vs headless behavior.
+   */
+  anchorMode?: string; // SelectionMenuAnchorMode
+
+  /**
+   * Headless mode only:
+   * controls visibility.
+   */
+  visible?: string; // SelectionMenuVisible
+
+  /**
+   * Headless mode only:
+   * presentation hint.
+   */
+  presentation?: string; // SelectionMenuPresentation
+
+  /**
+   * Fired when the user selects an option.
+   */
+  onSelect?: CodegenTypes.BubblingEventHandler<SelectionMenuSelectEvent>;
+
+  /**
+   * Fired when dismissed without selection.
+   */
+  onRequestClose?: CodegenTypes.BubblingEventHandler<Readonly<{}>>;
+
+  ios?: IOSProps;
+  android?: AndroidProps;
+}
+
+export default codegenNativeComponent<SelectionMenuProps>('PCSelectionMenu');

package/src/index.tsx

@@ -0,0 +1,3 @@
+export * from './DatePicker';
+export * from './SelectionMenu';
+export * from './sharedTypes';

package/src/sharedTypes.ts

@@ -0,0 +1,14 @@
+// SharedTypes.ts
+import type { CodegenTypes } from 'react-native';
+
+/** Shared “open/closed” control state. */
+export type Visible = 'open' | 'closed';
+
+/** Shared Material preference (Android). */
+export type AndroidMaterialMode = 'system' | 'm3';
+
+/** Common event empty payload type. */
+export type EmptyEvent = Readonly<{}>;
+
+/** Convenience alias (optional). */
+export type Bubbling<T> = CodegenTypes.BubblingEventHandler<T>;