react-native-unified-action-sheet 0.2.0 → 0.4.0

package/ios/UnifiedActionSheetImpl.swift

@@ -2,7 +2,9 @@ import Foundation
 import UIKit
 
 @objc(UnifiedActionSheetImpl)
-public class UnifiedActionSheetImpl: NSObject, UIPopoverPresentationControllerDelegate {
+public class UnifiedActionSheetImpl: NSObject, UIPopoverPresentationControllerDelegate,
+  UISheetPresentationControllerDelegate
+{
   @objc public static let shared = UnifiedActionSheetImpl()
 
   private static let dismissedByApi = -2
@@ -24,6 +26,7 @@ public class UnifiedActionSheetImpl: NSObject, UIPopoverPresentationControllerDe
     let tintColor = Self.color(options["tintColor"])
     let cancelButtonTintColor = Self.color(options["cancelButtonTintColor"])
     let destructiveColor = Self.color(options["destructiveColor"])
+    let preferredIndex = (options["preferredButtonIndex"] as? NSNumber)?.intValue
 
     guard let parent = Self.presentedViewController() else {
       completion(cancelButtonIndex)
@@ -31,6 +34,29 @@ public class UnifiedActionSheetImpl: NSObject, UIPopoverPresentationControllerDe
       return
     }
 
+    // 'bottom' is a real sheet on iPhone. iPad keeps the action sheet below,
+    // which presents as a popover there: a sheet on iPad is a centered form
+    // sheet, not attached to the bottom at all.
+    if options["presentationStyle"] as? String == "bottom",
+      UIDevice.current.userInterfaceIdiom != .pad
+    {
+      presentBottomSheet(
+        on: parent,
+        options: options,
+        labels: labels,
+        cancelButtonIndex: cancelButtonIndex,
+        destructiveIndices: destructiveIndices,
+        disabledIndices: disabledIndices,
+        preferredIndex: preferredIndex,
+        tintColor: tintColor,
+        cancelButtonTintColor: cancelButtonTintColor,
+        destructiveColor: destructiveColor,
+        completion: completion
+      )
+
+      return
+    }
+
     // 'centered' maps to UIKit's centered alert style; anything else (including
     // absent, and 'anchored') stays .actionSheet, the iOS default — presented
     // from the bottom on iPhone and as a popover on iPad.
@@ -45,7 +71,7 @@ public class UnifiedActionSheetImpl: NSObject, UIPopoverPresentationControllerDe
     let presentation = Presentation(
       controller: alert,
       cancelButtonIndex: cancelButtonIndex,
-      completion: { index, _ in completion(index) }
+      completion: { index, _, _ in completion(index) }
     )
 
     for (index, label) in labels.enumerated() {
@@ -53,7 +79,10 @@ public class UnifiedActionSheetImpl: NSObject, UIPopoverPresentationControllerDe
       let style: UIAlertAction.Style =
         destructiveIndices.contains(index) ? .destructive : (isCancel ? .cancel : .default)
 
-      let action = UIAlertAction(title: label, style: style) { [weak self] _ in
+      // Weak: the presentation holds the alert, which holds this handler.
+      let action = UIAlertAction(title: label, style: style) { [weak self, weak presentation] _ in
+        guard let presentation else { return }
+
         self?.finish(presentation, index: index)
       }
 
@@ -74,6 +103,12 @@ public class UnifiedActionSheetImpl: NSObject, UIPopoverPresentationControllerDe
       alert.addAction(action)
     }
 
+    // UIKit only honors a preferred action in the alert style; the action
+    // sheet already bolds its cancel button.
+    if isCentered, let preferredIndex, alert.actions.indices.contains(preferredIndex) {
+      alert.preferredAction = alert.actions[preferredIndex]
+    }
+
     alert.view.tintColor = tintColor
 
     switch options["userInterfaceStyle"] as? String {
@@ -116,7 +151,7 @@ public class UnifiedActionSheetImpl: NSObject, UIPopoverPresentationControllerDe
   /// sheet, and a prompt is inherently a centered, modal question.
   @objc public func showPrompt(
     options: NSDictionary,
-    completion: @escaping (Int, String) -> Void
+    completion: @escaping (Int, String, String) -> Void
   ) {
     let labels = options["options"] as? [String] ?? []
     let cancelButtonIndex = (options["cancelButtonIndex"] as? NSNumber)?.intValue ?? -1
@@ -129,9 +164,14 @@ public class UnifiedActionSheetImpl: NSObject, UIPopoverPresentationControllerDe
     let tintColor = Self.color(options["tintColor"])
     let cancelButtonTintColor = Self.color(options["cancelButtonTintColor"])
     let destructiveColor = Self.color(options["destructiveColor"])
+    let preferredIndex = (options["preferredButtonIndex"] as? NSNumber)?.intValue
+    let textRequiredIndices = Set(
+      (options["textRequiredButtonIndices"] as? [NSNumber])?.map { $0.intValue } ?? []
+    )
+    let type = options["type"] as? String ?? "plain-text"
 
     guard let parent = Self.presentedViewController() else {
-      completion(cancelButtonIndex, "")
+      completion(cancelButtonIndex, "", "")
 
       return
     }
@@ -145,15 +185,35 @@ public class UnifiedActionSheetImpl: NSObject, UIPopoverPresentationControllerDe
     alert.addTextField { field in
       field.placeholder = Self.text(options["placeholder"])
       field.text = Self.text(options["defaultValue"])
-      field.isSecureTextEntry = (options["secureTextEntry"] as? NSNumber)?.boolValue ?? false
+      field.isSecureTextEntry = type == "secure-text"
       field.keyboardType = Self.keyboardType(options["keyboardType"])
+      if type == "login-password" {
+        field.textContentType = .username
+      }
+    }
+
+    // As in React Native's Alert.prompt: a secure field below the login one.
+    // The content types let Password AutoFill offer saved credentials.
+    if type == "login-password" {
+      alert.addTextField { field in
+        field.placeholder = Self.text(options["passwordPlaceholder"])
+        field.isSecureTextEntry = true
+        field.textContentType = .password
+      }
     }
 
     let presentation = Presentation(
       controller: alert,
       cancelButtonIndex: cancelButtonIndex,
       // Weak, or the presentation would retain the controller it is stored on.
-      currentText: { [weak alert] in alert?.textFields?.first?.text ?? "" },
+      currentValues: { [weak alert] in
+        let fields = alert?.textFields ?? []
+
+        return (
+          fields.first?.text ?? "",
+          fields.count > 1 ? (fields[1].text ?? "") : ""
+        )
+      },
       completion: completion
     )
 
@@ -162,7 +222,10 @@ public class UnifiedActionSheetImpl: NSObject, UIPopoverPresentationControllerDe
       let style: UIAlertAction.Style =
         destructiveIndices.contains(index) ? .destructive : (isCancel ? .cancel : .default)
 
-      let action = UIAlertAction(title: label, style: style) { [weak self] _ in
+      // Weak: the presentation holds the alert, which holds this handler.
+      let action = UIAlertAction(title: label, style: style) { [weak self, weak presentation] _ in
+        guard let presentation else { return }
+
         self?.finish(presentation, index: index)
       }
 
@@ -179,6 +242,29 @@ public class UnifiedActionSheetImpl: NSObject, UIPopoverPresentationControllerDe
       alert.addAction(action)
     }
 
+    // Bold, and triggered by the keyboard's return key.
+    if let preferredIndex, alert.actions.indices.contains(preferredIndex) {
+      alert.preferredAction = alert.actions[preferredIndex]
+    }
+
+    // requiresText: those buttons stay disabled while any field is empty.
+    if !textRequiredIndices.isEmpty {
+      let update: () -> Void = { [weak alert] in
+        guard let alert else { return }
+
+        let filled = (alert.textFields ?? []).allSatisfy { !($0.text ?? "").isEmpty }
+        for index in textRequiredIndices where alert.actions.indices.contains(index) {
+          alert.actions[index].isEnabled = filled && !disabledIndices.contains(index)
+        }
+      }
+
+      alert.textFields?.forEach { field in
+        field.addAction(UIAction { _ in update() }, for: .editingChanged)
+      }
+      // A defaultValue may already satisfy it.
+      update()
+    }
+
     alert.view.tintColor = tintColor
 
     switch options["userInterfaceStyle"] as? String {
@@ -191,6 +277,116 @@ public class UnifiedActionSheetImpl: NSObject, UIPopoverPresentationControllerDe
     parent.present(alert, animated: true)
   }
 
+  private func presentBottomSheet(
+    on parent: UIViewController,
+    options: NSDictionary,
+    labels: [String],
+    cancelButtonIndex: Int,
+    destructiveIndices: Set<Int>,
+    disabledIndices: Set<Int>,
+    preferredIndex: Int?,
+    tintColor: UIColor?,
+    cancelButtonTintColor: UIColor?,
+    destructiveColor: UIColor?,
+    completion: @escaping (Int) -> Void
+  ) {
+    let rows = labels.enumerated().map { index, label in
+      BottomSheetViewController.Row(
+        index: index,
+        label: label,
+        isDestructive: destructiveIndices.contains(index),
+        isEnabled: !disabledIndices.contains(index),
+        isPreferred: index == preferredIndex
+      )
+    }
+
+    let sheet = BottomSheetViewController(
+      title: Self.text(options["title"]),
+      message: Self.text(options["message"]),
+      rows: rows.filter { $0.index != cancelButtonIndex },
+      cancelRow: rows.first { $0.index == cancelButtonIndex },
+      tintColor: tintColor,
+      cancelButtonTintColor: cancelButtonTintColor,
+      destructiveColor: destructiveColor
+    )
+
+    let presentation = Presentation(
+      controller: sheet,
+      cancelButtonIndex: cancelButtonIndex,
+      completion: { index, _, _ in completion(index) }
+    )
+
+    // Weak: the presentation holds the sheet, which holds this closure.
+    sheet.onSelect = { [weak self, weak presentation] index in
+      guard let presentation else { return }
+
+      // Unlike an alert action, a row does not dismiss the sheet itself.
+      // Resolve once it is gone, as an alert does.
+      presentation.controller.dismiss(animated: true) {
+        self?.finish(presentation, index: index)
+      }
+    }
+
+    switch options["userInterfaceStyle"] as? String {
+    case "dark": sheet.overrideUserInterfaceStyle = .dark
+    case "light": sheet.overrideUserInterfaceStyle = .light
+    default: sheet.overrideUserInterfaceStyle = .unspecified
+    }
+    sheet.view.tintColor = tintColor
+
+    if let controller = sheet.sheetPresentationController {
+      controller.prefersGrabberVisible = true
+      controller.prefersEdgeAttachedInCompactHeight = true
+      // Swipe down resolves through presentationControllerDidDismiss.
+      controller.delegate = self
+
+      let bounds = parent.view.window?.bounds ?? parent.view.bounds
+      let fitting = sheet.fittingHeight(width: bounds.width)
+      let requested = options["detents"] as? [String] ?? []
+
+      if !requested.isEmpty {
+        // The caller's heights; it opens at the first. Duplicates collapse,
+        // e.g. 'auto' and 'medium' on iOS 15, where 'auto' is half height.
+        var detents: [UISheetPresentationController.Detent] = []
+        var identifiers: [UISheetPresentationController.Detent.Identifier] = []
+        for name in requested {
+          let (detent, identifier) = Self.detent(named: name, fitting: fitting)
+          guard !identifiers.contains(identifier) else { continue }
+
+          detents.append(detent)
+          identifiers.append(identifier)
+        }
+        controller.detents = detents
+        controller.selectedDetentIdentifier = identifiers.first
+      } else if #available(iOS 16.0, *), fitting <= bounds.height / 2 {
+        // A short list opens at its own height; a long one opens at half
+        // height and drags up to expand, like the Android sheet. Fitting the
+        // content needs a custom detent, iOS 16+; iOS 15 opens at half height.
+        controller.detents = [Self.detent(named: "auto", fitting: fitting).0]
+      } else {
+        controller.detents = [.medium(), .large()]
+      }
+    }
+
+    presentations.append(presentation)
+    parent.present(sheet, animated: true)
+  }
+
+  /// Interactive dismissal of a sheet: a swipe down or a tap on the dimmed
+  /// area. It resolves the cancel index, or -1 without one, like Android. A
+  /// programmatic dismiss() does not call this.
+  public func presentationControllerDidDismiss(
+    _ presentationController: UIPresentationController
+  ) {
+    guard
+      let presentation = presentations.first(where: {
+        $0.controller === presentationController.presentedViewController
+      })
+    else { return }
+
+    finish(presentation, index: presentation.cancelButtonIndex)
+  }
+
   @objc public func dismissAll() {
     guard let bottom = presentations.first else { return }
 
@@ -211,6 +407,21 @@ public class UnifiedActionSheetImpl: NSObject, UIPopoverPresentationControllerDe
     }
   }
 
+  /// The JS runtime is going away: close every sheet, prompt and alert, but
+  /// resolve none of them. Their promises belong to the runtime being torn
+  /// down, and the list is shared, so stale entries must not outlive it.
+  @objc public func invalidate() {
+    let all = presentations
+    presentations.removeAll()
+    all.forEach { $0.discard() }
+
+    // As in dismissAll(): the lowest sheet's presenter dismisses it and
+    // everything stacked above it.
+    all.first { $0.controller.presentingViewController != nil }?
+      .controller.presentingViewController?
+      .dismiss(animated: false)
+  }
+
   @objc public func dismiss() {
     guard let presentation = presentations.last else { return }
 
@@ -224,10 +435,8 @@ public class UnifiedActionSheetImpl: NSObject, UIPopoverPresentationControllerDe
   public func popoverPresentationControllerDidDismissPopover(
     _ popoverPresentationController: UIPopoverPresentationController
   ) {
-    guard
-      let alert = popoverPresentationController.presentedViewController
-        as? UIAlertController,
-      let presentation = presentations.first(where: { $0.controller === alert })
+    let alert = popoverPresentationController.presentedViewController
+    guard let presentation = presentations.first(where: { $0.controller === alert })
     else { return }
 
     finish(presentation, index: presentation.cancelButtonIndex)
@@ -240,31 +449,59 @@ public class UnifiedActionSheetImpl: NSObject, UIPopoverPresentationControllerDe
     presentation.resolve(index)
   }
 
+  /// 'auto' fits the content (iOS 16+; half height on iOS 15), 'medium' is
+  /// half height, 'large' is full height.
+  private static func detent(
+    named name: String,
+    fitting: CGFloat
+  ) -> (UISheetPresentationController.Detent, UISheetPresentationController.Detent.Identifier) {
+    switch name {
+    case "large":
+      return (.large(), .large)
+    case "auto":
+      if #available(iOS 16.0, *) {
+        let identifier = UISheetPresentationController.Detent.Identifier("unifiedActionSheet.content")
+
+        return (.custom(identifier: identifier) { min(fitting, $0.maximumDetentValue) }, identifier)
+      }
+      return (.medium(), .medium)
+    default:
+      return (.medium(), .medium)
+    }
+  }
+
   private final class Presentation {
-    let controller: UIAlertController
+    /// A UIAlertController, or the bottom sheet on iPhone.
+    let controller: UIViewController
     let cancelButtonIndex: Int
-    /// Read at resolve time, not at creation: the value that matters is
-    /// whatever is in the field when the prompt closes. Sheets pass a constant.
-    private let currentText: () -> String
-    private var completion: ((Int, String) -> Void)?
+    /// Read at resolve time, not at creation: the values that matter are
+    /// whatever is in the fields when the prompt closes. Sheets pass constants.
+    private let currentValues: () -> (String, String)
+    private var completion: ((Int, String, String) -> Void)?
 
     init(
-      controller: UIAlertController,
+      controller: UIViewController,
       cancelButtonIndex: Int,
-      currentText: @escaping () -> String = { "" },
-      completion: @escaping (Int, String) -> Void
+      currentValues: @escaping () -> (String, String) = { ("", "") },
+      completion: @escaping (Int, String, String) -> Void
     ) {
       self.controller = controller
       self.cancelButtonIndex = cancelButtonIndex
-      self.currentText = currentText
+      self.currentValues = currentValues
       self.completion = completion
     }
 
+    /// Drops the completion without calling it.
+    func discard() {
+      completion = nil
+    }
+
     func resolve(_ index: Int) {
       guard let completion else { return }
 
       self.completion = nil
-      completion(index, currentText())
+      let (text, password) = currentValues()
+      completion(index, text, password)
     }
   }
 

package/jest/index.d.ts

@@ -1,25 +1,28 @@
 import type {
   ActionSheetOptionsInterface,
+  ActionSheetResultInterface,
   PromptOptionsInterface,
   PromptResultInterface,
 } from 'react-native-unified-action-sheet';
 
-/// Queues the index the next sheet resolves with. Pass nothing to go back to
-/// resolving with no selection.
+/// Queues the index the next sheet resolves with; the reason is derived as the
+/// real module would. Pass nothing to go back to resolving as dismissed.
 export declare function setNextButtonIndex(index?: number): void;
 
 export declare const showActionSheetWithOptions: jest.Mock<
-  Promise<number | undefined>,
+  Promise<ActionSheetResultInterface>,
   [ActionSheetOptionsInterface]
 >;
-/// Queues what the next prompt resolves with. Pass nothing to go back to
-/// resolving with no selection.
-export declare function setNextPromptResult(
-  result?: PromptResultInterface
-): void;
+/// Queues what the next prompt resolves with; the reason is derived as the
+/// real module would. Pass nothing to go back to resolving as dismissed.
+export declare function setNextPromptResult(result?: {
+  buttonIndex: number;
+  text: string;
+  password?: string;
+}): void;
 
 export declare const showPromptWithOptions: jest.Mock<
-  Promise<PromptResultInterface | undefined>,
+  Promise<PromptResultInterface>,
   [PromptOptionsInterface]
 >;
 export declare const dismissActionSheet: jest.Mock<void, []>;

package/jest/index.js

@@ -7,9 +7,11 @@
  *     require('react-native-unified-action-sheet/jest')
  *   );
  *
- * By default every sheet resolves with no selection. To simulate a tap, queue
- * the index the next sheet should resolve with; the pressed button's onPress
- * runs, exactly as it would in the real module:
+ * By default every sheet resolves as dismissed: { reason: 'dismissed',
+ * buttonIndex: undefined }. To simulate a tap, queue the index the next sheet
+ * should resolve with; it resolves { reason, buttonIndex } with the reason the
+ * real module would give ('cancelled' for the cancel button or -1, otherwise
+ * 'selected'), and the pressed button's onPress runs as it would for real:
  *
  *   setNextButtonIndex(0);
  *   await openTheSheet();
@@ -17,11 +19,26 @@
  * Prefer that over mockResolvedValueOnce, which replaces the implementation and
  * so skips onPress.
  *
- * A prompt is queued the same way, with the text the field should resolve with:
+ * A prompt is queued the same way, with what the field(s) should hold (password
+ * only for a 'login-password' prompt); onPress receives { text, password }:
  *
  *   setNextPromptResult({ buttonIndex: 0, text: 'typed' });
  *   await openThePrompt();
  */
+const buttonsOf = (options) => (options && options.options) || [];
+
+/// The same rule as the real module: the first button styled 'cancel', or -1,
+/// is a cancellation; any other index is a selection.
+const closeResult = (buttons, buttonIndex) => {
+  if (buttonIndex == null)
+    return { reason: 'dismissed', buttonIndex: undefined };
+
+  const cancelIndex = buttons.findIndex((button) => button.style === 'cancel');
+  const cancelled = buttonIndex < 0 || buttonIndex === cancelIndex;
+
+  return { reason: cancelled ? 'cancelled' : 'selected', buttonIndex };
+};
+
 let nextButtonIndex;
 
 const setNextButtonIndex = (index) => {
@@ -29,15 +46,14 @@ const setNextButtonIndex = (index) => {
 };
 
 const showActionSheetWithOptions = jest.fn((options) => {
-  const buttonIndex = nextButtonIndex;
+  const buttons = buttonsOf(options);
+  const result = closeResult(buttons, nextButtonIndex);
   nextButtonIndex = undefined;
 
-  if (buttonIndex != null) {
-    const button = options && options.options && options.options[buttonIndex];
-    if (button && typeof button.onPress === 'function') button.onPress();
-  }
+  const button = result.buttonIndex != null && buttons[result.buttonIndex];
+  if (button && typeof button.onPress === 'function') button.onPress();
 
-  return Promise.resolve(buttonIndex);
+  return Promise.resolve(result);
 });
 
 let nextPromptResult;
@@ -47,16 +63,19 @@ const setNextPromptResult = (result) => {
 };
 
 const showPromptWithOptions = jest.fn((options) => {
-  const result = nextPromptResult;
+  const buttons = buttonsOf(options);
+  const queued = nextPromptResult;
   nextPromptResult = undefined;
 
-  if (result) {
-    const button =
-      options && options.options && options.options[result.buttonIndex];
-    if (button && typeof button.onPress === 'function') {
-      button.onPress(result.text);
-    }
-  }
+  const values = { text: (queued && queued.text) || '' };
+  if (queued && queued.password != null) values.password = queued.password;
+  const result = {
+    ...closeResult(buttons, queued ? queued.buttonIndex : undefined),
+    ...values,
+  };
+
+  const button = result.buttonIndex != null && buttons[result.buttonIndex];
+  if (button && typeof button.onPress === 'function') button.onPress(values);
 
   return Promise.resolve(result);
 });

package/lib/commonjs/NativeUnifiedActionSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_default","exports","default","TurboModuleRegistry","getEnforcing"],"sourceRoot":"../../src","sources":["NativeUnifiedActionSheet.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAAqE,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GA6CtDC,gCAAmB,CAACC,YAAY,CAAO,oBAAoB,CAAC","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_default","exports","default","TurboModuleRegistry","getEnforcing"],"sourceRoot":"../../src","sources":["NativeUnifiedActionSheet.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAAqE,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAuDtDC,gCAAmB,CAACC,YAAY,CAAO,oBAAoB,CAAC","ignoreList":[]}