react-native-platform-components 0.5.4 → 0.6.0

package/src/ContextMenu.tsx

@@ -0,0 +1,209 @@
+// ContextMenu.tsx
+import React, { useCallback, useMemo } from 'react';
+import { type ViewProps } from 'react-native';
+
+import NativeContextMenu, {
+  type ContextMenuAction as NativeAction,
+  type ContextMenuSubaction as NativeSubaction,
+  type ContextMenuPressActionEvent,
+} from './ContextMenuNativeComponent';
+
+/**
+ * Attributes for a context menu action.
+ */
+export interface ContextMenuActionAttributes {
+  /** Whether the action is destructive (red styling) */
+  destructive?: boolean;
+  /** Whether the action is disabled (grayed out) */
+  disabled?: boolean;
+  /** Whether the action is hidden */
+  hidden?: boolean;
+}
+
+/**
+ * A single action in the context menu.
+ */
+export interface ContextMenuAction {
+  /** Unique identifier returned in callbacks */
+  id: string;
+  /** Display title */
+  title: string;
+  /** Secondary text (iOS only) */
+  subtitle?: string;
+  /** Icon name (SF Symbol on iOS, drawable resource on Android) */
+  image?: string;
+  /** Tint color for the icon (hex string or named color) */
+  imageColor?: string;
+  /** Action attributes */
+  attributes?: ContextMenuActionAttributes;
+  /** Checkmark state */
+  state?: 'off' | 'on' | 'mixed';
+  /** Nested actions for submenu */
+  subactions?: readonly ContextMenuAction[];
+}
+
+export interface ContextMenuProps extends ViewProps {
+  /** Menu title (shown as header on iOS) */
+  title?: string;
+
+  /** Menu actions */
+  actions: readonly ContextMenuAction[];
+
+  /** Disabled state */
+  disabled?: boolean;
+
+  /**
+   * How the menu is triggered:
+   * - 'longPress' (default): Long-press opens the menu
+   * - 'tap': Single tap opens the menu
+   */
+  trigger?: 'longPress' | 'tap';
+
+  /**
+   * Called when the user presses an action.
+   * Receives the action's id and title.
+   */
+  onPressAction?: (actionId: string, actionTitle: string) => void;
+
+  /** Called when the menu opens */
+  onMenuOpen?: () => void;
+
+  /** Called when the menu closes */
+  onMenuClose?: () => void;
+
+  /** The content to wrap */
+  children: React.ReactNode;
+
+  /** iOS-specific props */
+  ios?: {
+    /** Enable preview when long-pressing */
+    enablePreview?: boolean;
+  };
+
+  /** Android-specific props */
+  android?: {
+    /** Anchor position for the popup menu */
+    anchorPosition?: 'left' | 'right';
+    /**
+     * Programmatic visibility control (Android only).
+     * Set to true to open the menu, false to close it.
+     * Note: iOS does not support programmatic menu opening.
+     */
+    visible?: boolean;
+  };
+
+  /** Test identifier */
+  testID?: string;
+}
+
+/**
+ * Convert user-friendly subaction to native format (no further nesting).
+ */
+function normalizeSubaction(action: ContextMenuAction): NativeSubaction {
+  return {
+    id: action.id,
+    title: action.title,
+    subtitle: action.subtitle,
+    image: action.image,
+    imageColor: action.imageColor,
+    attributes: action.attributes
+      ? {
+          destructive: action.attributes.destructive ? 'true' : 'false',
+          disabled: action.attributes.disabled ? 'true' : 'false',
+          hidden: action.attributes.hidden ? 'true' : 'false',
+        }
+      : undefined,
+    state: action.state,
+  };
+}
+
+/**
+ * Convert user-friendly action to native format.
+ * Note: Only one level of nesting is supported by the native component.
+ */
+function normalizeAction(action: ContextMenuAction): NativeAction {
+  return {
+    id: action.id,
+    title: action.title,
+    subtitle: action.subtitle,
+    image: action.image,
+    imageColor: action.imageColor,
+    attributes: action.attributes
+      ? {
+          destructive: action.attributes.destructive ? 'true' : 'false',
+          disabled: action.attributes.disabled ? 'true' : 'false',
+          hidden: action.attributes.hidden ? 'true' : 'false',
+        }
+      : undefined,
+    state: action.state,
+    subactions: action.subactions?.map(normalizeSubaction),
+  };
+}
+
+export function ContextMenu(props: ContextMenuProps): React.ReactElement {
+  const {
+    style,
+    title,
+    actions,
+    disabled,
+    trigger = 'longPress',
+    onPressAction,
+    onMenuOpen,
+    onMenuClose,
+    children,
+    ios,
+    android,
+    ...viewProps
+  } = props;
+
+  const nativeActions = useMemo(() => actions.map(normalizeAction), [actions]);
+
+  const handlePressAction = useCallback(
+    (e: { nativeEvent: ContextMenuPressActionEvent }) => {
+      const { actionId, actionTitle } = e.nativeEvent;
+      onPressAction?.(actionId, actionTitle);
+    },
+    [onPressAction]
+  );
+
+  const handleMenuOpen = useCallback(() => {
+    onMenuOpen?.();
+  }, [onMenuOpen]);
+
+  const handleMenuClose = useCallback(() => {
+    onMenuClose?.();
+  }, [onMenuClose]);
+
+  const nativeIOS = useMemo(() => {
+    if (!ios) return undefined;
+    return {
+      enablePreview: ios.enablePreview ? 'true' : 'false',
+    };
+  }, [ios]);
+
+  const nativeAndroid = useMemo(() => {
+    if (!android) return undefined;
+    return {
+      anchorPosition: android.anchorPosition,
+      visible: android.visible ? 'open' : 'closed',
+    };
+  }, [android]);
+
+  return (
+    <NativeContextMenu
+      style={style}
+      title={title}
+      actions={nativeActions}
+      interactivity={disabled ? 'disabled' : 'enabled'}
+      trigger={trigger}
+      onPressAction={onPressAction ? handlePressAction : undefined}
+      onMenuOpen={onMenuOpen ? handleMenuOpen : undefined}
+      onMenuClose={onMenuClose ? handleMenuClose : undefined}
+      ios={nativeIOS}
+      android={nativeAndroid}
+      {...viewProps}
+    >
+      {children}
+    </NativeContextMenu>
+  );
+}

package/src/ContextMenuNativeComponent.ts

@@ -0,0 +1,141 @@
+// ContextMenuNativeComponent.ts
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+/**
+ * Attributes for a context menu action.
+ */
+export type ContextMenuActionAttributes = Readonly<{
+  /** Whether the action is destructive (red styling) */
+  destructive?: string; // 'true' | 'false'
+  /** Whether the action is disabled (grayed out) */
+  disabled?: string; // 'true' | 'false'
+  /** Whether the action is hidden */
+  hidden?: string; // 'true' | 'false'
+}>;
+
+/**
+ * A leaf subaction (no further nesting to avoid codegen recursion issues).
+ */
+export type ContextMenuSubaction = Readonly<{
+  /** Unique identifier returned in callbacks */
+  id: string;
+  /** Display title */
+  title: string;
+  /** Secondary text (iOS only) */
+  subtitle?: string;
+  /** Icon name (SF Symbol on iOS, drawable resource on Android) */
+  image?: string;
+  /** Tint color for the icon (hex string, e.g., "#FF0000") */
+  imageColor?: string;
+  /** Action attributes */
+  attributes?: ContextMenuActionAttributes;
+  /** Checkmark state: 'off' | 'on' | 'mixed' */
+  state?: string;
+}>;
+
+/**
+ * A single action in the context menu.
+ * Actions can be nested one level via `subactions` for submenus.
+ */
+export type ContextMenuAction = Readonly<{
+  /** Unique identifier returned in callbacks */
+  id: string;
+  /** Display title */
+  title: string;
+  /** Secondary text (iOS only) */
+  subtitle?: string;
+  /** Icon name (SF Symbol on iOS, drawable resource on Android) */
+  image?: string;
+  /** Tint color for the icon (hex string, e.g., "#FF0000") */
+  imageColor?: string;
+  /** Action attributes */
+  attributes?: ContextMenuActionAttributes;
+  /** Checkmark state: 'off' | 'on' | 'mixed' */
+  state?: string;
+  /** Nested actions for submenu (one level deep) */
+  subactions?: ReadonlyArray<ContextMenuSubaction>;
+}>;
+
+/**
+ * Event emitted when an action is pressed.
+ */
+export type ContextMenuPressActionEvent = Readonly<{
+  /** The action's unique identifier */
+  actionId: string;
+  /** The action's title */
+  actionTitle: string;
+}>;
+
+/** Interactivity state (no booleans for codegen). */
+export type ContextMenuInteractivity = 'enabled' | 'disabled';
+
+/** Trigger mode for opening the menu. */
+export type ContextMenuTrigger = 'longPress' | 'tap';
+
+/**
+ * iOS-specific configuration.
+ */
+export type IOSProps = Readonly<{
+  /** Enable preview when long-pressing */
+  enablePreview?: string; // 'true' | 'false'
+}>;
+
+/**
+ * Android-specific configuration.
+ */
+export type AndroidProps = Readonly<{
+  /** Anchor position for the popup menu */
+  anchorPosition?: string; // 'left' | 'right'
+  /**
+   * Programmatic visibility control (Android only).
+   * 'open' to show the menu, 'closed' to hide it.
+   */
+  visible?: string; // 'open' | 'closed'
+}>;
+
+export interface ContextMenuProps extends ViewProps {
+  /**
+   * Menu title (shown as header on iOS).
+   */
+  title?: string;
+
+  /**
+   * Menu actions.
+   */
+  actions: ReadonlyArray<ContextMenuAction>;
+
+  /**
+   * Enabled / disabled state.
+   */
+  interactivity?: string; // ContextMenuInteractivity
+
+  /**
+   * How the menu is triggered:
+   * - 'longPress' (default): Long-press opens the menu
+   * - 'tap': Single tap opens the menu
+   */
+  trigger?: string; // ContextMenuTrigger
+
+  /**
+   * Fired when user presses an action.
+   */
+  onPressAction?: CodegenTypes.BubblingEventHandler<ContextMenuPressActionEvent>;
+
+  /**
+   * Fired when menu opens.
+   */
+  onMenuOpen?: CodegenTypes.BubblingEventHandler<Readonly<{}>>;
+
+  /**
+   * Fired when menu closes.
+   */
+  onMenuClose?: CodegenTypes.BubblingEventHandler<Readonly<{}>>;
+
+  ios?: IOSProps;
+  android?: AndroidProps;
+}
+
+export default codegenNativeComponent<ContextMenuProps>(
+  'PCContextMenu'
+) as HostComponent<ContextMenuProps>;

package/src/SelectionMenu.tsx

@@ -7,7 +7,7 @@ import NativeSelectionMenu, {
   type SelectionMenuSelectEvent,
 } from './SelectionMenuNativeComponent';
 
-import type { AndroidMaterialMode } from './sharedTypes';
+import type { AndroidMaterialMode, Presentation } from './sharedTypes';
 
 export interface SelectionMenuProps extends ViewProps {
   /** Options are label + data (payload) */
@@ -23,13 +23,14 @@ export interface SelectionMenuProps extends ViewProps {
   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`.
+   * Presentation mode:
+   * - 'modal' (default): Headless mode, controlled by `visible` prop.
+   * - 'embedded': Native renders its own inline anchor and manages open/close internally.
    */
-  inlineMode?: boolean;
+  presentation?: Presentation;
 
   /**
-   * Headless mode only (inlineMode === false):
+   * Modal mode only (presentation === 'modal'):
    * controls whether the native menu UI is presented.
    */
   visible?: boolean;
@@ -64,11 +65,11 @@ function normalizeSelectedData(selected: string | null): string {
 }
 
 function normalizeNativeVisible(
-  inlineMode: boolean | undefined,
+  presentation: Presentation | undefined,
   visible: boolean | undefined
 ): 'open' | 'closed' | undefined {
-  // Inline mode ignores visible; keep it undefined so native isn't spammed.
-  if (inlineMode) return undefined;
+  // Embedded mode ignores visible; keep it undefined so native isn't spammed.
+  if (presentation === 'embedded') return undefined;
   return visible ? 'open' : 'closed';
 }
 
@@ -79,7 +80,7 @@ export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
     selected,
     disabled,
     placeholder,
-    inlineMode,
+    presentation = 'modal',
     visible,
     onSelect,
     onRequestClose,
@@ -94,8 +95,8 @@ export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
   );
 
   const nativeVisible = useMemo(
-    () => normalizeNativeVisible(inlineMode, visible),
-    [inlineMode, visible]
+    () => normalizeNativeVisible(presentation, visible),
+    [presentation, visible]
   );
 
   const handleSelect = useCallback(
@@ -123,7 +124,7 @@ export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
       selectedData={selectedData}
       interactivity={disabled ? 'disabled' : 'enabled'}
       placeholder={placeholder}
-      anchorMode={inlineMode ? 'inline' : 'headless'}
+      anchorMode={presentation === 'embedded' ? 'inline' : 'headless'}
       visible={nativeVisible}
       onSelect={onSelect ? handleSelect : undefined}
       onRequestClose={onRequestClose ? handleRequestClose : undefined}

package/src/index.tsx

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

package/src/sharedTypes.ts

@@ -1,9 +1,12 @@
 // SharedTypes.ts
 import type { CodegenTypes } from 'react-native';
 
-/** Shared “open/closed” control state. */
+/** Shared "open/closed" control state. */
 export type Visible = 'open' | 'closed';
 
+/** Shared presentation mode for pickers/menus. */
+export type Presentation = 'modal' | 'embedded';
+
 /** Shared Material preference (Android). */
 export type AndroidMaterialMode = 'system' | 'm3';