react-native-platform-components 0.6.1 → 0.8.0

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

@@ -0,0 +1,241 @@
+package com.platformcomponents
+
+import android.content.Context
+import android.text.TextUtils
+import android.view.View
+import android.widget.FrameLayout
+import com.facebook.react.bridge.WritableNativeMap
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.views.scroll.ReactScrollViewHelper
+import com.google.android.material.button.MaterialButton
+import com.google.android.material.button.MaterialButtonToggleGroup
+
+class PCSegmentedControlView(context: Context) : FrameLayout(context), ReactScrollViewHelper.HasStateWrapper {
+
+  data class Segment(
+    val label: String,
+    val value: String,
+    val disabled: Boolean,
+    val icon: String
+  )
+
+  companion object {
+    private const val TAG = "PCSegmentedControl"
+  }
+
+  // --- State Wrapper for Fabric state updates ---
+  override var stateWrapper: StateWrapper? = null
+
+  private var lastReportedWidth: Float = 0f
+  private var lastReportedHeight: Float = 0f
+
+  // --- Props ---
+  var segments: List<Segment> = emptyList()
+  var selectedValue: String = "" // sentinel for none
+  var interactivity: String = "enabled" // "enabled" | "disabled"
+  var selectionRequired: Boolean = false
+
+  // --- Events ---
+  var onSelect: ((index: Int, value: String) -> Unit)? = null
+
+  // --- UI ---
+  private var toggleGroup: MaterialButtonToggleGroup? = null
+  private val buttonIdToSegment: MutableMap<Int, Segment> = mutableMapOf()
+  private var suppressCallbacks = false
+
+  init {
+    minimumHeight = (PCConstants.MIN_TOUCH_TARGET_HEIGHT_DP * resources.displayMetrics.density).toInt()
+    rebuildUI()
+  }
+
+  // ---- Public apply* (called by manager) ----
+
+  fun applySegments(newSegments: List<Segment>) {
+    if (segments == newSegments) return
+    segments = newSegments
+    rebuildUI()
+  }
+
+  fun applySelectedValue(value: String) {
+    if (selectedValue == value) return
+    selectedValue = value
+    updateSelection()
+  }
+
+  fun applyInteractivity(value: String?) {
+    val newValue = if (value == "disabled") "disabled" else "enabled"
+    if (interactivity == newValue) return
+    interactivity = newValue
+    updateEnabled()
+  }
+
+  fun applyAndroidProps(required: Boolean) {
+    if (selectionRequired != required) {
+      selectionRequired = required
+      rebuildUI()
+    }
+  }
+
+  // ---- UI Building ----
+
+  private fun rebuildUI() {
+    removeAllViews()
+    buttonIdToSegment.clear()
+
+    val group = MaterialButtonToggleGroup(context).apply {
+      layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
+      isSingleSelection = true
+      isSelectionRequired = selectionRequired
+    }
+
+    // Calculate if we need compact mode (many segments or long labels)
+    val totalLabelLength = segments.sumOf { it.label.length }
+    val useCompactMode = segments.size > 3 || totalLabelLength > 20
+
+    for ((index, segment) in segments.withIndex()) {
+      val button = MaterialButton(context, null, com.google.android.material.R.attr.materialButtonOutlinedStyle).apply {
+        id = View.generateViewId()
+        text = segment.label
+        isAllCaps = false  // Preserve original text casing
+        contentDescription = segment.label  // For accessibility and Detox matching
+        isEnabled = !segment.disabled && interactivity == "enabled"
+
+        // Enable text truncation with ellipsis when space is limited
+        ellipsize = TextUtils.TruncateAt.END
+        maxLines = 1
+
+        // Reduce horizontal padding in compact mode to fit more content
+        if (useCompactMode) {
+          val compactPadding = (8 * resources.displayMetrics.density).toInt()
+          setPaddingRelative(compactPadding, paddingTop, compactPadding, paddingBottom)
+          iconPadding = (4 * resources.displayMetrics.density).toInt()
+        }
+
+        // Set icon if available
+        if (segment.icon.isNotEmpty()) {
+          val resId = context.resources.getIdentifier(
+            segment.icon, "drawable", context.packageName
+          )
+          if (resId != 0) {
+            setIconResource(resId)
+          }
+        }
+
+        // Handle click to trigger selection (needed for Detox taps)
+        setOnClickListener {
+          if (!suppressCallbacks && isEnabled) {
+            group.check(id)
+          }
+        }
+      }
+
+      buttonIdToSegment[button.id] = segment
+      group.addView(button)
+    }
+
+    group.addOnButtonCheckedListener { _, checkedId, isChecked ->
+      if (suppressCallbacks) return@addOnButtonCheckedListener
+      if (!isChecked) return@addOnButtonCheckedListener
+
+      val segment = buttonIdToSegment[checkedId] ?: return@addOnButtonCheckedListener
+      val index = segments.indexOf(segment)
+      if (index >= 0) {
+        onSelect?.invoke(index, segment.value)
+      }
+    }
+
+    addView(group)
+    toggleGroup = group
+
+    updateSelection()
+    updateEnabled()
+    requestLayout()
+  }
+
+  private fun updateSelection() {
+    suppressCallbacks = true
+    val group = toggleGroup ?: return
+
+    if (selectedValue.isEmpty()) {
+      group.clearChecked()
+    } else {
+      for ((id, segment) in buttonIdToSegment) {
+        if (segment.value == selectedValue) {
+          group.check(id)
+          break
+        }
+      }
+    }
+    suppressCallbacks = false
+  }
+
+  private fun updateEnabled() {
+    val enabled = interactivity == "enabled"
+    alpha = if (enabled) 1f else 0.5f
+
+    val group = toggleGroup ?: return
+    for (i in 0 until group.childCount) {
+      val button = group.getChildAt(i) as? MaterialButton ?: continue
+      val segment = buttonIdToSegment[button.id] ?: continue
+      button.isEnabled = enabled && !segment.disabled
+    }
+  }
+
+  // ---- Measurement ----
+
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    // Measure children with UNSPECIFIED height to get intrinsic size
+    val unconstrainedHeightSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
+    super.onMeasure(widthMeasureSpec, unconstrainedHeightSpec)
+
+    // Get the intrinsic height from children
+    val childHeight = if (toggleGroup != null) {
+      toggleGroup!!.measuredHeight
+    } else {
+      0
+    }
+
+    // Use the maximum of child height and minimum touch target
+    val intrinsicHeight = childHeight.coerceAtLeast(minimumHeight)
+
+    // IMPORTANT: Always use intrinsic height regardless of Yoga constraints.
+    // Fabric may give us 0 height initially before state is updated.
+    // The state update from onLayout will trigger proper re-layout.
+    setMeasuredDimension(measuredWidth, intrinsicHeight)
+  }
+
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+    super.onLayout(changed, left, top, right, bottom)
+    updateFrameSizeState()
+  }
+
+  /**
+   * Update Fabric state with the measured frame size.
+   * This allows the shadow node to use actual measured dimensions for Yoga layout.
+   */
+  private fun updateFrameSizeState() {
+    val wrapper = stateWrapper ?: return
+    val group = toggleGroup ?: return
+
+    // Measure the toggle group with exact width and unspecified height
+    val widthSpec = MeasureSpec.makeMeasureSpec(width.coerceAtLeast(1), MeasureSpec.EXACTLY)
+    val heightSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
+    group.measure(widthSpec, heightSpec)
+
+    val widthDp = PixelUtil.toDIPFromPixel(width.toFloat())
+    val heightDp = PixelUtil.toDIPFromPixel(group.measuredHeight.toFloat())
+
+    // Only update if changed
+    if (widthDp != lastReportedWidth || heightDp != lastReportedHeight) {
+      lastReportedWidth = widthDp
+      lastReportedHeight = heightDp
+
+      val stateData = WritableNativeMap().apply {
+        putDouble("width", widthDp.toDouble())
+        putDouble("height", heightDp.toDouble())
+      }
+      wrapper.updateState(stateData)
+    }
+  }
+}

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

@@ -0,0 +1,105 @@
+package com.platformcomponents
+
+import com.facebook.react.bridge.ReadableArray
+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.ViewManagerDelegate
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.uimanager.events.RCTEventEmitter
+import com.facebook.react.viewmanagers.PCSegmentedControlManagerDelegate
+import com.facebook.react.viewmanagers.PCSegmentedControlManagerInterface
+
+class PCSegmentedControlViewManager :
+  SimpleViewManager<PCSegmentedControlView>(),
+  PCSegmentedControlManagerInterface<PCSegmentedControlView> {
+
+  companion object {
+    private const val TAG = "PCSegmentedControl"
+  }
+
+  private val delegate: ViewManagerDelegate<PCSegmentedControlView> =
+    PCSegmentedControlManagerDelegate(this)
+
+  override fun getName(): String = "PCSegmentedControl"
+
+  override fun getDelegate(): ViewManagerDelegate<PCSegmentedControlView> = delegate
+
+  override fun createViewInstance(reactContext: ThemedReactContext): PCSegmentedControlView {
+    return PCSegmentedControlView(reactContext)
+  }
+
+  /**
+   * Pass the StateWrapper to the view so it can update Fabric state with measured dimensions.
+   */
+  override fun updateState(
+    view: PCSegmentedControlView,
+    props: ReactStylesDiffMap,
+    stateWrapper: StateWrapper
+  ): Any? {
+    view.stateWrapper = stateWrapper
+    return null
+  }
+
+  override fun addEventEmitters(reactContext: ThemedReactContext, view: PCSegmentedControlView) {
+    val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, view.id)
+
+    view.onSelect = { index, value ->
+      dispatcher?.dispatchEvent(SelectEvent(view.id, index, value))
+    }
+  }
+
+  // segments: array of {label, value, disabled, icon}
+  override fun setSegments(view: PCSegmentedControlView, value: ReadableArray?) {
+    val out = ArrayList<PCSegmentedControlView.Segment>()
+    if (value != null) {
+      for (i in 0 until value.size()) {
+        val m = value.getMap(i) ?: continue
+        val label = if (m.hasKey("label") && !m.isNull("label")) m.getString("label") ?: "" else ""
+        val segValue = if (m.hasKey("value") && !m.isNull("value")) m.getString("value") ?: "" else ""
+        val disabled = m.hasKey("disabled") && !m.isNull("disabled") && m.getString("disabled") == "disabled"
+        val icon = if (m.hasKey("icon") && !m.isNull("icon")) m.getString("icon") ?: "" else ""
+        out.add(PCSegmentedControlView.Segment(label = label, value = segValue, disabled = disabled, icon = icon))
+      }
+    }
+    view.applySegments(out)
+  }
+
+  override fun setSelectedValue(view: PCSegmentedControlView, value: String?) {
+    // Spec sentinel: empty string means "no selection"
+    view.applySelectedValue(value ?: "")
+  }
+
+  override fun setInteractivity(view: PCSegmentedControlView, value: String?) {
+    view.applyInteractivity(value)
+  }
+
+  override fun setAndroid(view: PCSegmentedControlView, value: ReadableMap?) {
+    val selectionRequired = value != null && value.hasKey("selectionRequired") &&
+      !value.isNull("selectionRequired") && value.getString("selectionRequired") == "true"
+    view.applyAndroidProps(selectionRequired)
+  }
+
+  override fun setIos(view: PCSegmentedControlView, value: ReadableMap?) {
+    // Android ignores iOS config
+  }
+
+  // --- Events ---
+  private class SelectEvent(
+    surfaceId: Int,
+    private val index: Int,
+    private val value: String
+  ) : Event<SelectEvent>(surfaceId) {
+    override fun getEventName(): String = "topSelect"
+    override fun dispatch(rctEventEmitter: RCTEventEmitter) {
+      val payload = com.facebook.react.bridge.Arguments.createMap().apply {
+        putInt("index", index)
+        putString("value", value)
+      }
+      rctEventEmitter.receiveEvent(viewTag, eventName, payload)
+    }
+  }
+}

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

@@ -14,6 +14,8 @@ class PlatformComponentsViewPackage : ReactPackage {
           PCSelectionMenuViewManager(),
           PCDatePickerViewManager(),
           PCContextMenuViewManager(),
+          PCSegmentedControlViewManager(),
+          PCLiquidGlassViewManager(),
       )
   }
 

package/ios/PCDatePickerView.swift

@@ -283,30 +283,33 @@ public final class PCDatePickerView: UIControl,
         // Prevent "settle" events right as we present.
         suppressNextChangesBriefly()
 
-        // Check if using inline style (full calendar) - needs larger popover size
-        var isInlineStyle = false
-        if #available(iOS 13.4, *) {
-            isInlineStyle = picker.preferredDatePickerStyle == .inline
-        }
-
         let vc = UIViewController()
         picker.translatesAutoresizingMaskIntoConstraints = false
         vc.view.addSubview(picker)
 
-        // For inline style, use system background and constrain all edges
-        // For other styles, use clear background and only top/leading constraints
-        if isInlineStyle {
+        let useInlineFallback: Bool
+        if #available(iOS 26.0, *) {
+            useInlineFallback = false
+        } else {
+            useInlineFallback = true
+        }
+
+        if useInlineFallback {
+            // Pre–Liquid Glass fallback
             vc.view.backgroundColor = .systemBackground
             vc.view.isOpaque = true
+
             NSLayoutConstraint.activate([
-                picker.topAnchor.constraint(equalTo: vc.view.topAnchor, constant: 8),
-                picker.leadingAnchor.constraint(equalTo: vc.view.leadingAnchor, constant: 8),
-                picker.trailingAnchor.constraint(equalTo: vc.view.trailingAnchor, constant: -8),
-                picker.bottomAnchor.constraint(equalTo: vc.view.bottomAnchor, constant: -8),
+                picker.topAnchor.constraint(equalTo: vc.view.topAnchor),
+                picker.leadingAnchor.constraint(equalTo: vc.view.leadingAnchor),
+                picker.trailingAnchor.constraint(equalTo: vc.view.trailingAnchor),
+                picker.bottomAnchor.constraint(equalTo: vc.view.bottomAnchor),
             ])
         } else {
+            // Liquid Glass path
             vc.view.backgroundColor = .clear
             vc.view.isOpaque = false
+
             NSLayoutConstraint.activate([
                 picker.topAnchor.constraint(equalTo: vc.view.topAnchor),
                 picker.leadingAnchor.constraint(equalTo: vc.view.leadingAnchor),

package/ios/PCLiquidGlass.h

@@ -0,0 +1,10 @@
+// PCLiquidGlass.h
+
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface PCLiquidGlass : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/PCLiquidGlass.mm

@@ -0,0 +1,140 @@
+// PCLiquidGlass.mm
+
+#import "PCLiquidGlass.h"
+
+#import <React/RCTComponentViewFactory.h>
+#import <React/RCTConversions.h>
+#import <React/RCTFabricComponentsPlugins.h>
+
+#import <react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/PlatformComponentsViewSpec/EventEmitters.h>
+#import <react/renderer/components/PlatformComponentsViewSpec/Props.h>
+
+#if __has_include(<PlatformComponents/PlatformComponents-Swift.h>)
+#import <PlatformComponents/PlatformComponents-Swift.h>
+#else
+#import "PlatformComponents-Swift.h"
+#endif
+
+using namespace facebook::react;
+
+@implementation PCLiquidGlass {
+  PCLiquidGlassView *_view;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<PCLiquidGlassComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    _view = [[PCLiquidGlassView alloc] initWithEffect:nil];
+    self.contentView = _view;
+
+    // Set up press callback
+    __weak __typeof(self) weakSelf = self;
+    _view.onPressCallback = ^(CGFloat x, CGFloat y) {
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+
+      auto eventEmitter =
+          std::static_pointer_cast<const PCLiquidGlassEventEmitter>(
+              strongSelf->_eventEmitter);
+      if (!eventEmitter) return;
+
+      PCLiquidGlassEventEmitter::OnGlassPress payload = {
+          .x = (float)x,
+          .y = (float)y,
+      };
+      eventEmitter->onGlassPress(payload);
+    };
+  }
+  return self;
+}
+
+// Mount children into the UIVisualEffectView's contentView
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
+  [_view.contentView insertSubview:childComponentView atIndex:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
+  [childComponentView removeFromSuperview];
+}
+
+- (void)updateProps:(Props::Shared const &)props
+           oldProps:(Props::Shared const &)oldProps {
+  const auto &newProps =
+      *std::static_pointer_cast<const PCLiquidGlassProps>(props);
+  const auto prevProps =
+      std::static_pointer_cast<const PCLiquidGlassProps>(oldProps);
+
+  BOOL needsSetup = NO;
+
+  // cornerRadius -> glassCornerRadius
+  if (!prevProps || newProps.cornerRadius != prevProps->cornerRadius) {
+    _view.glassCornerRadius = newProps.cornerRadius;
+  }
+
+  // iOS-specific props
+  const auto &newIos = newProps.ios;
+  const auto &oldIos = prevProps ? prevProps->ios : PCLiquidGlassIosStruct{};
+
+  // interactive - needs setup to re-create effect with isInteractive
+  if (!prevProps || newIos.interactive != oldIos.interactive) {
+    _view.interactive = (newIos.interactive == "true");
+    needsSetup = YES;
+  }
+
+  // effect -> effectStyle
+  if (!prevProps || newIos.effect != oldIos.effect) {
+    if (!newIos.effect.empty()) {
+      _view.effectStyle = [NSString stringWithUTF8String:newIos.effect.c_str()];
+    } else {
+      _view.effectStyle = @"regular";
+    }
+    needsSetup = YES;
+  }
+
+  // tintColor -> glassTintColor
+  if (!prevProps || newIos.tintColor != oldIos.tintColor) {
+    if (!newIos.tintColor.empty()) {
+      _view.glassTintColor = [NSString stringWithUTF8String:newIos.tintColor.c_str()];
+    } else {
+      _view.glassTintColor = nil;
+    }
+    needsSetup = YES;
+  }
+
+  // colorScheme
+  if (!prevProps || newIos.colorScheme != oldIos.colorScheme) {
+    if (!newIos.colorScheme.empty()) {
+      _view.colorScheme = [NSString stringWithUTF8String:newIos.colorScheme.c_str()];
+    } else {
+      _view.colorScheme = @"system";
+    }
+    needsSetup = YES;
+  }
+
+  // shadowRadius -> glassShadowRadius
+  if (!prevProps || newIos.shadowRadius != oldIos.shadowRadius) {
+    _view.glassShadowRadius = newIos.shadowRadius;
+  }
+
+  // isHighlighted
+  if (!prevProps || newIos.isHighlighted != oldIos.isHighlighted) {
+    _view.isHighlighted = (newIos.isHighlighted == "true");
+  }
+
+  // Apply glass effect if any glass-related props changed
+  if (needsSetup) {
+    [_view setupView];
+  }
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+@end
+
+Class<RCTComponentViewProtocol> PCLiquidGlassCls(void) {
+  return PCLiquidGlass.class;
+}