react-native-platform-components 1.4.0 → 1.6.0

package/android/src/main/java/com/platformcomponents/PCButtonView.kt

@@ -5,17 +5,22 @@ import android.text.TextUtils
 import android.view.View
 import android.view.ViewParent
 import android.widget.FrameLayout
+import androidx.appcompat.widget.PopupMenu
 import com.facebook.react.bridge.WritableNativeMap
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.ReactCompoundViewGroup
 import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.views.scroll.ReactScrollViewHelper
+import com.google.android.material.R as MaterialR
 import com.google.android.material.button.MaterialButton
+import com.google.android.material.progressindicator.CircularProgressIndicatorSpec
+import com.google.android.material.progressindicator.IndeterminateDrawable
 
 /**
  * A Material 3 Expressive button. Hosts a MaterialButton, rebuilt whenever a
  * prop that the widget reads at construction changes, and reports its
- * intrinsic size to Fabric so the React view wraps its content.
+ * intrinsic size to Fabric so the React view wraps its content. It can be a
+ * toggle (a checkable MaterialButton) or open a PopupMenu anchored to itself.
  */
 class PCButtonView(context: Context) :
   FrameLayout(context),
@@ -38,25 +43,46 @@ class PCButtonView(context: Context) :
   var variant: PCExpressive.Variant = PCExpressive.Variant.FILLED
   var size: String = "small"
   var shape: String = "round"
+  var iconPosition: String = "leading" // "leading" | "trailing" | "top" | "bottom"
+  var cornerRadius: Float = -1f // dp; negative = use shape
   var interactivity: String = "enabled" // "enabled" | "disabled"
+  var loading: Boolean = false
   var spokenLabel: String = ""
   var expressive: Boolean = true // android.material: "expressive" | "m3"
+  var toggle: Boolean = false // a checkable button, controlled by `selected`
+  var controlledSelected: Boolean = false // the `selected` prop
+  /** The flattened menu items (see PCMenuSupport); empty = no menu */
+  var menuItems: List<PCMenuSupport.Item> = emptyList()
 
   // --- Styling (null / empty = Material theme default) ---
   var containerColor: Int? = null
   var foregroundColor: Int? = null
   var rippleColor: Int? = null
   var strokeColor: Int? = null
+  var disabledContainerColor: Int? = null
+  var disabledForegroundColor: Int? = null
   var labelFontFamily: String = ""
   var labelFontSize: Float = 0f
   var labelFontWeight: String = ""
   var labelFontStyle: String = ""
+  var maxFontSizeMultiplier: Float = 0f // < 1 = no cap
+
+  /** The `haptics` prop: the manager plays it on a press (a toggle's included), showMenu on a pick. */
+  var haptics: String = ""
 
   // --- Events ---
   var onPress: (() -> Unit)? = null
+  var onSelectedChange: ((selected: Boolean) -> Unit)? = null
+  var onMenuSelect: ((id: String, title: String) -> Unit)? = null
+  var onMenuOpen: (() -> Unit)? = null
+  var onMenuClose: (() -> Unit)? = null
 
   // --- UI ---
   private var button: MaterialButton? = null
+  private var popupMenu: PopupMenu? = null
+
+  /** Set while the checked state follows `selected`, so it isn't reported. */
+  private var syncingChecked = false
 
   /** Bumped on every rebuild so late image loads can't touch a stale button. */
   private var rebuildGeneration = 0
@@ -114,6 +140,22 @@ class PCButtonView(context: Context) :
     rebuildUI()
   }
 
+  fun applyIconPosition(value: String?) {
+    val newValue = when (value) {
+      "trailing", "top", "bottom" -> value
+      else -> "leading"
+    }
+    if (iconPosition == newValue) return
+    iconPosition = newValue
+    rebuildUI()
+  }
+
+  fun applyCornerRadius(value: Float) {
+    if (cornerRadius == value) return
+    cornerRadius = value
+    rebuildUI()
+  }
+
   fun applyInteractivity(value: String?) {
     val newValue = if (value == "disabled") "disabled" else "enabled"
     if (interactivity == newValue) return
@@ -121,6 +163,12 @@ class PCButtonView(context: Context) :
     button?.isEnabled = newValue == "enabled"
   }
 
+  fun applyLoading(value: Boolean) {
+    if (loading == value) return
+    loading = value
+    rebuildUI()
+  }
+
   fun applyMaterial(value: String?) {
     val parsed = PCExpressive.parseExpressive(value)
     if (expressive == parsed) return
@@ -128,6 +176,38 @@ class PCButtonView(context: Context) :
     rebuildUI()
   }
 
+  /**
+   * "" (not a toggle) | "true" | "false". The checked state follows it in
+   * [syncChecked], once all props of an update are in.
+   */
+  fun applySelected(value: String) {
+    val newToggle = value.isNotEmpty()
+    controlledSelected = value == "true"
+    if (toggle == newToggle) return
+    toggle = newToggle
+    rebuildUI()
+  }
+
+  /**
+   * Shows the controlled state. Called after every props update, including
+   * the one that follows each onSelectedChange, so a toggle the parent
+   * didn't take goes back.
+   */
+  fun syncChecked() {
+    val b = button ?: return
+    if (!b.isCheckable || b.isChecked == controlledSelected) return
+    syncingChecked = true
+    b.isChecked = controlledSelected
+    syncingChecked = false
+  }
+
+  fun applyMenu(value: List<PCMenuSupport.Item>) {
+    val hadMenu = menuItems.isNotEmpty()
+    menuItems = value
+    // A button with a menu isn't checkable
+    if (hadMenu != value.isNotEmpty()) rebuildUI()
+  }
+
   fun applySpokenLabel(value: String) {
     if (spokenLabel == value) return
     spokenLabel = value
@@ -145,6 +225,13 @@ class PCButtonView(context: Context) :
     rebuildUI()
   }
 
+  fun applyDisabledColors(container: Int?, foreground: Int?) {
+    if (disabledContainerColor == container && disabledForegroundColor == foreground) return
+    disabledContainerColor = container
+    disabledForegroundColor = foreground
+    rebuildUI()
+  }
+
   fun applyLabelStyle(fontFamily: String, fontSize: Float, fontWeight: String, fontStyle: String) {
     if (labelFontFamily == fontFamily && labelFontSize == fontSize &&
       labelFontWeight == fontWeight && labelFontStyle == fontStyle
@@ -156,6 +243,12 @@ class PCButtonView(context: Context) :
     rebuildUI()
   }
 
+  fun applyMaxFontSizeMultiplier(value: Float) {
+    if (maxFontSizeMultiplier == value) return
+    maxFontSizeMultiplier = value
+    rebuildUI()
+  }
+
   /** Called by the enclosing FloatingToolbar when its variant changes. */
   fun refreshToolbarStyle() {
     if (toolbarOverlay() != builtToolbarOverlay) rebuildUI()
@@ -183,6 +276,7 @@ class PCButtonView(context: Context) :
 
   override fun onDetachedFromWindow() {
     PCNativeTheme.removeListener(nativeThemeListener)
+    popupMenu?.dismiss()
     super.onDetachedFromWindow()
   }
 
@@ -221,19 +315,107 @@ class PCButtonView(context: Context) :
       if (iconOnly) {
         // Centre the icon instead of leaving it at the start edge
         iconGravity = MaterialButton.ICON_GRAVITY_TEXT_START
+      } else {
+        when (iconPosition) {
+          "trailing" -> iconGravity = MaterialButton.ICON_GRAVITY_TEXT_END
+          // Material has no bottom gravity, so bottom puts the icon on top too
+          "top", "bottom" -> iconGravity = MaterialButton.ICON_GRAVITY_TEXT_TOP
+        }
+      }
+      val radius = this@PCButtonView.cornerRadius // MaterialButton has its own cornerRadius
+      if (radius >= 0) {
+        // A numeric radius overrides the shape (and its press morph)
+        shapeAppearanceModel = shapeAppearanceModel.withCornerSize(PixelUtil.toPixelFromDIP(radius))
+      }
+      // A toggle is a checkable button, which flips itself on click; with a
+      // menu the click opens the menu instead
+      isCheckable = this@PCButtonView.toggle && menuItems.isEmpty()
+      isChecked = isCheckable && controlledSelected
+      addOnCheckedChangeListener { _, checked ->
+        if (!syncingChecked) onSelectedChange?.invoke(checked)
+      }
+      setOnClickListener { anchor ->
+        if (loading) return@setOnClickListener
+        if (menuItems.isNotEmpty()) showMenu(anchor) else onPress?.invoke()
       }
-      setOnClickListener { onPress?.invoke() }
     }
 
-    PCButtonSupport.applyIcon(b, icon, { generation == rebuildGeneration }) { requestLayout() }
+    // While loading the spinner replaces the icon, so a late image load is dropped
+    val showsSpinner = loading
+    PCButtonSupport.applyIcon(b, icon, { generation == rebuildGeneration && !showsSpinner }) { requestLayout() }
     PCButtonSupport.applyFont(b, labelFontFamily, labelFontSize, labelFontWeight, labelFontStyle)
-    PCButtonSupport.applyColors(b, containerColor, foregroundColor, rippleColor, strokeColor, icon.tinted)
-
+    PCButtonSupport.applyMaxFontSizeMultiplier(b, maxFontSizeMultiplier)
+    PCButtonSupport.applyColors(
+      b, containerColor, foregroundColor, rippleColor, strokeColor, icon.tinted,
+      disabledContainerColor, disabledForegroundColor
+    )
+    // Added before the spinner goes in: once measured, a TextView reads its
+    // layout params when its text changes
     addView(b, LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT))
+    if (showsSpinner) showSpinner(b)
     button = b
     requestLayout()
   }
 
+  /**
+   * Swaps the label and icon for an indeterminate circular progress indicator
+   * at the icon size, keeping the button at its idle size, and ignores presses
+   * without the disabled look.
+   */
+  private fun showSpinner(b: MaterialButton) {
+    val unspecified = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
+    b.measure(unspecified, unspecified)
+    val idleWidth = b.measuredWidth
+    val idleHeight = b.measuredHeight
+
+    val spec = CircularProgressIndicatorSpec(
+      b.context, null, 0, MaterialR.style.Widget_Material3_CircularProgressIndicator_ExtraSmall
+    )
+    if (b.iconSize > 0) spec.indicatorSize = b.iconSize
+    spec.indicatorInset = 0
+    spec.indicatorColors = intArrayOf(b.currentTextColor)
+
+    b.contentDescription = spokenLabel.ifEmpty { label }.ifEmpty { null }
+    b.text = ""
+    b.iconTint = null
+    b.icon = IndeterminateDrawable.createCircularDrawable(b.context, spec)
+    b.iconGravity = MaterialButton.ICON_GRAVITY_TEXT_START
+    b.iconPadding = 0
+    b.minWidth = idleWidth
+    b.minimumWidth = idleWidth
+    b.minHeight = idleHeight
+    b.minimumHeight = idleHeight
+    b.isClickable = false
+  }
+
+  // ---- Menu ----
+
+  /** A PopupMenu anchored to the button, built like ContextMenu's. */
+  private fun showMenu(anchor: View) {
+    if (popupMenu != null) return
+    val items = menuItems
+    val popup = PopupMenu(context, anchor)
+    popupMenu = popup
+    val hasIcons = PCMenuSupport.populate(context, popup.menu, items) { popupMenu === popup }
+    popup.setForceShowIcon(hasIcons)
+
+    popup.setOnMenuItemClickListener { menuItem ->
+      // Submenu headers open their submenu; they aren't picks
+      val item = PCMenuSupport.itemFor(menuItem, items)
+      if (item == null || !item.isAction) return@setOnMenuItemClickListener false
+      PCHaptics.perform(this, item.haptics.ifEmpty { haptics })
+      onMenuSelect?.invoke(item.id, item.title)
+      true
+    }
+    popup.setOnDismissListener {
+      if (popupMenu === popup) popupMenu = null
+      onMenuClose?.invoke()
+    }
+
+    onMenuOpen?.invoke()
+    popup.show()
+  }
+
   // ---- Layout ----
 
   private var manualLayoutPending = false

package/android/src/main/java/com/platformcomponents/PCButtonViewManager.kt

@@ -1,7 +1,9 @@
 package com.platformcomponents
 
 import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.WritableMap
 import com.facebook.react.uimanager.ReactStylesDiffMap
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.StateWrapper
@@ -9,7 +11,6 @@ import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.events.Event
-import com.facebook.react.uimanager.events.RCTEventEmitter
 import com.facebook.react.viewmanagers.PCButtonManagerDelegate
 import com.facebook.react.viewmanagers.PCButtonManagerInterface
 import com.platformcomponents.PCButtonSupport.doubleOr
@@ -49,10 +50,29 @@ class PCButtonViewManager :
 
   override fun addEventEmitters(reactContext: ThemedReactContext, view: PCButtonView) {
     val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, view.id)
+    fun dispatch(name: String, fill: WritableMap.() -> Unit = {}) {
+      dispatcher?.dispatchEvent(ButtonEvent(UIManagerHelper.getSurfaceId(view), view.id, name, fill))
+    }
 
     view.onPress = {
-      dispatcher?.dispatchEvent(PressEvent(view.id))
+      PCHaptics.perform(view, view.haptics)
+      dispatch("topButtonPress")
+    }
+    view.onSelectedChange = { selected -> dispatch("topSelectedChange") { putBoolean("selected", selected) } }
+    view.onMenuSelect = { id, title ->
+      dispatch("topMenuSelect") {
+        putString("id", id)
+        putString("title", title)
+      }
     }
+    view.onMenuOpen = { dispatch("topMenuOpen") }
+    view.onMenuClose = { dispatch("topMenuClose") }
+  }
+
+  /** The checked state follows `selected` once every prop of an update is in. */
+  override fun onAfterUpdateTransaction(view: PCButtonView) {
+    super.onAfterUpdateTransaction(view)
+    view.syncChecked()
   }
 
   override fun setLabel(view: PCButtonView, value: String?) {
@@ -76,10 +96,25 @@ class PCButtonViewManager :
     view.applyShape(value)
   }
 
+  // "leading" (default) | "trailing"
+  override fun setIconPosition(view: PCButtonView, value: String?) {
+    view.applyIconPosition(value)
+  }
+
+  // Negative = use shape
+  override fun setCornerRadius(view: PCButtonView, value: Double) {
+    view.applyCornerRadius(value.toFloat())
+  }
+
   override fun setInteractivity(view: PCButtonView, value: String?) {
     view.applyInteractivity(value)
   }
 
+  // "true" | "false"
+  override fun setLoading(view: PCButtonView, value: String?) {
+    view.applyLoading(value == "true")
+  }
+
   // Colors arrive already processed by React Native (ARGB ints)
   override fun setColor(view: PCButtonView, value: Int?) {
     view.applyColors(value, view.foregroundColor, view.rippleColor, view.strokeColor)
@@ -97,6 +132,14 @@ class PCButtonViewManager :
     view.applyColors(view.containerColor, view.foregroundColor, view.rippleColor, value)
   }
 
+  override fun setDisabledColor(view: PCButtonView, value: Int?) {
+    view.applyDisabledColors(value, view.disabledForegroundColor)
+  }
+
+  override fun setDisabledForegroundColor(view: PCButtonView, value: Int?) {
+    view.applyDisabledColors(view.disabledContainerColor, value)
+  }
+
   // labelStyle: {fontFamily, fontSize, fontWeight, fontStyle}; empty / 0 = default
   override fun setLabelStyle(view: PCButtonView, value: ReadableMap?) {
     view.applyLabelStyle(
@@ -107,20 +150,55 @@ class PCButtonViewManager :
     )
   }
 
+  // 0 (or below 1) = no cap
+  override fun setMaxFontSizeMultiplier(view: PCButtonView, value: Double) {
+    view.applyMaxFontSizeMultiplier(value.toFloat())
+  }
+
   override fun setSpokenLabel(view: PCButtonView, value: String?) {
     view.applySpokenLabel(value ?: "")
   }
 
+  // "" (none added) | "none" | "selection" | "light" | "medium" | "heavy" | "success" | "warning" | "error"
+  override fun setHaptics(view: PCButtonView, value: String?) {
+    view.haptics = PCHaptics.configure(view, value)
+  }
+
   // "expressive" (default) | "m3"
   override fun setAndroidMaterial(view: PCButtonView, value: String?) {
     view.applyMaterial(value)
   }
 
+  // "" (not a toggle) | "true" | "false"
+  override fun setSelected(view: PCButtonView, value: String?) {
+    view.applySelected(value ?: "")
+  }
+
+  // Bumped by JS after every onSelectedChange; the update it causes runs
+  // onAfterUpdateTransaction, which shows `selected` again
+  override fun setSelectedEventCount(view: PCButtonView, value: Int) {}
+
+  // menu: the flattened menu items
+  override fun setMenu(view: PCButtonView, value: ReadableArray?) {
+    view.applyMenu(PCMenuSupport.parseItems(value))
+  }
+
+  // ios: symbol effects, iOS only
+  override fun setIos(view: PCButtonView, value: ReadableMap?) {}
+
   // --- Events ---
-  private class PressEvent(surfaceId: Int) : Event<PressEvent>(surfaceId) {
-    override fun getEventName(): String = "topButtonPress"
-    override fun dispatch(rctEventEmitter: RCTEventEmitter) {
-      rctEventEmitter.receiveEvent(viewTag, eventName, Arguments.createMap())
-    }
+  private class ButtonEvent(
+    surfaceId: Int,
+    viewTag: Int,
+    private val name: String,
+    private val fill: WritableMap.() -> Unit
+  ) : Event<ButtonEvent>(surfaceId, viewTag) {
+    // Every press counts; two quick presses must not merge into one
+    override fun canCoalesce(): Boolean = false
+
+    override fun getEventName(): String = name
+
+    // Fabric reads the payload from here
+    override fun getEventData(): WritableMap = Arguments.createMap().apply(fill)
   }
 }