react-native-unified-action-sheet 0.1.1 → 0.3.0

package/src/common-options.interface.ts

@@ -0,0 +1,18 @@
+export interface BaseButtonInterface {
+  label: string;
+  style?: 'cancel' | 'destructive';
+  disabled?: boolean;
+}
+
+export interface BaseOptionsInterface {
+  title?: string;
+  message?: string;
+  tintColor?: string;
+  cancelButtonTintColor?: string;
+  destructiveColor?: string;
+  userInterfaceStyle?: 'light' | 'dark';
+}
+
+export interface BaseAndroidOptionsInterface {
+  buttonTextAlignment?: 'start' | 'center';
+}

package/src/index.tsx

@@ -3,6 +3,25 @@ import { Platform } from 'react-native';
 import type { Spec } from './NativeUnifiedActionSheet';
 import type { ActionSheetOptionsInterface } from './action-sheet-options.interface';
 
+export type {
+  BaseButtonInterface,
+  BaseOptionsInterface,
+  BaseAndroidOptionsInterface,
+} from './common-options.interface';
+
+export type {
+  PromptButtonInterface,
+  PromptCommonOptionsInterface,
+  PromptAndroidOptionsInterface,
+  PromptOptionsInterface,
+  PromptResultInterface,
+} from './prompt-options.interface';
+import type { BaseButtonInterface } from './common-options.interface';
+import type {
+  PromptOptionsInterface,
+  PromptResultInterface,
+} from './prompt-options.interface';
+
 export type {
   ActionSheetAnchorInterface,
   ActionSheetButtonInterface,
@@ -34,13 +53,27 @@ const toWireOptions = ({
   // crosses the bridge. Omit<> would not strip it at runtime.
   anchor: _anchor,
   ...rest
-}: ActionSheetOptionsInterface): WireOptions => {
+}: ActionSheetOptionsInterface): WireOptions => ({
+  ...rest,
+  ...toWireButtons(options),
+});
+
+type WirePromptOptions = Omit<PromptOptionsInterface, 'options'> & {
+  options: string[];
+  cancelButtonIndex?: number;
+  destructiveButtonIndices?: number[];
+  disabledButtonIndices?: number[];
+};
+
+/// Same flattening as the sheet: labels plus index sets. Kept generic over the
+/// button shape so the two APIs cannot disagree about what 'cancel' means.
+const toWireButtons = (buttons: ReadonlyArray<BaseButtonInterface>) => {
   const labels: string[] = [];
   const destructive: number[] = [];
   const disabled: number[] = [];
   let cancelButtonIndex: number | undefined;
 
-  options.forEach((button, index) => {
+  buttons.forEach((button, index) => {
     labels.push(button.label);
 
     if (button.style === 'destructive') destructive.push(index);
@@ -51,7 +84,6 @@ const toWireOptions = ({
   });
 
   return {
-    ...rest,
     options: labels,
     ...(cancelButtonIndex == null ? {} : { cancelButtonIndex }),
     ...(destructive.length === 0
@@ -72,6 +104,33 @@ const showWithNativeModule = (
     )
     .catch(() => options.cancelButtonIndex ?? -1);
 
+let warnedMaterialDisabled = false;
+
+/// 'bottom' needs Material on Android, which the app opts into at build time.
+/// Without it the sheet falls back to a centered dialog; say so once, in
+/// development, since the fallback alone looks like the option was ignored.
+const warnIfBottomUnavailable = (
+  presentationStyle: ActionSheetOptionsInterface['presentationStyle']
+) => {
+  if (
+    !__DEV__ ||
+    warnedMaterialDisabled ||
+    Platform.OS !== 'android' ||
+    presentationStyle !== 'bottom' ||
+    nativeModule().getConstants().isMaterialEnabled
+  ) {
+    return;
+  }
+
+  warnedMaterialDisabled = true;
+  console.warn(
+    "react-native-unified-action-sheet: presentationStyle 'bottom' needs Material on Android, " +
+      'so this sheet falls back to a centered dialog. Set unifiedActionSheet.material=true in ' +
+      "android/gradle.properties, or add ['react-native-unified-action-sheet', { material: true }] " +
+      'to your Expo plugins, then rebuild the app.'
+  );
+};
+
 /// The anchor is measured in JS and sent across as a rect, so neither native
 /// module has to resolve a view: a ref's own measureInWindow is the supported
 /// way to do this on both architectures, unlike a react tag.
@@ -111,9 +170,14 @@ export const showActionSheetWithOptions = (
     return Promise.resolve(undefined);
   }
 
-  return withAnchorRect(wire, options.anchor)
-    .then(showWithNativeModule)
-    .then(press);
+  warnIfBottomUnavailable(options.presentationStyle);
+
+  // A bottom sheet has no anchor, so don't measure one: on iPad a rect would
+  // turn the sheet into an arrowed popover pointing at it.
+  const anchor =
+    options.presentationStyle === 'bottom' ? undefined : options.anchor;
+
+  return withAnchorRect(wire, anchor).then(showWithNativeModule).then(press);
 };
 
 export const dismissActionSheet = (): void => {
@@ -129,3 +193,33 @@ export const dismissAllActionSheets = (): void => {
     nativeModule().dismissAllActionSheets();
   }
 };
+
+/// A prompt is the sheet's centered dialog with a text field: iOS presents a
+/// UIAlertController alert with addTextField, Android the same AppCompatDialog
+/// the centered style uses. React Native's own Alert.prompt is iOS-only and a
+/// silent no-op on Android, which is the gap this fills.
+export const showPromptWithOptions = (
+  options: PromptOptionsInterface
+): Promise<PromptResultInterface | undefined> => {
+  const { options: buttons, ...rest } = options;
+  const wire: WirePromptOptions = { ...rest, ...toWireButtons(buttons) };
+
+  if (Platform.OS !== 'ios' && Platform.OS !== 'android') {
+    return Promise.resolve(undefined);
+  }
+
+  return nativeModule()
+    .showPromptWithOptions(wire)
+    .then((result) =>
+      // A programmatic dismiss resolves with no selection, matching the sheet.
+      result.buttonIndex === DISMISSED_BY_API ? undefined : result
+    )
+    .catch(() => ({ buttonIndex: wire.cancelButtonIndex ?? -1, text: '' }))
+    .then((result) => {
+      // The text goes to the handler, so a caller using onPress alone never
+      // has to read the resolved value.
+      if (result) buttons[result.buttonIndex]?.onPress?.(result.text);
+
+      return result;
+    });
+};

package/src/prompt-options.interface.ts

@@ -0,0 +1,27 @@
+import type {
+  BaseAndroidOptionsInterface,
+  BaseButtonInterface,
+  BaseOptionsInterface,
+} from './common-options.interface';
+
+export interface PromptButtonInterface extends BaseButtonInterface {
+  onPress?: (text: string) => void;
+}
+
+export interface PromptCommonOptionsInterface extends BaseOptionsInterface {
+  options: PromptButtonInterface[];
+  placeholder?: string;
+  defaultValue?: string;
+  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'url';
+  secureTextEntry?: boolean;
+}
+
+export type PromptAndroidOptionsInterface = BaseAndroidOptionsInterface;
+
+export interface PromptOptionsInterface
+  extends PromptCommonOptionsInterface, PromptAndroidOptionsInterface {}
+
+export interface PromptResultInterface {
+  buttonIndex: number;
+  text: string;
+}