@expo/ui 55.0.2 → 55.0.4

package/android/src/main/java/expo/modules/ui/ProgressView.kt

@@ -1,119 +1,219 @@
-@file:OptIn(ExperimentalMaterial3ExpressiveApi::class)
+@file:OptIn(ExperimentalMaterial3ExpressiveApi::class, ExperimentalMaterial3Api::class)
 
 package expo.modules.ui
 
 import android.graphics.Color
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.CircularWavyProgressIndicator
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.material3.LinearWavyProgressIndicator
 import androidx.compose.material3.ProgressIndicatorDefaults
+import androidx.compose.material3.WavyProgressIndicatorDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.unit.dp
 import expo.modules.kotlin.records.Field
 import expo.modules.kotlin.records.Record
-import expo.modules.kotlin.types.Enumerable
 import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.FunctionalComposableScope
 
-enum class ProgressVariant(val value: String) : Enumerable {
-  CIRCULAR("circular"),
-  LINEAR("linear"),
-  CIRCULAR_WAVY("circularWavy"),
-  LINEAR_WAVY("linearWavy")
-}
+// region LinearProgressIndicator
 
-class ProgressColors : Record {
-  @Field
-  val trackColor: Color? = null
+class DrawStopIndicatorConfig : Record {
+  @Field val color: Color? = null
+  @Field val strokeCap: String? = null
+  @Field val stopSize: Float? = null
 }
 
-data class ProgressProps(
-  val variant: ProgressVariant = ProgressVariant.CIRCULAR,
+data class LinearProgressIndicatorProps(
   val progress: Float? = null,
   val color: Color? = null,
-  val elementColors: ProgressColors = ProgressColors(),
+  val trackColor: Color? = null,
+  val strokeCap: String? = null,
+  val gapSize: Float? = null,
+  val drawStopIndicator: DrawStopIndicatorConfig? = null,
   val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
 @Composable
-fun FunctionalComposableScope.ProgressContent(props: ProgressProps) {
-  val progress = props.progress
-  val color = props.color
-  val colors = props.elementColors
+fun FunctionalComposableScope.LinearProgressIndicatorContent(props: LinearProgressIndicatorProps) {
   val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  val color = props.color.composeOrNull ?: ProgressIndicatorDefaults.linearColor
+  val trackColor = props.trackColor.composeOrNull ?: ProgressIndicatorDefaults.linearTrackColor
+  val strokeCap = props.strokeCap.toStrokeCap() ?: ProgressIndicatorDefaults.LinearStrokeCap
+  val gapSize = props.gapSize?.dp ?: ProgressIndicatorDefaults.LinearIndicatorTrackGapSize
 
-  when (props.variant) {
-    ProgressVariant.LINEAR -> {
-      val composeColor = color.composeOrNull ?: ProgressIndicatorDefaults.linearColor
-      val trackColor = colors.trackColor.composeOrNull ?: ProgressIndicatorDefaults.linearTrackColor
-      if (progress != null) {
-        LinearProgressIndicator(
-          progress = { progress },
-          color = composeColor,
-          trackColor = trackColor,
-          drawStopIndicator = {},
-          modifier = modifier
-        )
-      } else {
-        LinearProgressIndicator(
-          color = composeColor,
-          trackColor = trackColor,
-          modifier = modifier
-        )
-      }
-    }
-    ProgressVariant.CIRCULAR -> {
-      val composeColor = color.composeOrNull ?: ProgressIndicatorDefaults.circularColor
-      if (progress != null) {
-        CircularProgressIndicator(
-          progress = { progress },
-          color = composeColor,
-          trackColor = colors.trackColor.composeOrNull ?: ProgressIndicatorDefaults.circularDeterminateTrackColor,
-          modifier = modifier
-        )
-      } else {
-        CircularProgressIndicator(
-          color = composeColor,
-          trackColor = colors.trackColor.composeOrNull ?: ProgressIndicatorDefaults.circularIndeterminateTrackColor,
-          modifier = modifier
-        )
-      }
-    }
-    ProgressVariant.LINEAR_WAVY -> {
-      val composeColor = color.composeOrNull ?: ProgressIndicatorDefaults.linearColor
-      val trackColor = colors.trackColor.composeOrNull ?: ProgressIndicatorDefaults.linearTrackColor
-      if (progress != null) {
-        LinearWavyProgressIndicator(
-          progress = { progress },
-          color = composeColor,
-          trackColor = trackColor,
-          modifier = modifier
-        )
-      } else {
-        LinearWavyProgressIndicator(
-          color = composeColor,
-          trackColor = trackColor,
-          modifier = modifier
-        )
-      }
-    }
-    ProgressVariant.CIRCULAR_WAVY -> {
-      val composeColor = color.composeOrNull ?: ProgressIndicatorDefaults.circularColor
-      if (progress != null) {
-        CircularWavyProgressIndicator(
-          progress = { progress },
-          color = composeColor,
-          trackColor = colors.trackColor.composeOrNull ?: ProgressIndicatorDefaults.circularDeterminateTrackColor,
-          modifier = modifier
-        )
-      } else {
-        CircularWavyProgressIndicator(
-          color = composeColor,
-          trackColor = colors.trackColor.composeOrNull ?: ProgressIndicatorDefaults.circularDeterminateTrackColor,
-          modifier = modifier
-        )
-      }
+  if (props.progress != null) {
+    val stopIndicatorConfig = props.drawStopIndicator
+    if (stopIndicatorConfig != null) {
+      LinearProgressIndicator(
+        progress = { props.progress },
+        color = color,
+        trackColor = trackColor,
+        strokeCap = strokeCap,
+        gapSize = gapSize,
+        drawStopIndicator = {
+          ProgressIndicatorDefaults.drawStopIndicator(
+            drawScope = this,
+            stopSize = stopIndicatorConfig.stopSize?.dp ?: ProgressIndicatorDefaults.LinearTrackStopIndicatorSize,
+            color = stopIndicatorConfig.color.composeOrNull ?: color,
+            strokeCap = stopIndicatorConfig.strokeCap.toStrokeCap() ?: strokeCap
+          )
+        },
+        modifier = modifier
+      )
+    } else {
+      LinearProgressIndicator(
+        progress = { props.progress },
+        color = color,
+        trackColor = trackColor,
+        strokeCap = strokeCap,
+        gapSize = gapSize,
+        modifier = modifier
+      )
     }
+  } else {
+    LinearProgressIndicator(
+      color = color,
+      trackColor = trackColor,
+      strokeCap = strokeCap,
+      gapSize = gapSize,
+      modifier = modifier
+    )
+  }
+}
+
+// endregion
+
+// region CircularProgressIndicator
+
+data class CircularProgressIndicatorProps(
+  val progress: Float? = null,
+  val color: Color? = null,
+  val trackColor: Color? = null,
+  val strokeWidth: Float? = null,
+  val strokeCap: String? = null,
+  val gapSize: Float? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.CircularProgressIndicatorContent(props: CircularProgressIndicatorProps) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  val color = props.color.composeOrNull ?: ProgressIndicatorDefaults.circularColor
+  val strokeWidth = props.strokeWidth?.dp ?: ProgressIndicatorDefaults.CircularStrokeWidth
+
+  if (props.progress != null) {
+    val trackColor = props.trackColor.composeOrNull ?: ProgressIndicatorDefaults.circularDeterminateTrackColor
+    val strokeCap = props.strokeCap.toStrokeCap() ?: ProgressIndicatorDefaults.CircularDeterminateStrokeCap
+    val gapSize = props.gapSize?.dp ?: ProgressIndicatorDefaults.CircularIndicatorTrackGapSize
+
+    CircularProgressIndicator(
+      progress = { props.progress },
+      color = color,
+      trackColor = trackColor,
+      strokeWidth = strokeWidth,
+      strokeCap = strokeCap,
+      gapSize = gapSize,
+      modifier = modifier
+    )
+  } else {
+    val trackColor = props.trackColor.composeOrNull ?: ProgressIndicatorDefaults.circularIndeterminateTrackColor
+    val strokeCap = props.strokeCap.toStrokeCap() ?: ProgressIndicatorDefaults.CircularIndeterminateStrokeCap
+
+    CircularProgressIndicator(
+      color = color,
+      trackColor = trackColor,
+      strokeWidth = strokeWidth,
+      strokeCap = strokeCap,
+      modifier = modifier
+    )
+  }
+}
+
+// endregion
+
+// region LinearWavyProgressIndicator
+
+data class LinearWavyProgressIndicatorProps(
+  val progress: Float? = null,
+  val color: Color? = null,
+  val trackColor: Color? = null,
+  val stopSize: Float? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.LinearWavyProgressIndicatorContent(props: LinearWavyProgressIndicatorProps) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  val color = props.color.composeOrNull ?: WavyProgressIndicatorDefaults.indicatorColor
+  val trackColor = props.trackColor.composeOrNull ?: WavyProgressIndicatorDefaults.trackColor
+  val stopSize = props.stopSize?.dp ?: WavyProgressIndicatorDefaults.LinearTrackStopIndicatorSize
+
+  if (props.progress != null) {
+    LinearWavyProgressIndicator(
+      progress = { props.progress },
+      color = color,
+      trackColor = trackColor,
+      stopSize = stopSize,
+      modifier = modifier
+    )
+  } else {
+    LinearWavyProgressIndicator(
+      color = color,
+      trackColor = trackColor,
+      modifier = modifier
+    )
+  }
+}
+
+// endregion
+
+// region CircularWavyProgressIndicator
+
+data class CircularWavyProgressIndicatorProps(
+  val progress: Float? = null,
+  val color: Color? = null,
+  val trackColor: Color? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.CircularWavyProgressIndicatorContent(props: CircularWavyProgressIndicatorProps) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  val color = props.color.composeOrNull ?: ProgressIndicatorDefaults.circularColor
+
+  if (props.progress != null) {
+    val trackColor = props.trackColor.composeOrNull ?: ProgressIndicatorDefaults.circularDeterminateTrackColor
+
+    CircularWavyProgressIndicator(
+      progress = { props.progress },
+      color = color,
+      trackColor = trackColor,
+      modifier = modifier
+    )
+  } else {
+    val trackColor = props.trackColor.composeOrNull ?: ProgressIndicatorDefaults.circularIndeterminateTrackColor
+
+    CircularWavyProgressIndicator(
+      color = color,
+      trackColor = trackColor,
+      modifier = modifier
+    )
+  }
+}
+
+// endregion
+
+// Utility
+
+private fun String?.toStrokeCap(): StrokeCap? {
+  return when (this?.lowercase()) {
+    "round" -> StrokeCap.Round
+    "butt" -> StrokeCap.Butt
+    "square" -> StrokeCap.Square
+    else -> null
   }
 }

package/android/src/main/java/expo/modules/ui/RadioButtonView.kt

@@ -7,22 +7,18 @@ import expo.modules.kotlin.views.FunctionalComposableScope
 
 data class RadioButtonProps(
   val selected: Boolean = false,
-  val nativeClickable: Boolean = true,
+  val clickable: Boolean = true,
   val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
 @Composable
 fun FunctionalComposableScope.RadioButtonContent(
   props: RadioButtonProps,
-  onNativeClick: () -> Unit
+  onClick: (() -> Unit)?
 ) {
   RadioButton(
     selected = props.selected,
-    onClick = if (props.nativeClickable) {
-      { onNativeClick() }
-    } else {
-      null
-    },
+    onClick = onClick,
     modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
   )
 }

package/android/src/main/java/expo/modules/ui/SegmentedButtonView.kt

@@ -0,0 +1,115 @@
+package expo.modules.ui
+
+import android.graphics.Color
+import android.util.Log
+import android.view.ViewGroup
+import androidx.compose.material3.MultiChoiceSegmentedButtonRowScope
+import androidx.compose.material3.SegmentedButton
+import androidx.compose.material3.SegmentedButtonDefaults
+import androidx.compose.material3.SingleChoiceSegmentedButtonRowScope
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.views.ComposableScope
+
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+
+data class SegmentedButtonColors(
+  @Field val activeBorderColor: Color? = null,
+  @Field val activeContentColor: Color? = null,
+  @Field val inactiveBorderColor: Color? = null,
+  @Field val inactiveContentColor: Color? = null,
+  @Field val disabledActiveBorderColor: Color? = null,
+  @Field val disabledActiveContentColor: Color? = null,
+  @Field val disabledInactiveBorderColor: Color? = null,
+  @Field val disabledInactiveContentColor: Color? = null,
+  @Field val activeContainerColor: Color? = null,
+  @Field val inactiveContainerColor: Color? = null,
+  @Field val disabledActiveContainerColor: Color? = null,
+  @Field val disabledInactiveContainerColor: Color? = null
+) : Record
+
+data class SegmentedButtonProps(
+  val selected: Boolean = false,
+  val checked: Boolean = false,
+  val enabled: Boolean = true,
+  val colors: SegmentedButtonColors = SegmentedButtonColors(),
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.SegmentedButtonContent(
+  props: SegmentedButtonProps,
+  onClick: () -> Unit,
+  onCheckedChange: (GenericEventPayload1<Boolean>) -> Unit
+) {
+  val colors = props.colors
+  val labelSlotView = findChildSlotView(view, "label")
+  val parent = view.parent as? ViewGroup
+  val index = parent?.indexOfChild(view) ?: 0
+  val count = parent?.childCount ?: 1
+
+  val segmentedColors = SegmentedButtonDefaults.colors(
+    activeBorderColor = colors.activeBorderColor.compose,
+    activeContentColor = colors.activeContentColor.compose,
+    inactiveBorderColor = colors.inactiveBorderColor.compose,
+    inactiveContentColor = colors.inactiveContentColor.compose,
+    disabledActiveBorderColor = colors.disabledActiveBorderColor.compose,
+    disabledActiveContentColor = colors.disabledActiveContentColor.compose,
+    disabledInactiveBorderColor = colors.disabledInactiveBorderColor.compose,
+    disabledInactiveContentColor = colors.disabledInactiveContentColor.compose,
+    activeContainerColor = colors.activeContainerColor.compose,
+    inactiveContainerColor = colors.inactiveContainerColor.compose,
+    disabledActiveContainerColor = colors.disabledActiveContainerColor.compose,
+    disabledInactiveContainerColor = colors.disabledInactiveContainerColor.compose
+  )
+
+  val shape = SegmentedButtonDefaults.itemShape(index = index, count = count)
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  val label: @Composable () -> Unit = labelSlotView?.let {
+    {
+      with(ComposableScope()) {
+        with(it) {
+          Content()
+        }
+      }
+    }
+  } ?: {}
+
+  val singleScope = composableScope.rowScope as? SingleChoiceSegmentedButtonRowScope
+  val multiScope = composableScope.rowScope as? MultiChoiceSegmentedButtonRowScope
+
+  if (singleScope == null && multiScope == null) {
+    if (BuildConfig.DEBUG) {
+      Log.w("ExpoUI", "SegmentedButton must be used within a SingleChoiceSegmentedButtonRow or MultiChoiceSegmentedButtonRow. It will not render on its own.")
+    }
+    return
+  }
+
+  if (singleScope != null) {
+    with(singleScope) {
+      SegmentedButton(
+        selected = props.selected,
+        onClick = onClick,
+        shape = shape,
+        enabled = props.enabled,
+        colors = segmentedColors,
+        modifier = modifier,
+        label = label
+      )
+    }
+  } else if (multiScope != null) {
+    with(multiScope) {
+      SegmentedButton(
+        checked = props.checked,
+        onCheckedChange = { onCheckedChange(GenericEventPayload1(it)) },
+        shape = shape,
+        enabled = props.enabled,
+        colors = segmentedColors,
+        modifier = modifier,
+        label = label
+      )
+    }
+  }
+}

package/android/src/main/java/expo/modules/ui/SegmentedControlView.kt

@@ -0,0 +1,35 @@
+package expo.modules.ui
+
+import androidx.compose.material3.MultiChoiceSegmentedButtonRow
+import androidx.compose.material3.SingleChoiceSegmentedButtonRow
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+import expo.modules.kotlin.views.with
+
+data class SingleChoiceSegmentedButtonRowProps(
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.SingleChoiceSegmentedButtonRowContent(props: SingleChoiceSegmentedButtonRowProps) {
+  SingleChoiceSegmentedButtonRow(
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) {
+    Children(ComposableScope().with(rowScope = this@SingleChoiceSegmentedButtonRow))
+  }
+}
+
+data class MultiChoiceSegmentedButtonRowProps(
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.MultiChoiceSegmentedButtonRowContent(props: MultiChoiceSegmentedButtonRowProps) {
+  MultiChoiceSegmentedButtonRow(
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) {
+    Children(ComposableScope().with(rowScope = this@MultiChoiceSegmentedButtonRow))
+  }
+}

package/android/src/main/java/expo/modules/ui/SliderView.kt

@@ -1,13 +1,20 @@
 package expo.modules.ui
 
 import android.graphics.Color
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Slider
 import androidx.compose.material3.SliderDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import expo.modules.kotlin.records.Field
 import expo.modules.kotlin.records.Record
 import expo.modules.kotlin.viewevent.getValue
+import expo.modules.kotlin.views.ComposableScope
 import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.FunctionalComposableScope
 
@@ -33,7 +40,8 @@ data class SliderProps(
   val min: Float = 0.0f,
   val max: Float = 1.0f,
   val steps: Int = 0,
-  val elementColors: SliderColors = SliderColors(),
+  val enabled: Boolean = true,
+  val colors: SliderColors = SliderColors(),
   val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
@@ -41,24 +49,74 @@ data class SliderValueChangedEvent(
   @Field val value: Float
 ) : Record
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun FunctionalComposableScope.SliderContent(props: SliderProps) {
-  val onValueChanged by remember { this@SliderContent.EventDispatcher<SliderValueChangedEvent>() }
-  val colors = props.elementColors
+  val onValueChange by remember { this@SliderContent.EventDispatcher<SliderValueChangedEvent>() }
+  val onValueChangeFinished by remember { this@SliderContent.EventDispatcher<Unit>() }
+  val interactionSource = remember { MutableInteractionSource() }
+
+  var localValue by remember { mutableFloatStateOf(props.value.coerceIn(props.min, props.max)) }
+  var isDragging by remember { mutableStateOf(false) }
+  val clampedPropsValue = props.value.coerceIn(props.min, props.max)
+  var prevPropsValue by remember { mutableFloatStateOf(clampedPropsValue) }
+
+  if (clampedPropsValue != prevPropsValue) {
+    prevPropsValue = clampedPropsValue
+    if (!isDragging) {
+      localValue = clampedPropsValue
+    }
+  }
+
+  val thumbSlotView = findChildSlotView(view, "thumb")
+  val trackSlotView = findChildSlotView(view, "track")
+
+  val sliderColors = SliderDefaults.colors(
+    thumbColor = props.colors.thumbColor.compose,
+    activeTrackColor = props.colors.activeTrackColor.compose,
+    inactiveTrackColor = props.colors.inactiveTrackColor.compose,
+    activeTickColor = props.colors.activeTickColor.compose,
+    inactiveTickColor = props.colors.inactiveTickColor.compose
+  )
+
   Slider(
-    value = props.value.coerceAtLeast(props.min).coerceAtMost(props.max),
+    value = localValue,
     valueRange = props.min..props.max,
     steps = props.steps,
+    enabled = props.enabled,
+    interactionSource = interactionSource,
     onValueChange = {
-      onValueChanged(SliderValueChangedEvent(it))
+      isDragging = true
+      localValue = it
+      onValueChange(SliderValueChangedEvent(it))
+    },
+    onValueChangeFinished = {
+      isDragging = false
+      onValueChangeFinished(Unit)
+    },
+    colors = sliderColors,
+    thumb = { sliderState ->
+      if (thumbSlotView != null) {
+        with(ComposableScope()) { with(thumbSlotView) { Content() } }
+      } else {
+        SliderDefaults.Thumb(
+          interactionSource = interactionSource,
+          colors = sliderColors,
+          enabled = props.enabled
+        )
+      }
+    },
+    track = { sliderState ->
+      if (trackSlotView != null) {
+        with(ComposableScope()) { with(trackSlotView) { Content() } }
+      } else {
+        SliderDefaults.Track(
+          sliderState = sliderState,
+          colors = sliderColors,
+          enabled = props.enabled
+        )
+      }
     },
-    colors = SliderDefaults.colors(
-      thumbColor = colors.thumbColor.compose,
-      activeTrackColor = colors.activeTrackColor.compose,
-      inactiveTrackColor = colors.inactiveTrackColor.compose,
-      activeTickColor = colors.activeTickColor.compose,
-      inactiveTickColor = colors.inactiveTickColor.compose
-    ),
     modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
   )
 }