react-native-platform-components 1.2.0 → 1.4.0

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

@@ -0,0 +1,126 @@
+package com.platformcomponents
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReadableMap
+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.PCButtonManagerDelegate
+import com.facebook.react.viewmanagers.PCButtonManagerInterface
+import com.platformcomponents.PCButtonSupport.doubleOr
+import com.platformcomponents.PCButtonSupport.stringOr
+
+class PCButtonViewManager :
+  SimpleViewManager<PCButtonView>(),
+  PCButtonManagerInterface<PCButtonView> {
+
+  companion object {
+    private const val TAG = "PCButton"
+  }
+
+  private val delegate: ViewManagerDelegate<PCButtonView> = PCButtonManagerDelegate(this)
+
+  override fun getName(): String = "PCButton"
+
+  override fun getDelegate(): ViewManagerDelegate<PCButtonView> = delegate
+
+  override fun createViewInstance(reactContext: ThemedReactContext): PCButtonView {
+    return PCButtonView(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: PCButtonView,
+    props: ReactStylesDiffMap,
+    stateWrapper: StateWrapper
+  ): Any? {
+    view.stateWrapper = stateWrapper
+    view.reportIntrinsicSize()
+    return null
+  }
+
+  override fun addEventEmitters(reactContext: ThemedReactContext, view: PCButtonView) {
+    val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, view.id)
+
+    view.onPress = {
+      dispatcher?.dispatchEvent(PressEvent(view.id))
+    }
+  }
+
+  override fun setLabel(view: PCButtonView, value: String?) {
+    view.applyLabel(value ?: "")
+  }
+
+  // icon: {iconType, iconName, iconUri, iconScale, iconTinted}
+  override fun setIcon(view: PCButtonView, value: ReadableMap?) {
+    view.applyIcon(PCButtonSupport.parseIcon(value))
+  }
+
+  override fun setVariant(view: PCButtonView, value: String?) {
+    view.applyVariant(value)
+  }
+
+  override fun setSize(view: PCButtonView, value: String?) {
+    view.applySize(value)
+  }
+
+  override fun setShape(view: PCButtonView, value: String?) {
+    view.applyShape(value)
+  }
+
+  override fun setInteractivity(view: PCButtonView, value: String?) {
+    view.applyInteractivity(value)
+  }
+
+  // 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)
+  }
+
+  override fun setForegroundColor(view: PCButtonView, value: Int?) {
+    view.applyColors(view.containerColor, value, view.rippleColor, view.strokeColor)
+  }
+
+  override fun setAndroidRippleColor(view: PCButtonView, value: Int?) {
+    view.applyColors(view.containerColor, view.foregroundColor, value, view.strokeColor)
+  }
+
+  override fun setAndroidStrokeColor(view: PCButtonView, value: Int?) {
+    view.applyColors(view.containerColor, view.foregroundColor, view.rippleColor, value)
+  }
+
+  // labelStyle: {fontFamily, fontSize, fontWeight, fontStyle}; empty / 0 = default
+  override fun setLabelStyle(view: PCButtonView, value: ReadableMap?) {
+    view.applyLabelStyle(
+      fontFamily = value?.stringOr("fontFamily", "") ?: "",
+      fontSize = value?.doubleOr("fontSize", 0.0)?.toFloat() ?: 0f,
+      fontWeight = value?.stringOr("fontWeight", "") ?: "",
+      fontStyle = value?.stringOr("fontStyle", "") ?: ""
+    )
+  }
+
+  override fun setSpokenLabel(view: PCButtonView, value: String?) {
+    view.applySpokenLabel(value ?: "")
+  }
+
+  // "expressive" (default) | "m3"
+  override fun setAndroidMaterial(view: PCButtonView, value: String?) {
+    view.applyMaterial(value)
+  }
+
+  // --- 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())
+    }
+  }
+}

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

@@ -0,0 +1,107 @@
+package com.platformcomponents
+
+import android.content.Context
+import android.view.ContextThemeWrapper
+import androidx.appcompat.R as AppCompatR
+import com.google.android.material.R as MaterialR
+import com.google.android.material.button.MaterialButton
+
+/**
+ * Material 3 Expressive contexts and styles for Button and ButtonGroup.
+ *
+ * The Expressive look is a set of widget styles (PCExpressiveOverlay in
+ * styles.xml) layered over the host theme, plus one of Material's size overlays,
+ * which the Expressive button styles read their padding, icon size, label style
+ * and shapes from.
+ */
+object PCExpressive {
+  enum class Variant { FILLED, TONAL, OUTLINED, TEXT, ELEVATED }
+
+  fun parseVariant(value: String?): Variant =
+    when (value) {
+      "tonal" -> Variant.TONAL
+      "outlined" -> Variant.OUTLINED
+      "text" -> Variant.TEXT
+      "elevated" -> Variant.ELEVATED
+      else -> Variant.FILLED
+    }
+
+  /** "xsmall" | "small" | "medium" | "large" | "xlarge" */
+  fun parseSize(value: String?): String =
+    when (value) {
+      "xsmall", "medium", "large", "xlarge" -> value
+      else -> "small"
+    }
+
+  /** "round" | "square"; the spec's empty string is the Material default, round. */
+  fun parseShape(value: String?): String = if (value == "square") "square" else "round"
+
+  /**
+   * The theme overlay choosing the buttons' size and shape (PCSize.* in
+   * styles.xml): it sets the size overlay attributes the library's button
+   * styles read, for text buttons and for icon-only buttons, which use
+   * Material's square icon button sizes.
+   */
+  fun sizeOverlay(size: String, shape: String): Int {
+    val square = shape == "square"
+    return when (size) {
+      "xsmall" -> if (square) R.style.PCSize_Xsmall_Square else R.style.PCSize_Xsmall
+      "medium" -> if (square) R.style.PCSize_Medium_Square else R.style.PCSize_Medium
+      "large" -> if (square) R.style.PCSize_Large_Square else R.style.PCSize_Large
+      "xlarge" -> if (square) R.style.PCSize_Xlarge_Square else R.style.PCSize_Xlarge
+      else -> if (square) R.style.PCSize_Small_Square else R.style.PCSize_Small
+    }
+  }
+
+  /** The theme attribute naming the widget style for a variant. */
+  fun styleAttr(variant: Variant, iconOnly: Boolean): Int =
+    if (iconOnly) {
+      when (variant) {
+        Variant.FILLED -> MaterialR.attr.materialIconButtonFilledStyle
+        Variant.TONAL -> MaterialR.attr.materialIconButtonFilledTonalStyle
+        Variant.OUTLINED -> MaterialR.attr.materialIconButtonOutlinedStyle
+        Variant.TEXT, Variant.ELEVATED -> MaterialR.attr.materialIconButtonStyle
+      }
+    } else {
+      when (variant) {
+        Variant.FILLED -> MaterialR.attr.materialButtonStyle
+        Variant.TONAL -> MaterialR.attr.materialButtonTonalStyle
+        Variant.OUTLINED -> MaterialR.attr.materialButtonOutlinedStyle
+        Variant.TEXT -> AppCompatR.attr.borderlessButtonStyle
+        Variant.ELEVATED -> MaterialR.attr.materialButtonElevatedStyle
+      }
+    }
+
+  /** "expressive" (default) | "m3" */
+  fun parseExpressive(value: String?): Boolean = value != "m3"
+
+  /**
+   * Creates a button. [base] is a Material 3 context (see
+   * PCThemeSupport.materialContext); [toolbarOverlay] is the enclosing
+   * FloatingToolbar's button overlay, or 0 outside a toolbar.
+   *
+   * With [expressive] the Material 3 Expressive styles apply, sized by the
+   * size overlay; otherwise the theme's classic Material 3 button styles,
+   * which have one size and shape. The toolbar overlay replaces the filled,
+   * text and standard icon button styles with the toolbar's, as it does for
+   * XML children of a FloatingToolbarLayout; the toolbar itself is an
+   * Expressive component, so its buttons always are.
+   */
+  fun createButton(
+    base: Context,
+    variant: Variant,
+    size: String,
+    shape: String,
+    iconOnly: Boolean,
+    toolbarOverlay: Int,
+    expressive: Boolean = true
+  ): MaterialButton {
+    if (!expressive && toolbarOverlay == 0) {
+      return MaterialButton(base, null, styleAttr(variant, iconOnly))
+    }
+    val overlaid = ContextThemeWrapper(base, R.style.PCExpressiveOverlay)
+    val themed = if (toolbarOverlay != 0) ContextThemeWrapper(overlaid, toolbarOverlay) else overlaid
+    val sized = ContextThemeWrapper(themed, sizeOverlay(size, shape))
+    return MaterialButton(sized, null, styleAttr(variant, iconOnly))
+  }
+}

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

@@ -0,0 +1,115 @@
+package com.platformcomponents
+
+import android.content.Context
+import android.content.res.ColorStateList
+import android.graphics.Color
+import androidx.core.content.res.ResourcesCompat
+import com.google.android.material.R as MaterialR
+import com.google.android.material.color.MaterialColors
+import com.google.android.material.floatingtoolbar.FloatingToolbarLayout
+import com.google.android.material.shape.MaterialShapeDrawable
+
+/**
+ * A Material 3 floating toolbar. The Material container (shape, elevation,
+ * color) hosts React children, which Fabric lays out itself.
+ */
+class PCFloatingToolbarView(context: Context) :
+  FloatingToolbarLayout(
+    // Material widgets need a Material theme; fall back to Material 3 defaults instead of crashing.
+    PCThemeSupport.materialContext(context, "FloatingToolbar"),
+    null,
+    0,
+    R.style.PCFloatingToolbar
+  ) {
+
+  companion object {
+    private const val TAG = "PCFloatingToolbar"
+  }
+
+  // --- Props ---
+  var variant: String = "standard" // "standard" | "vibrant"
+  var color: Int? = null
+
+  /** The button overlay for Buttons inside this toolbar (see PCButtonView). */
+  val buttonOverlay: Int
+    get() = if (variant == "vibrant") R.style.PCToolbarOverlay_Vibrant else R.style.PCToolbarOverlay
+
+  // --- Native theme ---
+  private val nativeThemeListener = PCNativeTheme.Listener {
+    ResourcesCompat.clearCachesForTheme(context.theme)
+    applyColors()
+  }
+
+  init {
+    clipChildren = false
+    clipToPadding = false
+    applyColors()
+  }
+
+  // ---- Public apply* (called by manager) ----
+
+  fun applyVariant(value: String?) {
+    val parsed = if (value == "vibrant") "vibrant" else "standard"
+    if (variant == parsed) return
+    variant = parsed
+    applyColors()
+    // Buttons inside take the toolbar's button styles
+    for (i in 0 until childCount) {
+      (getChildAt(i) as? PCButtonView)?.refreshToolbarStyle()
+    }
+  }
+
+  fun applyColor(value: Int?) {
+    if (color == value) return
+    color = value
+    applyColors()
+  }
+
+  /**
+   * A `backgroundColor` style would replace the Material shape; route it into
+   * the color instead. React Native resets it with transparent.
+   */
+  override fun setBackgroundColor(color: Int) {
+    applyColor(if (color == Color.TRANSPARENT) null else color)
+  }
+
+  private fun applyColors() {
+    val resolved = color ?: MaterialColors.getColor(
+      this,
+      if (variant == "vibrant") MaterialR.attr.colorPrimaryContainer else MaterialR.attr.colorSurfaceContainer,
+      Color.TRANSPARENT
+    )
+    val shape = background as? MaterialShapeDrawable
+    if (shape != null) {
+      shape.fillColor = ColorStateList.valueOf(resolved)
+    } else {
+      backgroundTintList = ColorStateList.valueOf(resolved)
+    }
+  }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    PCNativeTheme.addListener(nativeThemeListener)
+    PCNativeTheme.attach(context)
+  }
+
+  override fun onDetachedFromWindow() {
+    PCNativeTheme.removeListener(nativeThemeListener)
+    super.onDetachedFromWindow()
+  }
+
+  // ---- Layout ----
+  // Fabric sizes this view and positions its children; FrameLayout must not
+  // re-measure or re-position them against its own padding and gravity.
+
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    setMeasuredDimension(
+      MeasureSpec.getSize(widthMeasureSpec),
+      MeasureSpec.getSize(heightMeasureSpec)
+    )
+  }
+
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+    // No-op: Fabric lays out the children
+  }
+}

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

@@ -0,0 +1,65 @@
+package com.platformcomponents
+
+import android.view.View
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.PCFloatingToolbarManagerDelegate
+import com.facebook.react.viewmanagers.PCFloatingToolbarManagerInterface
+import com.platformcomponents.PCButtonSupport.stringOr
+
+/**
+ * Android ViewManager for FloatingToolbar. Uses ViewGroupManager since the
+ * toolbar hosts React children.
+ */
+class PCFloatingToolbarViewManager :
+  ViewGroupManager<PCFloatingToolbarView>(),
+  PCFloatingToolbarManagerInterface<PCFloatingToolbarView> {
+
+  companion object {
+    private const val TAG = "PCFloatingToolbar"
+  }
+
+  private val delegate: ViewManagerDelegate<PCFloatingToolbarView> =
+    PCFloatingToolbarManagerDelegate(this)
+
+  override fun getName(): String = "PCFloatingToolbar"
+
+  override fun getDelegate(): ViewManagerDelegate<PCFloatingToolbarView> = delegate
+
+  override fun createViewInstance(reactContext: ThemedReactContext): PCFloatingToolbarView {
+    return PCFloatingToolbarView(reactContext)
+  }
+
+  // Colors arrive already processed by React Native (ARGB ints)
+  override fun setColor(view: PCFloatingToolbarView, value: Int?) {
+    view.applyColor(value)
+  }
+
+  override fun setIos(view: PCFloatingToolbarView, value: ReadableMap?) {
+    // iOS props are ignored on Android
+  }
+
+  // android: {variant}
+  override fun setAndroid(view: PCFloatingToolbarView, value: ReadableMap?) {
+    view.applyVariant(value?.stringOr("variant", "standard"))
+  }
+
+  // --- ViewGroupManager child management ---
+  override fun addView(parent: PCFloatingToolbarView, child: View, index: Int) {
+    parent.addView(child, index)
+  }
+
+  override fun removeViewAt(parent: PCFloatingToolbarView, index: Int) {
+    parent.removeViewAt(index)
+  }
+
+  override fun getChildCount(parent: PCFloatingToolbarView): Int {
+    return parent.childCount
+  }
+
+  override fun getChildAt(parent: PCFloatingToolbarView, index: Int): View? {
+    return parent.getChildAt(index)
+  }
+}

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

@@ -35,6 +35,9 @@ class PCNativeThemeModule(reactContext: ReactApplicationContext) :
     }
   }
 
+  /** Liquid Glass is an iOS effect; Android renders the fallback View. */
+  override fun isLiquidGlassSupported(): Boolean = false
+
   companion object {
     const val NAME = "PlatformComponentsTheme"
     private const val TAG = "PlatformComponents"

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

@@ -6,6 +6,7 @@ import android.graphics.Color
 import android.graphics.drawable.BitmapDrawable
 import android.text.TextUtils
 import android.util.TypedValue
+import android.view.ContextThemeWrapper
 import android.view.View
 import android.widget.FrameLayout
 import android.widget.LinearLayout
@@ -66,6 +67,8 @@ class PCSegmentedControlView(context: Context) :
   var labelVisibility: String = "auto" // "auto" | "labeled" | "unlabeled"
   // Matches iOS, where a UISegmentedControl selection cannot be cleared by tapping.
   var selectionRequired: Boolean = true
+  // android.material: "expressive" (the Material 3 Expressive connected buttons) | "m3"
+  var expressive: Boolean = true
 
   // --- Styling (null / empty = Material theme default) ---
   var selectedSegmentColor: Int? = null
@@ -140,9 +143,10 @@ class PCSegmentedControlView(context: Context) :
     rebuildUI()
   }
 
-  fun applyAndroidProps(required: Boolean) {
-    if (selectionRequired != required) {
+  fun applyAndroidProps(required: Boolean, expressiveStyle: Boolean) {
+    if (selectionRequired != required || expressive != expressiveStyle) {
       selectionRequired = required
+      expressive = expressiveStyle
       rebuildUI()
     }
   }
@@ -224,7 +228,11 @@ class PCSegmentedControlView(context: Context) :
     val generation = rebuildGeneration
 
     // Material widgets need a Material theme; fall back to Material 3 defaults instead of crashing.
-    val themedContext = PCThemeSupport.materialContext(context, "SegmentedControl")
+    val materialContext = PCThemeSupport.materialContext(context, "SegmentedControl")
+    // Expressive: the connected button group styles (2dp gaps, small inner
+    // corners, the selected segment a pill) in place of the classic segmented buttons.
+    val themedContext =
+      if (expressive) ContextThemeWrapper(materialContext, R.style.PCExpressiveOverlay) else materialContext
     val group = MaterialButtonToggleGroup(themedContext).apply {
       layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
       isSingleSelection = true
@@ -319,13 +327,13 @@ class PCSegmentedControlView(context: Context) :
 
     when (segment.iconType) {
       "drawable" -> {
-        button.icon = ResourceDrawableIdHelper.getResourceDrawable(context, segment.iconName)
+        button.icon = ResourceDrawableIdHelper.instance.getResourceDrawable(context, segment.iconName)
       }
       "image" -> {
         val uri = segment.iconUri
         val isResourceName = !uri.contains(':')
         if (isResourceName) {
-          button.icon = ResourceDrawableIdHelper.getResourceDrawable(context, uri)
+          button.icon = ResourceDrawableIdHelper.instance.getResourceDrawable(context, uri)
         } else {
           PCImageLoader.load(context, uri, segment.iconScale) { bitmap ->
             if (bitmap == null || generation != rebuildGeneration) return@load

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

@@ -146,7 +146,12 @@ class PCSegmentedControlViewManager :
     } else {
       true
     }
-    view.applyAndroidProps(selectionRequired)
+    // Spec sentinel: "expressive" (default) | "m3"
+    val expressive = !(
+      value != null && value.hasKey("material") && !value.isNull("material") &&
+        value.getString("material") == "m3"
+      )
+    view.applyAndroidProps(selectionRequired, expressive)
   }
 
   override fun setIos(view: PCSegmentedControlView, value: ReadableMap?) {