react-native-platform-components 1.3.0 → 1.5.0

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

@@ -0,0 +1,241 @@
+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
+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.PCButtonGroupManagerDelegate
+import com.facebook.react.viewmanagers.PCButtonGroupManagerInterface
+import com.platformcomponents.PCButtonSupport.doubleOr
+import com.platformcomponents.PCButtonSupport.stringOr
+
+class PCButtonGroupViewManager :
+  SimpleViewManager<PCButtonGroupView>(),
+  PCButtonGroupManagerInterface<PCButtonGroupView> {
+
+  companion object {
+    private const val TAG = "PCButtonGroup"
+  }
+
+  private val delegate: ViewManagerDelegate<PCButtonGroupView> =
+    PCButtonGroupManagerDelegate(this)
+
+  override fun getName(): String = "PCButtonGroup"
+
+  override fun getDelegate(): ViewManagerDelegate<PCButtonGroupView> = delegate
+
+  override fun createViewInstance(reactContext: ThemedReactContext): PCButtonGroupView {
+    return PCButtonGroupView(reactContext)
+  }
+
+  /**
+   * Pass the StateWrapper to the view so it can update Fabric state with its
+   * natural size, and report it right away so the first layout already fits.
+   */
+  override fun updateState(
+    view: PCButtonGroupView,
+    props: ReactStylesDiffMap,
+    stateWrapper: StateWrapper
+  ): Any? {
+    view.stateWrapper = stateWrapper
+    view.reportIntrinsicSize()
+    return null
+  }
+
+  override fun addEventEmitters(reactContext: ThemedReactContext, view: PCButtonGroupView) {
+    val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, view.id)
+
+    view.onPress = { index, value ->
+      PCHaptics.perform(view, view.haptics)
+      dispatcher?.dispatchEvent(PressEvent(view.id, index, value))
+    }
+    view.onSelectionChange = { values ->
+      dispatcher?.dispatchEvent(SelectionEvent(view.id, values))
+    }
+    fun dispatch(name: String, fill: WritableMap.() -> Unit = {}) {
+      dispatcher?.dispatchEvent(MenuEvent(UIManagerHelper.getSurfaceId(view), view.id, name, fill))
+    }
+    view.onMenuSelect = { id, title ->
+      dispatch("topMenuSelect") {
+        putString("id", id)
+        putString("title", title)
+      }
+    }
+    view.onMenuOpen = { dispatch("topMenuOpen") }
+    view.onMenuClose = { dispatch("topMenuClose") }
+  }
+
+  // buttons: array of {label, value, disabled, iconType, iconName, iconUri,
+  //                    iconScale, iconTinted, accessibilityLabel}
+  override fun setButtons(view: PCButtonGroupView, value: ReadableArray?) {
+    val out = ArrayList<PCButtonGroupView.Item>()
+    if (value != null) {
+      for (i in 0 until value.size()) {
+        val m = value.getMap(i) ?: continue
+        out.add(
+          PCButtonGroupView.Item(
+            label = m.stringOr("label", ""),
+            value = m.stringOr("value", ""),
+            disabled = m.stringOr("disabled", "enabled") == "disabled",
+            icon = PCButtonSupport.parseIcon(m),
+            accessibilityLabel = m.stringOr("accessibilityLabel", "")
+          )
+        )
+      }
+    }
+    view.applyItems(out)
+  }
+
+  override fun setVariant(view: PCButtonGroupView, value: String?) {
+    view.applyVariant(value)
+  }
+
+  override fun setSize(view: PCButtonGroupView, value: String?) {
+    view.applySize(value)
+  }
+
+  override fun setShape(view: PCButtonGroupView, value: String?) {
+    view.applyShape(value)
+  }
+
+  // Spec sentinel: "true" | "false"
+  override fun setConnected(view: PCButtonGroupView, value: String?) {
+    view.applyConnected(value == "true")
+  }
+
+  // Negative means the style's default spacing
+  override fun setSpacing(view: PCButtonGroupView, value: Double) {
+    view.applySpacing(value.toFloat())
+  }
+
+  override fun setSelection(view: PCButtonGroupView, value: String?) {
+    view.applySelection(value)
+  }
+
+  override fun setSelectedValues(view: PCButtonGroupView, value: ReadableArray?) {
+    val out = ArrayList<String>()
+    if (value != null) {
+      for (i in 0 until value.size()) {
+        value.getString(i)?.let { out.add(it) }
+      }
+    }
+    view.applySelectedValues(out)
+  }
+
+  override fun setSelectionRequired(view: PCButtonGroupView, value: String?) {
+    view.applySelectionRequired(value == "true")
+  }
+
+  override fun setInteractivity(view: PCButtonGroupView, value: String?) {
+    view.applyInteractivity(value)
+  }
+
+  // Colors arrive already processed by React Native (ARGB ints)
+  override fun setColor(view: PCButtonGroupView, value: Int?) {
+    view.applyColors(value, view.foregroundColor, view.rippleColor, view.strokeColor)
+  }
+
+  override fun setForegroundColor(view: PCButtonGroupView, value: Int?) {
+    view.applyColors(view.containerColor, value, view.rippleColor, view.strokeColor)
+  }
+
+  override fun setAndroidRippleColor(view: PCButtonGroupView, value: Int?) {
+    view.applyColors(view.containerColor, view.foregroundColor, value, view.strokeColor)
+  }
+
+  override fun setAndroidStrokeColor(view: PCButtonGroupView, value: Int?) {
+    view.applyColors(view.containerColor, view.foregroundColor, view.rippleColor, value)
+  }
+
+  // labelStyle: {fontFamily, fontSize, fontWeight, fontStyle}; empty / 0 = default
+  override fun setLabelStyle(view: PCButtonGroupView, value: ReadableMap?) {
+    view.applyLabelStyle(
+      fontFamily = value?.stringOr("fontFamily", "") ?: "",
+      fontSize = value?.doubleOr("fontSize", 0.0)?.toFloat() ?: 0f,
+      fontWeight = value?.stringOr("fontWeight", "") ?: "",
+      fontStyle = value?.stringOr("fontStyle", "") ?: ""
+    )
+  }
+
+  // "none" | "menu" | "wrap"
+  override fun setOverflow(view: PCButtonGroupView, value: String?) {
+    view.applyOverflow(value)
+  }
+
+  // "true" | "false": MaterialSplitButton
+  override fun setSplit(view: PCButtonGroupView, value: String?) {
+    view.applySplit(value == "true")
+  }
+
+  // menu: the split button's flattened menu items
+  override fun setMenu(view: PCButtonGroupView, value: ReadableArray?) {
+    view.applyMenu(PCMenuSupport.parseItems(value))
+  }
+
+  override fun setMenuAccessibilityLabel(view: PCButtonGroupView, value: String?) {
+    view.applyMenuAccessibilityLabel(value ?: "")
+  }
+
+  // "" (none added) | "none" | "selection" | "light" | "medium" | "heavy" | "success" | "warning" | "error"
+  override fun setHaptics(view: PCButtonGroupView, value: String?) {
+    view.haptics = PCHaptics.configure(view, value)
+  }
+
+  // android: {material}
+  override fun setAndroid(view: PCButtonGroupView, value: ReadableMap?) {
+    view.applyMaterial(value?.stringOr("material", "expressive"))
+  }
+
+  // --- Events ---
+  private class PressEvent(
+    surfaceId: Int,
+    private val index: Int,
+    private val value: String
+  ) : Event<PressEvent>(surfaceId) {
+    override fun getEventName(): String = "topButtonPress"
+    override fun dispatch(rctEventEmitter: RCTEventEmitter) {
+      val payload = Arguments.createMap().apply {
+        putInt("index", index)
+        putString("value", value)
+      }
+      rctEventEmitter.receiveEvent(viewTag, eventName, payload)
+    }
+  }
+
+  private class MenuEvent(
+    surfaceId: Int,
+    viewTag: Int,
+    private val name: String,
+    private val fill: WritableMap.() -> Unit
+  ) : Event<MenuEvent>(surfaceId, viewTag) {
+    override fun canCoalesce(): Boolean = false
+
+    override fun getEventName(): String = name
+
+    // Fabric reads the payload from here
+    override fun getEventData(): WritableMap = Arguments.createMap().apply(fill)
+  }
+
+  private class SelectionEvent(
+    surfaceId: Int,
+    private val values: List<String>
+  ) : Event<SelectionEvent>(surfaceId) {
+    override fun getEventName(): String = "topGroupSelectionChange"
+    override fun dispatch(rctEventEmitter: RCTEventEmitter) {
+      val array = Arguments.createArray()
+      values.forEach { array.pushString(it) }
+      val payload = Arguments.createMap().apply {
+        putArray("values", array)
+      }
+      rctEventEmitter.receiveEvent(viewTag, eventName, payload)
+    }
+  }
+}

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

@@ -0,0 +1,159 @@
+package com.platformcomponents
+
+import android.content.res.ColorStateList
+import android.graphics.Color
+import android.graphics.drawable.BitmapDrawable
+import android.os.Build
+import android.util.TypedValue
+import android.widget.TextView
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper
+import com.facebook.react.views.text.ReactTypefaceUtils
+import com.google.android.material.button.MaterialButton
+
+/** Icon, font and color handling shared by Button and ButtonGroup. */
+object PCButtonSupport {
+  data class Icon(
+    /** "", "sfSymbol" (ignored on Android), "drawable" or "image" */
+    val type: String,
+    val name: String,
+    val uri: String,
+    val scale: Float,
+    val tinted: Boolean,
+    val request: String = ""
+  ) {
+    val isPresent: Boolean get() = type == "drawable" || type == "image"
+  }
+
+  val NO_ICON = Icon("", "", "", 1f, true)
+
+  fun ReadableMap.stringOr(key: String, fallback: String): String =
+    if (hasKey(key) && !isNull(key)) getString(key) ?: fallback else fallback
+
+  fun ReadableMap.doubleOr(key: String, fallback: Double): Double =
+    if (hasKey(key) && !isNull(key)) getDouble(key) else fallback
+
+  /** Reads the flat icon fields (iconType, iconName, ...) from a props map. */
+  fun parseIcon(map: ReadableMap?): Icon {
+    if (map == null) return NO_ICON
+    val scale = map.doubleOr("iconScale", 1.0)
+    return Icon(
+      type = map.stringOr("iconType", ""),
+      name = map.stringOr("iconName", ""),
+      uri = map.stringOr("iconUri", ""),
+      scale = if (scale > 0) scale.toFloat() else 1f,
+      tinted = map.stringOr("iconTinted", "true") != "false",
+      request = map.stringOr("iconRequest", "")
+    )
+  }
+
+  /**
+   * Resolves a button's icon. Drawable names and release-bundled assets (which
+   * React Native ships as drawable resources) resolve synchronously; other image
+   * URIs load in the background and are applied when they arrive, if
+   * [isCurrent] still holds.
+   */
+  fun applyIcon(button: MaterialButton, icon: Icon, isCurrent: () -> Boolean, onLoaded: () -> Unit) {
+    if (!icon.tinted) {
+      button.iconTint = null
+    }
+    val context = button.context
+    when (icon.type) {
+      "drawable" -> {
+        button.icon = ResourceDrawableIdHelper.instance.getResourceDrawable(context, icon.name)
+      }
+      "image" -> {
+        val uri = icon.uri
+        if (!uri.contains(':')) {
+          button.icon = ResourceDrawableIdHelper.instance.getResourceDrawable(context, uri)
+        } else {
+          PCImageLoader.load(context, uri, icon.scale, icon.request) { bitmap ->
+            if (bitmap == null || !isCurrent()) return@load
+            button.icon = BitmapDrawable(context.resources, bitmap)
+            onLoaded()
+          }
+        }
+      }
+    }
+  }
+
+  /** Applies the label font on top of the style's; empty / 0 keep the default. */
+  fun applyFont(button: TextView, family: String, size: Float, weight: String, style: String) {
+    if (size > 0) {
+      button.setTextSize(TypedValue.COMPLEX_UNIT_SP, size)
+    }
+    if (family.isNotEmpty() || weight.isNotEmpty() || style.isNotEmpty()) {
+      button.typeface = ReactTypefaceUtils.applyStyles(
+        button.typeface,
+        ReactTypefaceUtils.parseFontStyle(style.ifEmpty { null }),
+        ReactTypefaceUtils.parseFontWeight(weight.ifEmpty { null }),
+        family.ifEmpty { null },
+        button.context.assets
+      )
+    }
+  }
+
+  /**
+   * Caps the label's font scaling at [maxMultiplier] times its unscaled size,
+   * as React Native's maxFontSizeMultiplier does; below 1 means no cap. Call
+   * after the font size is set.
+   */
+  fun applyMaxFontSizeMultiplier(button: TextView, maxMultiplier: Float) {
+    if (maxMultiplier < 1f) return
+    val metrics = button.resources.displayMetrics
+    // The sp size back from pixels; Android 14+ scales large text non-linearly
+    val sp = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.UPSIDE_DOWN_CAKE) {
+      TypedValue.deriveDimension(TypedValue.COMPLEX_UNIT_SP, button.textSize, metrics)
+    } else {
+      button.textSize / (metrics.density * button.resources.configuration.fontScale)
+    }
+    val cap = sp * metrics.density * maxMultiplier
+    if (button.textSize > cap) {
+      button.setTextSize(TypedValue.COMPLEX_UNIT_PX, cap)
+    }
+  }
+
+  /**
+   * Applies the color props on top of the style's colors. Unset disabled
+   * colors keep the style's; unset enabled colors keep the style's too.
+   */
+  fun applyColors(
+    button: MaterialButton,
+    container: Int?,
+    foreground: Int?,
+    ripple: Int?,
+    stroke: Int?,
+    iconTinted: Boolean,
+    disabledContainer: Int? = null,
+    disabledForeground: Int? = null
+  ) {
+    val disabledState = intArrayOf(-android.R.attr.state_enabled)
+    val enabledState = intArrayOf(android.R.attr.state_enabled)
+    val states = arrayOf(disabledState, intArrayOf())
+
+    if (container != null || disabledContainer != null) {
+      val theme = button.backgroundTintList
+      val disabled = disabledContainer
+        ?: theme?.getColorForState(disabledState, theme.defaultColor)
+        ?: Color.TRANSPARENT
+      val enabled = container
+        ?: theme?.getColorForState(enabledState, theme.defaultColor)
+        ?: Color.TRANSPARENT
+      button.backgroundTintList = ColorStateList(states, intArrayOf(disabled, enabled))
+    }
+
+    if (foreground != null || disabledForeground != null) {
+      val theme = button.textColors
+      val disabled = disabledForeground ?: theme.getColorForState(disabledState, theme.defaultColor)
+      val enabled = foreground ?: theme.getColorForState(enabledState, theme.defaultColor)
+      val tint = ColorStateList(states, intArrayOf(disabled, enabled))
+      button.setTextColor(tint)
+      if (iconTinted) {
+        button.iconTint = tint
+      }
+    }
+
+    ripple?.let { button.rippleColor = ColorStateList.valueOf(it) }
+    stroke?.let { button.strokeColor = ColorStateList.valueOf(it) }
+  }
+}