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

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

@@ -2,15 +2,19 @@ package com.unifiedactionsheet
 
 import android.content.Context
 import android.graphics.Color
+import android.graphics.Typeface
+import android.os.Build
 import android.util.TypedValue
 import android.view.Gravity
 import android.view.View
+import android.view.ViewGroup
 import android.widget.Button
 import android.widget.EditText
 import android.widget.LinearLayout
 import android.widget.TextView
 import androidx.appcompat.content.res.AppCompatResources
 import androidx.appcompat.widget.AppCompatEditText
+import androidx.appcompat.widget.AppCompatTextView
 import androidx.core.graphics.ColorUtils
 import androidx.core.view.AccessibilityDelegateCompat
 import androidx.core.view.ViewCompat
@@ -19,6 +23,27 @@ import androidx.core.widget.NestedScrollView
 
 private const val DISABLED_TEXT_ALPHA = 97
 
+/// A button row. Knows its index and both of its colors, so a prompt can
+/// enable or disable it while the user types (requiresText).
+internal class OptionRow(
+  context: Context,
+  val index: Int,
+  private val enabledColor: Int,
+  private val disabledColor: Int,
+) : AppCompatTextView(context) {
+  fun setRowEnabled(enabled: Boolean) {
+    isEnabled = enabled
+    setTextColor(if (enabled) enabledColor else disabledColor)
+  }
+}
+
+/// Every OptionRow below this view, in layout order.
+internal fun View.optionRows(): List<OptionRow> = when (this) {
+  is OptionRow -> listOf(this)
+  is ViewGroup -> (0 until childCount).flatMap { getChildAt(it).optionRows() }
+  else -> emptyList()
+}
+
 internal fun buildContent(
   context: Context,
   options: ActionSheetOptions,
@@ -60,10 +85,12 @@ internal fun buildContent(
     optionRows.addView(
       buildOption(
         context = context,
+        index = index,
         label = label,
         color = if (isDestructive) parseColor(options.destructiveColor) ?: palette.error else optionColor,
         centered = centerLabels,
         enabled = index !in options.disabledButtonIndices,
+        bold = index == options.preferredButtonIndex,
         disabledColor = disabledColor,
         onPress = { onSelect(index) },
       ),
@@ -77,10 +104,12 @@ internal fun buildContent(
         optionRows.addView(
           buildOption(
             context = context,
+            index = cancelIdx,
             label = options.options[cancelIdx],
             color = cancelColor,
             centered = centerLabels,
             enabled = cancelIdx !in options.disabledButtonIndices,
+            bold = cancelIdx == options.preferredButtonIndex,
             disabledColor = disabledColor,
             onPress = { onSelect(cancelIdx) },
           ),
@@ -102,13 +131,45 @@ internal fun buildContent(
   return container
 }
 
-internal fun buildPromptInput(
+/// The prompt's field, or for LOGIN_PASSWORD its login and password fields.
+internal fun buildPromptFields(
   context: Context,
   options: PromptOptions,
   palette: SheetPalette,
+): List<EditText> {
+  val first = buildPromptField(
+    context = context,
+    palette = palette,
+    hint = options.placeholder,
+    inputType = options.keyboardType.toInputType(options.type == PromptType.SECURE_TEXT),
+    autofillHint = if (options.type == PromptType.LOGIN_PASSWORD) View.AUTOFILL_HINT_USERNAME else null,
+  ).apply {
+    setText(options.defaultValue.orEmpty())
+    // Land the caret after any default value rather than before it.
+    setSelection(text?.length ?: 0)
+  }
+
+  if (options.type != PromptType.LOGIN_PASSWORD) return listOf(first)
+
+  val password = buildPromptField(
+    context = context,
+    palette = palette,
+    hint = options.passwordPlaceholder,
+    inputType = PromptKeyboardType.DEFAULT.toInputType(secure = true),
+    autofillHint = View.AUTOFILL_HINT_PASSWORD,
+  )
+
+  return listOf(first, password)
+}
+
+private fun buildPromptField(
+  context: Context,
+  palette: SheetPalette,
+  hint: String?,
+  inputType: Int,
+  autofillHint: String?,
 ): EditText = AppCompatEditText(context).apply {
-  setText(options.defaultValue.orEmpty())
-  hint = options.placeholder
+  this.hint = hint
   setTextSize(TypedValue.COMPLEX_UNIT_SP, 16f)
   setTextColor(palette.primaryText)
   setHintTextColor(ColorUtils.setAlphaComponent(palette.secondaryText, DISABLED_TEXT_ALPHA))
@@ -118,9 +179,11 @@ internal fun buildPromptInput(
   // SingleLineTransformationMethod, which replaces the password masking that
   // setInputType() sets up. Ordering them the other way renders a secure field
   // in plain text while still reporting a password input type.
-  inputType = options.keyboardType.toInputType(options.secureTextEntry)
-  // Land the caret after any default value rather than before it.
-  setSelection(text?.length ?: 0)
+  this.inputType = inputType
+  // Lets the autofill service offer saved credentials, like iOS AutoFill.
+  if (autofillHint != null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+    setAutofillHints(autofillHint)
+  }
   layoutParams = LinearLayout.LayoutParams(
     LinearLayout.LayoutParams.MATCH_PARENT,
     LinearLayout.LayoutParams.WRAP_CONTENT,
@@ -146,22 +209,25 @@ private fun buildHeader(
 
 private fun buildOption(
   context: Context,
+  index: Int,
   label: String,
   color: Int,
   centered: Boolean,
   enabled: Boolean,
+  bold: Boolean,
   disabledColor: Int,
   onPress: () -> Unit,
-): View = TextView(context).apply {
+): View = OptionRow(context, index, color, disabledColor).apply {
   text = label
   gravity = if (centered) Gravity.CENTER_HORIZONTAL else Gravity.START
   setPadding(dp(context, 16), dp(context, 16), dp(context, 16), dp(context, 16))
   setTextSize(TypedValue.COMPLEX_UNIT_SP, 16f)
-  setTextColor(if (enabled) color else disabledColor)
+  // The preferred button: bold, as iOS shows an alert's preferred action.
+  if (bold) setTypeface(typeface, Typeface.BOLD)
   background = AppCompatResources.getDrawable(context, selectableItemBackgroundRes(context))
   isClickable = true
   isFocusable = true
-  isEnabled = enabled
+  setRowEnabled(enabled)
   setOnClickListener { onPress() }
   contentDescription = label
   ViewCompat.setAccessibilityDelegate(

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

@@ -7,12 +7,16 @@ import android.graphics.Color
 import android.graphics.Rect
 import android.graphics.drawable.ColorDrawable
 import android.graphics.drawable.GradientDrawable
+import android.text.Editable
+import android.text.TextWatcher
 import android.view.Gravity
 import android.view.View
 import android.view.View.MeasureSpec
 import android.view.Window
 import android.view.WindowManager
+import android.view.inputmethod.EditorInfo
 import android.widget.FrameLayout
+import android.widget.LinearLayout
 import androidx.appcompat.app.AppCompatDialog
 import androidx.core.graphics.Insets
 import androidx.core.view.ViewCompat
@@ -83,29 +87,76 @@ internal object CenteredDialogPresenter : SheetPresenter {
   }
 }
 
-/// The centered dialog with a text field above the buttons. Deliberately not a
-/// SheetPresenter: it takes PromptOptions and hands the field's text back with
-/// the index, which the sheet interface has no place for.
+/// What the prompt's fields held. password is empty unless LOGIN_PASSWORD.
+internal data class PromptValues(val text: String, val password: String)
+
+/// The centered dialog with text fields above the buttons. Deliberately not a
+/// SheetPresenter: it takes PromptOptions and hands the fields back with the
+/// index, which the sheet interface has no place for.
 internal fun buildPromptDialog(
   activity: Activity,
   options: PromptOptions,
-  onSelect: (Dialog, Int, String) -> Unit,
-): Pair<Dialog, () -> String> {
+  onSelect: (Dialog, Int, PromptValues) -> Unit,
+): Pair<Dialog, () -> PromptValues> {
   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 input = buildPromptInput(context, options, palette)
-  val currentText = { input.text?.toString().orEmpty() }
+  val fields = buildPromptFields(context, options, palette)
+  val input = fields.singleOrNull() ?: LinearLayout(context).apply {
+    orientation = LinearLayout.VERTICAL
+    fields.forEach(::addView)
+  }
+  val currentValues = {
+    PromptValues(
+      text = fields[0].text?.toString().orEmpty(),
+      password = fields.getOrNull(1)?.text?.toString().orEmpty(),
+    )
+  }
 
   val container = buildContent(
     context = context,
     options = options.toSheetOptions(),
     palette = palette,
     inputView = input,
-  ) { index -> onSelect(dialog, index, currentText()) }
+  ) { index -> onSelect(dialog, index, currentValues()) }
+
+  val rows = container.optionRows()
+
+  // requiresText: those buttons stay disabled while any field is empty.
+  if (options.textRequiredButtonIndices.isNotEmpty()) {
+    val update = {
+      val filled = fields.all { !it.text.isNullOrEmpty() }
+      rows.filter { it.index in options.textRequiredButtonIndices }.forEach { row ->
+        row.setRowEnabled(filled && row.index !in options.disabledButtonIndices)
+      }
+    }
+    val watcher = object : TextWatcher {
+      override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) = Unit
+      override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) = Unit
+      override fun afterTextChanged(s: Editable?) = update()
+    }
+    fields.forEach { it.addTextChangedListener(watcher) }
+    // A defaultValue may already satisfy it.
+    update()
+  }
+
+  // The keyboard's action key moves to the next field, then presses the
+  // preferred button, as the return key does in an iOS alert.
+  fields.forEachIndexed { index, field ->
+    field.imeOptions = if (index == fields.lastIndex) EditorInfo.IME_ACTION_DONE else EditorInfo.IME_ACTION_NEXT
+  }
+  val preferredRow = rows.firstOrNull { it.index == options.preferredButtonIndex }
+  if (preferredRow != null) {
+    fields.last().setOnEditorActionListener { _, actionId, _ ->
+      if (actionId != EditorInfo.IME_ACTION_DONE || !preferredRow.isEnabled) return@setOnEditorActionListener false
+
+      preferredRow.performClick()
+      true
+    }
+  }
 
   dialog.setContentView(container)
   dialog.setCanceledOnTouchOutside(true)
@@ -127,9 +178,9 @@ internal fun buildPromptDialog(
   // A prompt exists to be typed into, so raise the keyboard with it rather than
   // making the user tap the field first.
   dialog.window?.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE)
-  input.requestFocus()
+  fields[0].requestFocus()
 
-  return dialog to currentText
+  return dialog to currentValues
 }
 
 private const val PROMPT_CORNER_RADIUS_DP = 28

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

@@ -51,6 +51,9 @@ class UnifiedActionSheetModule(reactContext: ReactApplicationContext) :
     }
   }
 
+  override fun getTypedExportedConstants(): MutableMap<String, Any> =
+    mutableMapOf("isMaterialEnabled" to BottomSheetPresenterFactory.isAvailable)
+
   override fun dismissActionSheet() {
     UiThreadUtil.runOnUiThread {
       openDialogs.lastOrNull()?.let { dialog ->
@@ -111,6 +114,9 @@ class UnifiedActionSheetModule(reactContext: ReactApplicationContext) :
           CenteredDialogPresenter
         }
       }
+      // Without Material compiled in there is no bottom sheet; JS has already
+      // warned in development, from the isMaterialEnabled constant.
+      PresentationStyle.BOTTOM -> BottomSheetPresenterFactory.create() ?: CenteredDialogPresenter
     }
 
     val dialog = presenter.build(activity, options) { presented, index ->
@@ -141,32 +147,33 @@ class UnifiedActionSheetModule(reactContext: ReactApplicationContext) :
     promise: Promise,
   ) {
     val resolved = AtomicBoolean(false)
-    val resolveOnce: (Int?, String) -> Unit = { index, text ->
+    val resolveOnce: (Int?, PromptValues) -> Unit = { index, values ->
       if (resolved.compareAndSet(false, true)) {
         promise.resolve(
           Arguments.createMap().apply {
             putInt("buttonIndex", index ?: -1)
-            putString("text", text)
+            putString("text", values.text)
+            putString("password", values.password)
           },
         )
       }
     }
 
-    val (dialog, currentText) = buildPromptDialog(activity, options) { presented, index, text ->
+    val (dialog, currentValues) = buildPromptDialog(activity, options) { presented, index, values ->
       presented.dismiss()
-      resolveOnce(index, text)
+      resolveOnce(index, values)
     }
     openDialogs.add(dialog)
 
     // Read the field at dismissal time: what the user typed survives a backdrop
     // tap, so a caller can still recover a draft.
-    dialog.setOnCancelListener { resolveOnce(options.cancelButtonIndex, currentText()) }
+    dialog.setOnCancelListener { resolveOnce(options.cancelButtonIndex, currentValues()) }
     dialog.setOnDismissListener {
       openDialogs.remove(dialog)
       if (dismissedByApi.remove(dialog)) {
-        resolveOnce(DISMISSED_BY_API, currentText())
+        resolveOnce(DISMISSED_BY_API, currentValues())
       } else {
-        resolveOnce(options.cancelButtonIndex, currentText())
+        resolveOnce(options.cancelButtonIndex, currentValues())
       }
     }
 

package/android/src/material/java/com/unifiedactionsheet/BottomSheetPresenterFactory.kt

@@ -0,0 +1,10 @@
+package com.unifiedactionsheet
+
+/// Compiled only when the app sets unifiedActionSheet.material=true, which also
+/// adds the Material dependency. The noMaterial source set defines the same
+/// object, so src/main compiles against either.
+internal object BottomSheetPresenterFactory {
+  const val isAvailable = true
+
+  fun create(): SheetPresenter? = MaterialBottomSheetPresenter
+}

package/android/src/material/java/com/unifiedactionsheet/MaterialBottomSheetPresenter.kt

@@ -0,0 +1,153 @@
+package com.unifiedactionsheet
+
+import android.app.Activity
+import android.app.Dialog
+import android.content.res.ColorStateList
+import android.view.View
+import android.view.View.MeasureSpec
+import android.widget.LinearLayout
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowCompat
+import androidx.core.view.WindowInsetsCompat
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+import com.google.android.material.bottomsheet.BottomSheetDialog
+import com.google.android.material.bottomsheet.BottomSheetDragHandleView
+import com.google.android.material.R as MaterialR
+
+/// presentationStyle 'bottom': a Material 3 modal bottom sheet. Material's own
+/// behavior does the rest: a long list opens at the peek height and drags up to
+/// expand, a short one opens fully, and swiping it away cancels the dialog, so
+/// it resolves through the same cancel path as a backdrop tap.
+internal object MaterialBottomSheetPresenter : SheetPresenter {
+  override fun build(
+    activity: Activity,
+    options: ActionSheetOptions,
+    onSelect: (Dialog, Int) -> Unit,
+  ): Dialog {
+    val isDark = isDarkAppearance(activity, options.userInterfaceStyle)
+    val palette = paletteFor(isDark)
+    // A full Material 3 theme rather than an overlay, so the sheet works inside
+    // an app whose own theme is plain AppCompat.
+    val dialog = BottomSheetDialog(activity, bottomSheetTheme(isDark))
+
+    val context = dialog.context
+    // The cancel row stays the last row, as on the centered dialog. With a long
+    // list it starts below the peek height, which Material users expect:
+    // swipe down, back and a backdrop tap all resolve the cancel index anyway.
+    val content = buildContent(context, options, palette) { index -> onSelect(dialog, index) }
+
+    val root = LinearLayout(context).apply {
+      orientation = LinearLayout.VERTICAL
+      addView(
+        BottomSheetDragHandleView(context),
+        LinearLayout.LayoutParams(
+          LinearLayout.LayoutParams.MATCH_PARENT,
+          LinearLayout.LayoutParams.WRAP_CONTENT,
+        ),
+      )
+      addView(
+        content,
+        LinearLayout.LayoutParams(
+          LinearLayout.LayoutParams.MATCH_PARENT,
+          LinearLayout.LayoutParams.WRAP_CONTENT,
+        ),
+      )
+    }
+    dialog.setContentView(root)
+    dialog.setCanceledOnTouchOutside(true)
+
+    // Tint Material's own sheet background instead of replacing it, so its
+    // rounded top corners and expansion animation stay intact, while the color
+    // matches the palette the centered and anchored styles use.
+    dialog.findViewById<View>(MaterialR.id.design_bottom_sheet)?.let { sheet ->
+      ViewCompat.setBackgroundTintList(sheet, ColorStateList.valueOf(palette.surface))
+    }
+
+    // The sheet now sits behind the navigation bar, so its buttons or gesture
+    // handle need to contrast with the sheet, not with the app underneath.
+    dialog.window?.let { window ->
+      WindowCompat.getInsetsController(window, window.decorView)
+        .isAppearanceLightNavigationBars = !isDark
+    }
+
+    // Edge to edge is for the bottom only. It would also let a long list
+    // expand behind the status bar, so cap the sheet just below it (and any
+    // display cutout); the rows scroll inside it instead.
+    val decor = activity.window.decorView
+    val insets = ViewCompat.getRootWindowInsets(decor)
+    val topInset = insets
+      ?.getInsets(WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout())
+      ?.top ?: 0
+    val bottomInset = insets?.getInsets(WindowInsetsCompat.Type.navigationBars())?.bottom ?: 0
+    if (decor.height > topInset) {
+      val maxHeight = decor.height - topInset
+      dialog.behavior.maxHeight = maxHeight
+      applyDetents(dialog, root, options.detents, decor, maxHeight, bottomInset)
+    }
+
+    return dialog
+  }
+
+  /// The caller's detents, mapped onto Material's states. Each one becomes a
+  /// height: 'auto' the content (plus the navigation bar the sheet now draws
+  /// behind), 'medium' half the screen, 'large' everything below the status
+  /// bar. The sheet is as tall as the tallest; with two heights the lower one
+  /// is the collapsed state, and a third in between is the half-expanded one.
+  /// It opens at the first detent listed. None listed keeps Material's own
+  /// behavior: a short list fits, a long one peeks and expands.
+  private fun applyDetents(
+    dialog: BottomSheetDialog,
+    root: View,
+    detents: List<Detent>,
+    decor: View,
+    maxHeight: Int,
+    bottomInset: Int,
+  ) {
+    if (detents.isEmpty()) return
+    val sheet = dialog.findViewById<View>(MaterialR.id.design_bottom_sheet) ?: return
+
+    root.measure(
+      MeasureSpec.makeMeasureSpec(decor.width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(maxHeight, MeasureSpec.AT_MOST),
+    )
+    val heightOf = detents.associateWith { detent ->
+      when (detent) {
+        Detent.AUTO -> (root.measuredHeight + bottomInset).coerceAtMost(maxHeight)
+        Detent.MEDIUM -> (decor.height / 2).coerceAtMost(maxHeight)
+        Detent.LARGE -> maxHeight
+      }
+    }
+    // Equal heights are one resting point, e.g. 'auto' for a list that fills
+    // the screen and 'large'.
+    val heights = heightOf.values.distinct().sorted()
+    val tallest = heights.last()
+    val behavior = dialog.behavior
+
+    sheet.layoutParams = sheet.layoutParams.apply { height = tallest }
+    // Only three resting points need Material's half-expanded state, which
+    // requires fitToContents off.
+    behavior.isFitToContents = heights.size < 3
+    behavior.skipCollapsed = heights.size == 1
+    if (heights.size > 1) {
+      // Material adds the navigation bar inset to the peek height itself.
+      behavior.peekHeight = heights.first() - bottomInset
+    }
+    if (heights.size == 3) {
+      behavior.halfExpandedRatio = heights[1].toFloat() / decor.height
+      behavior.expandedOffset = decor.height - tallest
+    }
+
+    val initial = heightOf.getValue(detents.first())
+    behavior.state = when {
+      initial == tallest -> BottomSheetBehavior.STATE_EXPANDED
+      heights.size == 3 && initial == heights[1] -> BottomSheetBehavior.STATE_HALF_EXPANDED
+      else -> BottomSheetBehavior.STATE_COLLAPSED
+    }
+  }
+
+  private fun bottomSheetTheme(isDark: Boolean): Int = if (isDark) {
+    R.style.UnifiedActionSheet_BottomSheetDialog_Dark
+  } else {
+    R.style.UnifiedActionSheet_BottomSheetDialog_Light
+  }
+}

package/android/src/material/res/values/unified_action_sheet_bottom_sheet.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <!-- Full Material 3 themes, not overlays: Material components refuse to
+       inflate under a non-Material theme, and the host app's may be plain
+       AppCompat. userInterfaceStyle picks light or dark explicitly, so neither
+       follows DayNight.
+
+       Edge to edge, so the sheet runs down behind the navigation bar instead
+       of stopping above it and leaving a strip of scrim there. Material only
+       does this when enableEdgeToEdge is set and the navigation bar is
+       translucent; the sheet then pads its content by the bar's inset, so the
+       last row stays clear of it. -->
+  <style name="UnifiedActionSheet.BottomSheetDialog.Light" parent="Theme.Material3.Light.BottomSheetDialog">
+    <item name="enableEdgeToEdge">true</item>
+    <item name="android:navigationBarColor">@android:color/transparent</item>
+  </style>
+
+  <style name="UnifiedActionSheet.BottomSheetDialog.Dark" parent="Theme.Material3.Dark.BottomSheetDialog">
+    <item name="enableEdgeToEdge">true</item>
+    <item name="android:navigationBarColor">@android:color/transparent</item>
+  </style>
+</resources>

package/android/src/noMaterial/java/com/unifiedactionsheet/BottomSheetPresenterFactory.kt

@@ -0,0 +1,10 @@
+package com.unifiedactionsheet
+
+/// Compiled when the app has not set unifiedActionSheet.material=true. There is
+/// no bottom sheet without Material, so the module falls back to the centered
+/// dialog, and JS warns in development (see getTypedExportedConstants).
+internal object BottomSheetPresenterFactory {
+  const val isAvailable = false
+
+  fun create(): SheetPresenter? = null
+}

package/app.plugin.js

@@ -0,0 +1 @@
+module.exports = require('./plugin/withUnifiedActionSheet');