react-native-unified-action-sheet 0.1.0

package/android/src/main/java/com/unifiedactionsheet/SheetPresenters.kt

@@ -0,0 +1,214 @@
+package com.unifiedactionsheet
+
+import android.app.Activity
+import android.app.Dialog
+import android.content.Context
+import android.graphics.Color
+import android.graphics.Rect
+import android.graphics.drawable.ColorDrawable
+import android.graphics.drawable.GradientDrawable
+import android.view.Gravity
+import android.view.View
+import android.view.View.MeasureSpec
+import android.view.Window
+import android.view.WindowManager
+import android.widget.FrameLayout
+import androidx.appcompat.app.AppCompatDialog
+import androidx.core.graphics.Insets
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
+
+private const val MAX_HEIGHT_PERCENT = 90
+
+internal interface SheetPresenter {
+  fun build(activity: Activity, options: ActionSheetOptions, onSelect: (Dialog, Int) -> Unit): Dialog
+}
+
+internal object CenteredDialogPresenter : SheetPresenter {
+  private const val CENTERED_CORNER_RADIUS_DP = 28
+  private const val CENTERED_MARGIN_DP = 24
+  private const val CENTERED_MIN_WIDTH_DP = 280
+  private const val CENTERED_MAX_WIDTH_DP = 560
+
+  override fun build(
+    activity: Activity,
+    options: ActionSheetOptions,
+    onSelect: (Dialog, Int) -> Unit,
+  ): Dialog {
+    val isDark = isDarkAppearance(activity, options.userInterfaceStyle)
+    val palette = paletteFor(isDark)
+    val dialog = AppCompatDialog(activity, dialogTheme(isDark))
+    dialog.supportRequestWindowFeature(Window.FEATURE_NO_TITLE)
+
+    val context: Context = dialog.context
+    val container = buildContent(context, options, palette) { index -> onSelect(dialog, index) }
+
+    dialog.setContentView(container)
+    dialog.setCanceledOnTouchOutside(true)
+
+    val background = GradientDrawable().apply {
+      cornerRadius = dp(context, CENTERED_CORNER_RADIUS_DP).toFloat()
+      setColor(palette.surface)
+    }
+    dialog.window?.setBackgroundDrawable(background)
+    container.background = background.constantState?.newDrawable() ?: background
+    container.clipToOutline = true
+
+    val metrics = context.resources.displayMetrics
+    val width = (metrics.widthPixels - 2 * dp(context, CENTERED_MARGIN_DP))
+      .coerceAtMost(dp(context, CENTERED_MAX_WIDTH_DP))
+      .coerceAtLeast(minOf(dp(context, CENTERED_MIN_WIDTH_DP), metrics.widthPixels))
+    dialog.window?.setLayout(width, WindowManager.LayoutParams.WRAP_CONTENT)
+
+    val maxHeight = (metrics.heightPixels * MAX_HEIGHT_PERCENT) / 100
+    container.addOnLayoutChangeListener(object : View.OnLayoutChangeListener {
+      override fun onLayoutChange(
+        view: View,
+        left: Int,
+        top: Int,
+        right: Int,
+        bottom: Int,
+        oldLeft: Int,
+        oldTop: Int,
+        oldRight: Int,
+        oldBottom: Int,
+      ) {
+        if (container.height <= maxHeight) return
+        container.removeOnLayoutChangeListener(this)
+        dialog.window?.setLayout(width, maxHeight)
+      }
+    })
+
+    return dialog
+  }
+}
+
+internal class AnchoredDialogPresenter(private val anchorRect: Rect) : SheetPresenter {
+  override fun build(
+    activity: Activity,
+    options: ActionSheetOptions,
+    onSelect: (Dialog, Int) -> Unit,
+  ): Dialog {
+    val isDark = isDarkAppearance(activity, options.userInterfaceStyle)
+    val palette = paletteFor(isDark)
+    val dialog = AppCompatDialog(activity, dialogTheme(isDark))
+    dialog.supportRequestWindowFeature(Window.FEATURE_NO_TITLE)
+
+    val context: Context = dialog.context
+    val container = buildContent(context, options, palette, includeCancelRow = false) { index ->
+      onSelect(dialog, index)
+    }
+
+    container.background = GradientDrawable().apply {
+      cornerRadius = dp(context, ANCHORED_CORNER_RADIUS_DP).toFloat()
+      setColor(palette.surface)
+    }
+    container.clipToOutline = true
+    container.elevation = dp(context, ANCHORED_ELEVATION_DP).toFloat()
+
+    val pad = dp(context, SHADOW_PADDING_DP)
+    val wrapper = FrameLayout(context).apply {
+      setPadding(pad, pad, pad, pad)
+      clipChildren = false
+      clipToPadding = false
+      addView(
+        container,
+        FrameLayout.LayoutParams(
+          FrameLayout.LayoutParams.MATCH_PARENT,
+          FrameLayout.LayoutParams.MATCH_PARENT,
+        ),
+      )
+    }
+    dialog.setContentView(wrapper)
+    dialog.setCanceledOnTouchOutside(true)
+
+    val window = dialog.window ?: return dialog
+    window.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
+    window.clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND)
+    window.addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN)
+    window.setGravity(Gravity.TOP or Gravity.LEFT)
+
+    // The rect arrives in the activity content view's space, which sits below
+    // the status bar unless the app is edge to edge, while this window is laid
+    // out in screen space. Offset by the content view's position to line up.
+    val anchorOnScreen = Rect(anchorRect).apply {
+      val offset = IntArray(2)
+      activity.findViewById<View>(android.R.id.content)?.getLocationOnScreen(offset)
+      offset(offset[0], offset[1])
+    }
+
+    val decor = activity.window.decorView
+    val insets = ViewCompat.getRootWindowInsets(decor)?.getInsets(
+      WindowInsetsCompat.Type.systemBars() or
+        WindowInsetsCompat.Type.displayCutout() or
+        WindowInsetsCompat.Type.ime(),
+    ) ?: Insets.NONE
+    val margin = dp(context, EDGE_MARGIN_DP)
+    val usable = Rect(
+      insets.left + margin,
+      insets.top + margin,
+      decor.width - insets.right - margin,
+      decor.height - insets.bottom - margin,
+    )
+
+    val maxWidth = minOf(dp(context, ANCHORED_MAX_WIDTH_DP), usable.width())
+    container.measure(
+      MeasureSpec.makeMeasureSpec(maxWidth, MeasureSpec.AT_MOST),
+      MeasureSpec.makeMeasureSpec(usable.height(), MeasureSpec.AT_MOST),
+    )
+    val width = container.measuredWidth
+      .coerceIn(minOf(dp(context, ANCHORED_MIN_WIDTH_DP), maxWidth), maxWidth)
+    container.measure(
+      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(usable.height(), MeasureSpec.AT_MOST),
+    )
+    val desiredHeight = container.measuredHeight
+
+    val gap = dp(context, ANCHOR_GAP_DP)
+    val spaceBelow = usable.bottom - (anchorOnScreen.bottom + gap)
+    val spaceAbove = (anchorOnScreen.top - gap) - usable.top
+    var height = desiredHeight
+    var y = anchorOnScreen.bottom + gap
+    if (desiredHeight > spaceBelow) {
+      if (desiredHeight <= spaceAbove) {
+        y = anchorOnScreen.top - gap - desiredHeight
+      } else {
+        height = minOf(desiredHeight, maxOf(spaceBelow, spaceAbove))
+          .coerceAtLeast(minOf(desiredHeight, dp(context, ANCHORED_MIN_HEIGHT_DP)))
+        y = if (spaceBelow >= spaceAbove) {
+          anchorOnScreen.bottom + gap
+        } else {
+          anchorOnScreen.top - gap - height
+        }
+      }
+    }
+    y = y.coerceIn(usable.top, maxOf(usable.top, usable.bottom - height))
+
+    val rtl =
+      context.resources.configuration.layoutDirection == View.LAYOUT_DIRECTION_RTL
+    val x = when {
+      options.anchorAlignment == AnchorAlignment.CENTER -> anchorOnScreen.centerX() - width / 2
+      rtl -> anchorOnScreen.right - width
+      else -> anchorOnScreen.left
+    }.coerceIn(usable.left, maxOf(usable.left, usable.right - width))
+
+    val attributes = window.attributes
+    attributes.x = x - pad
+    attributes.y = y - pad
+    window.attributes = attributes
+    window.setLayout(width + 2 * pad, height + 2 * pad)
+
+    return dialog
+  }
+
+  private companion object {
+    const val ANCHORED_MIN_WIDTH_DP = 180
+    const val ANCHORED_MAX_WIDTH_DP = 280
+    const val ANCHORED_MIN_HEIGHT_DP = 96
+    const val ANCHORED_CORNER_RADIUS_DP = 8
+    const val ANCHORED_ELEVATION_DP = 3
+    const val SHADOW_PADDING_DP = 8
+    const val EDGE_MARGIN_DP = 8
+    const val ANCHOR_GAP_DP = 4
+  }
+}

package/android/src/main/java/com/unifiedactionsheet/SheetTheming.kt

@@ -0,0 +1,56 @@
+package com.unifiedactionsheet
+
+import android.app.Activity
+import android.content.Context
+import android.content.res.Configuration
+import android.util.TypedValue
+import androidx.appcompat.R as AppCompatR
+
+internal data class SheetPalette(
+  val primaryText: Int,
+  val secondaryText: Int,
+  val error: Int,
+  val surface: Int,
+)
+
+private val LIGHT_PALETTE = SheetPalette(
+  primaryText = 0xFF1D1B20.toInt(),
+  secondaryText = 0xFF49454F.toInt(),
+  error = 0xFFB3261E.toInt(),
+  surface = 0xFFECE6F0.toInt(),
+)
+
+private val DARK_PALETTE = SheetPalette(
+  primaryText = 0xFFE6E0E9.toInt(),
+  secondaryText = 0xFFCAC4D0.toInt(),
+  error = 0xFFF2B8B5.toInt(),
+  surface = 0xFF2B2930.toInt(),
+)
+
+internal fun isDarkAppearance(activity: Activity, appearance: ForcedAppearance): Boolean =
+  when (appearance) {
+    ForcedAppearance.LIGHT -> false
+    ForcedAppearance.DARK -> true
+    ForcedAppearance.SYSTEM -> {
+      val nightMode = activity.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
+      nightMode == Configuration.UI_MODE_NIGHT_YES
+    }
+  }
+
+internal fun dialogTheme(isDark: Boolean): Int = if (isDark) {
+  AppCompatR.style.Theme_AppCompat_Dialog
+} else {
+  AppCompatR.style.Theme_AppCompat_Light_Dialog
+}
+
+internal fun paletteFor(isDark: Boolean): SheetPalette = if (isDark) DARK_PALETTE else LIGHT_PALETTE
+
+internal fun selectableItemBackgroundRes(context: Context): Int {
+  val outValue = TypedValue()
+  context.theme.resolveAttribute(android.R.attr.selectableItemBackground, outValue, true)
+
+  return outValue.resourceId
+}
+
+internal fun dp(context: Context, value: Int): Int =
+  (value * context.resources.displayMetrics.density).toInt()

package/android/src/main/java/com/unifiedactionsheet/UnifiedActionSheetModule.kt

@@ -0,0 +1,126 @@
+package com.unifiedactionsheet
+
+import android.app.Activity
+import android.app.Dialog
+import com.facebook.react.bridge.LifecycleEventListener
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.UiThreadUtil
+import java.util.concurrent.atomic.AtomicBoolean
+
+class UnifiedActionSheetModule(reactContext: ReactApplicationContext) :
+  NativeUnifiedActionSheetSpec(reactContext), LifecycleEventListener {
+
+  init {
+    reactContext.addLifecycleEventListener(this)
+  }
+
+  private val openDialogs = mutableListOf<Dialog>()
+
+  private val dismissedByApi = mutableSetOf<Dialog>()
+
+  override fun showActionSheetWithOptions(options: ReadableMap, promise: Promise) {
+    val parsed =
+      ActionSheetOptions.fromReadableMap(
+        options,
+        reactApplicationContext.resources.displayMetrics.density,
+      )
+    val activity = reactApplicationContext.currentActivity
+      ?: return promise.reject(
+        "E_NO_ACTIVITY",
+        "No current activity to attach the action sheet to.",
+      )
+
+    UiThreadUtil.runOnUiThread {
+      presentSheet(activity, parsed, promise)
+    }
+  }
+
+  override fun dismissActionSheet() {
+    UiThreadUtil.runOnUiThread {
+      openDialogs.lastOrNull()?.let { dialog ->
+        dismissedByApi.add(dialog)
+        dialog.dismiss()
+      }
+    }
+  }
+
+  override fun dismissAllActionSheets() {
+    UiThreadUtil.runOnUiThread {
+      openDialogs.toList().forEach { dialog ->
+        dismissedByApi.add(dialog)
+        dialog.dismiss()
+      }
+    }
+  }
+
+  override fun onHostResume() = Unit
+
+  override fun onHostPause() = Unit
+
+  override fun onHostDestroy() {
+    UiThreadUtil.runOnUiThread { dismissAllOpenDialogs() }
+  }
+
+  override fun invalidate() {
+    reactApplicationContext.removeLifecycleEventListener(this)
+    UiThreadUtil.runOnUiThread { dismissAllOpenDialogs() }
+    super.invalidate()
+  }
+
+  private fun dismissAllOpenDialogs() {
+    openDialogs.toList().forEach { it.dismiss() }
+    openDialogs.clear()
+    dismissedByApi.clear()
+  }
+
+  private fun presentSheet(
+    activity: Activity,
+    options: ActionSheetOptions,
+    promise: Promise,
+  ) {
+    val resolved = AtomicBoolean(false)
+    val resolveOnce: (Int?) -> Unit = { index ->
+      if (resolved.compareAndSet(false, true)) {
+        promise.resolve(index ?: -1)
+      }
+    }
+
+    val presenter: SheetPresenter = when (options.presentationStyle) {
+      PresentationStyle.CENTERED -> CenteredDialogPresenter
+      PresentationStyle.ANCHORED -> {
+        val rect = options.anchorRect
+        if (rect != null && rect.width() > 0 && rect.height() > 0) {
+          AnchoredDialogPresenter(rect)
+        } else {
+          CenteredDialogPresenter
+        }
+      }
+    }
+
+    val dialog = presenter.build(activity, options) { presented, index ->
+      presented.dismiss()
+      resolveOnce(index)
+    }
+    openDialogs.add(dialog)
+
+    dialog.setOnCancelListener { resolveOnce(options.cancelButtonIndex) }
+    dialog.setOnDismissListener {
+      openDialogs.remove(dialog)
+      if (dismissedByApi.remove(dialog)) {
+        resolveOnce(DISMISSED_BY_API)
+      } else {
+        resolveOnce(options.cancelButtonIndex)
+      }
+    }
+
+    dialog.show()
+  }
+
+  companion object {
+    const val NAME = NativeUnifiedActionSheetSpec.NAME
+
+    private const val DISMISSED_BY_API = -2
+  }
+}

package/android/src/main/java/com/unifiedactionsheet/UnifiedActionSheetPackage.kt

@@ -0,0 +1,30 @@
+package com.unifiedactionsheet
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
+
+class UnifiedActionSheetPackage : BaseReactPackage() {
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+    return if (name == UnifiedActionSheetModule.NAME) {
+      UnifiedActionSheetModule(reactContext)
+    } else {
+      null
+    }
+  }
+
+  override fun getReactModuleInfoProvider() = ReactModuleInfoProvider {
+    mapOf(
+      UnifiedActionSheetModule.NAME to ReactModuleInfo(
+        name = UnifiedActionSheetModule.NAME,
+        className = UnifiedActionSheetModule.NAME,
+        canOverrideExistingModule = false,
+        needsEagerInit = false,
+        isCxxModule = false,
+        isTurboModule = true
+      )
+    )
+  }
+}

package/ios/UnifiedActionSheet.h

@@ -0,0 +1,5 @@
+#import <React/RCTBridgeModule.h>
+
+@interface UnifiedActionSheet : NSObject <RCTBridgeModule>
+
+@end

package/ios/UnifiedActionSheet.mm

@@ -0,0 +1,96 @@
+#import "UnifiedActionSheet.h"
+
+#import <RCTTypeSafety/RCTConvertHelpers.h>
+#import <UnifiedActionSheetSpec/UnifiedActionSheetSpec.h>
+
+#import "react_native_unified_action_sheet-Swift.h"
+
+@interface UnifiedActionSheet () <NativeUnifiedActionSheetSpec>
+@end
+
+@implementation UnifiedActionSheet
+
+RCT_EXPORT_MODULE()
+
++ (BOOL)requiresMainQueueSetup
+{
+  return NO;
+}
+
+/// Only the keys the iOS presentation understands are forwarded; the
+/// Android-only keys in the shared spec are ignored here.
+RCT_EXPORT_METHOD(showActionSheetWithOptions
+                  : (JS::NativeUnifiedActionSheet::SpecShowActionSheetWithOptionsOptions &)options resolve
+                  : (RCTPromiseResolveBlock)resolve reject
+                  : (RCTPromiseRejectBlock)reject)
+{
+  NSMutableDictionary *payload = [NSMutableDictionary new];
+
+  payload[@"options"] = RCTConvertVecToArray(options.options(), ^id(NSString *element) {
+    return element;
+  });
+
+  if (options.cancelButtonIndex()) {
+    payload[@"cancelButtonIndex"] = @(*options.cancelButtonIndex());
+  }
+  if (options.destructiveButtonIndices()) {
+    payload[@"destructiveButtonIndices"] =
+        RCTConvertVecToArray(*options.destructiveButtonIndices(), ^id(double element) {
+          return @(element);
+        });
+  }
+  if (options.disabledButtonIndices()) {
+    payload[@"disabledButtonIndices"] = RCTConvertVecToArray(*options.disabledButtonIndices(), ^id(double element) {
+      return @(element);
+    });
+  }
+
+  payload[@"title"] = options.title();
+  payload[@"message"] = options.message();
+  payload[@"tintColor"] = options.tintColor();
+  payload[@"cancelButtonTintColor"] = options.cancelButtonTintColor();
+  payload[@"userInterfaceStyle"] = options.userInterfaceStyle();
+  payload[@"destructiveColor"] = options.destructiveColor();
+  payload[@"presentationStyle"] = options.presentationStyle();
+
+  // The anchor arrives already measured from the ref on the JS side, so this
+  // module never resolves a view and needs no React Native view API.
+  auto anchorRect = options.anchorRect();
+  if (anchorRect.has_value()) {
+    payload[@"anchorRect"] = @{
+      @"x" : @(anchorRect->x()),
+      @"y" : @(anchorRect->y()),
+      @"width" : @(anchorRect->width()),
+      @"height" : @(anchorRect->height()),
+    };
+  }
+
+  dispatch_async(dispatch_get_main_queue(), ^{
+    [UnifiedActionSheetImpl.shared showWithOptions:payload
+                                       completion:^(NSInteger buttonIndex) {
+                                         resolve(@(buttonIndex));
+                                       }];
+  });
+}
+
+RCT_EXPORT_METHOD(dismissActionSheet)
+{
+  dispatch_async(dispatch_get_main_queue(), ^{
+    [UnifiedActionSheetImpl.shared dismiss];
+  });
+}
+
+RCT_EXPORT_METHOD(dismissAllActionSheets)
+{
+  dispatch_async(dispatch_get_main_queue(), ^{
+    [UnifiedActionSheetImpl.shared dismissAll];
+  });
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return std::make_shared<facebook::react::NativeUnifiedActionSheetSpecJSI>(params);
+}
+
+@end