@expo/ui 55.0.2 → 55.0.4

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

@@ -1,12 +1,9 @@
 package expo.modules.ui
 
 import android.graphics.Color
-import androidx.compose.material3.Checkbox
-import androidx.compose.material3.CheckboxDefaults
 import androidx.compose.material3.Switch
 import androidx.compose.material3.SwitchDefaults
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import expo.modules.kotlin.records.Field
 import expo.modules.kotlin.records.Record
 import expo.modules.kotlin.views.ComposableScope
@@ -14,195 +11,90 @@ import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.FunctionalComposableScope
 import java.io.Serializable
 
-open class ValueChangeEvent(
+open class CheckedChangeEvent(
   @Field open val value: Boolean = false
 ) : Record, Serializable
 
-class SwitchColors : Record {
-  @Field
-  val checkedThumbColor: Color? = null
-
-  @Field
-  val checkedTrackColor: Color? = null
-
-  @Field
-  val checkedBorderColor: Color? = null
-
-  @Field
-  val checkedIconColor: Color? = null
-
-  @Field
-  val uncheckedThumbColor: Color? = null
-
-  @Field
-  val uncheckedTrackColor: Color? = null
-
-  @Field
-  val uncheckedBorderColor: Color? = null
-
-  @Field
-  val uncheckedIconColor: Color? = null
-
-  @Field
-  val disabledCheckedThumbColor: Color? = null
-
-  @Field
-  val disabledCheckedTrackColor: Color? = null
-
-  @Field
-  val disabledCheckedBorderColor: Color? = null
-
-  @Field
-  val disabledCheckedIconColor: Color? = null
-
-  @Field
-  val disabledUncheckedThumbColor: Color? = null
-
-  @Field
-  val disabledUncheckedTrackColor: Color? = null
-
-  @Field
-  val disabledUncheckedBorderColor: Color? = null
-
-  @Field
-  val disabledUncheckedIconColor: Color? = null
-
-  @Field
-  val checkedColor: Color? = null
-
-  @Field
-  val disabledCheckedColor: Color? = null
-
-  @Field
-  val uncheckedColor: Color? = null
-
-  @Field
-  val disabledUncheckedColor: Color? = null
-
-  @Field
-  val checkmarkColor: Color? = null
-
-  @Field
-  val disabledIndeterminateColor: Color? = null
-}
+data class SwitchColors(
+  @Field val checkedThumbColor: Color? = null,
+  @Field val checkedTrackColor: Color? = null,
+  @Field val checkedBorderColor: Color? = null,
+  @Field val checkedIconColor: Color? = null,
+  @Field val uncheckedThumbColor: Color? = null,
+  @Field val uncheckedTrackColor: Color? = null,
+  @Field val uncheckedBorderColor: Color? = null,
+  @Field val uncheckedIconColor: Color? = null,
+  @Field val disabledCheckedThumbColor: Color? = null,
+  @Field val disabledCheckedTrackColor: Color? = null,
+  @Field val disabledCheckedBorderColor: Color? = null,
+  @Field val disabledCheckedIconColor: Color? = null,
+  @Field val disabledUncheckedThumbColor: Color? = null,
+  @Field val disabledUncheckedTrackColor: Color? = null,
+  @Field val disabledUncheckedBorderColor: Color? = null,
+  @Field val disabledUncheckedIconColor: Color? = null
+) : Record
 
 data class SwitchProps(
   val value: Boolean = false,
   val enabled: Boolean = true,
-  val variant: String = "switch",
-  val elementColors: SwitchColors = SwitchColors(),
+  val colors: SwitchColors = SwitchColors(),
   val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
 @Composable
-fun SwitchComposable(
-  checked: Boolean,
-  onCheckedChange: ((Boolean) -> Unit)?,
-  colors: SwitchColors,
-  modifier: Modifier = Modifier,
-  enabled: Boolean = true,
-  thumbContent: (@Composable () -> Unit)? = null
+fun FunctionalComposableScope.SwitchContent(
+  props: SwitchProps,
+  onCheckedChange: (Boolean) -> Unit
 ) {
+  val thumbContentSlotView = findChildSlotView(view, "thumbContent")
+
   Switch(
-    checked = checked,
+    checked = props.value,
     onCheckedChange = onCheckedChange,
-    modifier = modifier,
-    enabled = enabled,
-    thumbContent = thumbContent,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
+    enabled = props.enabled,
+    thumbContent = thumbContentSlotView?.let {
+      {
+        with(ComposableScope()) {
+          with(it) {
+            Content()
+          }
+        }
+      }
+    },
     colors = SwitchDefaults.colors(
-      // For some reason the default way of passing colors using `compose` results in a transparent view
-      checkedThumbColor = colors.checkedThumbColor.composeOrNull
+      checkedThumbColor = props.colors.checkedThumbColor.composeOrNull
         ?: SwitchDefaults.colors().checkedThumbColor,
-      checkedTrackColor = colors.checkedTrackColor.composeOrNull
+      checkedTrackColor = props.colors.checkedTrackColor.composeOrNull
         ?: SwitchDefaults.colors().checkedTrackColor,
-      checkedBorderColor = colors.checkedBorderColor.composeOrNull
+      checkedBorderColor = props.colors.checkedBorderColor.composeOrNull
         ?: SwitchDefaults.colors().checkedBorderColor,
-      checkedIconColor = colors.checkedIconColor.composeOrNull
+      checkedIconColor = props.colors.checkedIconColor.composeOrNull
         ?: SwitchDefaults.colors().checkedIconColor,
-      uncheckedThumbColor = colors.uncheckedThumbColor.composeOrNull
+      uncheckedThumbColor = props.colors.uncheckedThumbColor.composeOrNull
         ?: SwitchDefaults.colors().uncheckedThumbColor,
-      uncheckedTrackColor = colors.uncheckedTrackColor.composeOrNull
+      uncheckedTrackColor = props.colors.uncheckedTrackColor.composeOrNull
         ?: SwitchDefaults.colors().uncheckedTrackColor,
-      uncheckedBorderColor = colors.uncheckedBorderColor.composeOrNull
+      uncheckedBorderColor = props.colors.uncheckedBorderColor.composeOrNull
         ?: SwitchDefaults.colors().uncheckedBorderColor,
-      uncheckedIconColor = colors.uncheckedIconColor.composeOrNull
+      uncheckedIconColor = props.colors.uncheckedIconColor.composeOrNull
         ?: SwitchDefaults.colors().uncheckedIconColor,
-      disabledCheckedBorderColor = colors.disabledCheckedBorderColor.composeOrNull
+      disabledCheckedBorderColor = props.colors.disabledCheckedBorderColor.composeOrNull
         ?: SwitchDefaults.colors().disabledCheckedBorderColor,
-      disabledCheckedThumbColor = colors.disabledCheckedThumbColor.composeOrNull
+      disabledCheckedThumbColor = props.colors.disabledCheckedThumbColor.composeOrNull
         ?: SwitchDefaults.colors().disabledCheckedThumbColor,
-      disabledCheckedTrackColor = colors.disabledCheckedTrackColor.composeOrNull
+      disabledCheckedTrackColor = props.colors.disabledCheckedTrackColor.composeOrNull
         ?: SwitchDefaults.colors().disabledCheckedTrackColor,
-      disabledCheckedIconColor = colors.disabledCheckedIconColor.composeOrNull
+      disabledCheckedIconColor = props.colors.disabledCheckedIconColor.composeOrNull
         ?: SwitchDefaults.colors().disabledCheckedIconColor,
-      disabledUncheckedBorderColor = colors.disabledUncheckedBorderColor.composeOrNull
+      disabledUncheckedBorderColor = props.colors.disabledUncheckedBorderColor.composeOrNull
         ?: SwitchDefaults.colors().disabledUncheckedBorderColor,
-      disabledUncheckedThumbColor = colors.disabledUncheckedThumbColor.composeOrNull
+      disabledUncheckedThumbColor = props.colors.disabledUncheckedThumbColor.composeOrNull
         ?: SwitchDefaults.colors().disabledUncheckedThumbColor,
-      disabledUncheckedTrackColor = colors.disabledUncheckedTrackColor.composeOrNull
+      disabledUncheckedTrackColor = props.colors.disabledUncheckedTrackColor.composeOrNull
         ?: SwitchDefaults.colors().disabledUncheckedTrackColor,
-      disabledUncheckedIconColor = colors.disabledUncheckedIconColor.composeOrNull
+      disabledUncheckedIconColor = props.colors.disabledUncheckedIconColor.composeOrNull
         ?: SwitchDefaults.colors().disabledUncheckedIconColor
     )
   )
 }
-
-@Composable
-fun CheckboxComposable(checked: Boolean, onCheckedChange: ((Boolean) -> Unit)?, colors: SwitchColors, modifier: Modifier, enabled: Boolean = true) {
-  Checkbox(
-    checked = checked,
-    onCheckedChange = onCheckedChange,
-    modifier = modifier,
-    enabled = enabled,
-    colors = CheckboxDefaults.colors(
-      checkedColor = colors.checkedColor.compose,
-      disabledCheckedColor = colors.disabledCheckedColor.compose,
-      uncheckedColor = colors.uncheckedColor.compose,
-      disabledUncheckedColor = colors.disabledUncheckedColor.compose,
-      checkmarkColor = colors.checkmarkColor.compose,
-      disabledIndeterminateColor = colors.disabledIndeterminateColor.compose
-    )
-  )
-}
-
-@Composable
-fun ThemedHybridSwitch(
-  variant: String,
-  checked: Boolean,
-  onCheckedChange: ((Boolean) -> Unit)?,
-  colors: SwitchColors,
-  modifier: Modifier = Modifier,
-  enabled: Boolean = true,
-  thumbContent: (@Composable () -> Unit)? = null
-) {
-  when (variant) {
-    "switch" -> SwitchComposable(checked, onCheckedChange, colors, modifier, enabled, thumbContent)
-    else -> CheckboxComposable(checked, onCheckedChange, colors, modifier, enabled)
-  }
-}
-
-@Composable
-fun FunctionalComposableScope.SwitchContent(
-  props: SwitchProps,
-  onValueChange: (ValueChangeEvent) -> Unit
-) {
-  val thumbContentSlotView = findChildSlotView(view, "thumbContent")
-
-  ThemedHybridSwitch(
-    props.variant,
-    props.value,
-    { newChecked -> onValueChange(ValueChangeEvent(newChecked)) },
-    props.elementColors,
-    ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
-    props.enabled,
-    thumbContent = thumbContentSlotView?.let {
-      {
-        with(ComposableScope()) {
-          with(it) {
-            Content()
-          }
-        }
-      }
-    }
-  )
-}

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

@@ -1,7 +1,9 @@
 package expo.modules.ui
 
+import android.annotation.SuppressLint
 import android.content.Context
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
 import androidx.compose.runtime.Composable
@@ -18,6 +20,7 @@ import expo.modules.kotlin.views.ExpoComposeView
 data class TextInputProps(
   val defaultValue: MutableState<String> = mutableStateOf(""),
   val placeholder: MutableState<String> = mutableStateOf(""),
+  val variant: MutableState<String> = mutableStateOf("filled"),
   val multiline: MutableState<Boolean> = mutableStateOf(false),
   val numberOfLines: MutableState<Int?> = mutableStateOf(null),
   val keyboardType: MutableState<String> = mutableStateOf("default"),
@@ -52,6 +55,7 @@ private fun String.autoCapitalize(): KeyboardCapitalization {
   }
 }
 
+@SuppressLint("ViewConstructor")
 class TextInputView(context: Context, appContext: AppContext) :
   ExpoComposeView<TextInputProps>(context, appContext) {
   override val props = TextInputProps()
@@ -68,21 +72,41 @@ class TextInputView(context: Context, appContext: AppContext) :
 
   @Composable
   override fun ComposableScope.Content() {
-    TextField(
-      value = requireNotNull(textState.value),
-      onValueChange = {
-        textState.value = it
-        onValueChanged(mapOf("value" to it))
-      },
-      placeholder = { Text(props.placeholder.value) },
-      maxLines = if (props.multiline.value) props.numberOfLines.value ?: Int.MAX_VALUE else 1,
-      singleLine = !props.multiline.value,
-      keyboardOptions = KeyboardOptions.Default.copy(
-        keyboardType = props.keyboardType.value.keyboardType(),
-        autoCorrectEnabled = props.autocorrection.value,
-        capitalization = props.autoCapitalize.value.autoCapitalize()
-      ),
-      modifier = ModifierRegistry.applyModifiers(props.modifiers.value, appContext, this@Content, globalEventDispatcher)
+    val value = textState.value ?: props.defaultValue.value
+    val onValueChange: (String) -> Unit = {
+      textState.value = it
+      onValueChanged(mapOf("value" to it))
+    }
+    val placeholder: @Composable () -> Unit = { Text(props.placeholder.value) }
+    val maxLines = if (props.multiline.value) props.numberOfLines.value ?: Int.MAX_VALUE else 1
+    val singleLine = !props.multiline.value
+    val keyboardOptions = KeyboardOptions.Default.copy(
+      keyboardType = props.keyboardType.value.keyboardType(),
+      autoCorrectEnabled = props.autocorrection.value,
+      capitalization = props.autoCapitalize.value.autoCapitalize()
     )
+    val modifier = ModifierRegistry.applyModifiers(props.modifiers.value, appContext, this@Content, globalEventDispatcher)
+
+    if (props.variant.value == "outlined") {
+      OutlinedTextField(
+        value = value,
+        onValueChange = onValueChange,
+        placeholder = placeholder,
+        maxLines = maxLines,
+        singleLine = singleLine,
+        keyboardOptions = keyboardOptions,
+        modifier = modifier
+      )
+    } else {
+      TextField(
+        value = value,
+        onValueChange = onValueChange,
+        placeholder = placeholder,
+        maxLines = maxLines,
+        singleLine = singleLine,
+        keyboardOptions = keyboardOptions,
+        modifier = modifier
+      )
+    }
   }
 }

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

@@ -3,26 +3,33 @@
 package expo.modules.ui
 
 import android.graphics.Color
-import androidx.compose.foundation.layout.RowScope
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.FilledIconToggleButton
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.IconToggleButton
 import androidx.compose.material3.OutlinedIconToggleButton
-import androidx.compose.material3.Text
 import androidx.compose.material3.ToggleButton
 import androidx.compose.material3.ToggleButtonDefaults
 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 ToggleButtonColors(
+  @Field val containerColor: Color? = null,
+  @Field val contentColor: Color? = null,
+  @Field val checkedContainerColor: Color? = null,
+  @Field val checkedContentColor: Color? = null,
+  @Field val disabledContainerColor: Color? = null,
+  @Field val disabledContentColor: Color? = null
+) : Record
+
 data class ToggleButtonProps(
   val checked: Boolean = false,
-  val text: String? = null,
-  val variant: String = "default",
-  val color: Color? = null,
-  val disabled: Boolean = false,
+  val enabled: Boolean = true,
+  val colors: ToggleButtonColors = ToggleButtonColors(),
   val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
@@ -36,61 +43,92 @@ fun FunctionalComposableScope.ToggleButtonContent(
   onCheckedChange: (ToggleButtonValueChangeEvent) -> Unit
 ) {
   val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ToggleButton(
+    checked = props.checked,
+    onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
+    enabled = props.enabled,
+    modifier = modifier,
+    colors = ToggleButtonDefaults.toggleButtonColors(
+      checkedContainerColor = props.colors.checkedContainerColor.compose,
+      checkedContentColor = props.colors.checkedContentColor.compose,
+      containerColor = props.colors.containerColor.compose,
+      contentColor = props.colors.contentColor.compose,
+      disabledContainerColor = props.colors.disabledContainerColor.compose,
+      disabledContentColor = props.colors.disabledContentColor.compose
+    )
+  ) {
+    Children(ComposableScope(rowScope = this))
+  }
+}
 
-  val scope = this
-
-  val content: @Composable () -> Unit = {
-    when {
-      props.text != null -> Text(text = props.text)
-      else -> scope.Children(composableScope)
-    }
+@Composable
+fun FunctionalComposableScope.IconToggleButtonContent(
+  props: ToggleButtonProps,
+  onCheckedChange: (ToggleButtonValueChangeEvent) -> Unit
+) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  IconToggleButton(
+    checked = props.checked,
+    onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
+    enabled = props.enabled,
+    modifier = modifier,
+    colors = IconButtonDefaults.iconToggleButtonColors(
+      containerColor = props.colors.containerColor.compose,
+      contentColor = props.colors.contentColor.compose,
+      checkedContainerColor = props.colors.checkedContainerColor.compose,
+      checkedContentColor = props.colors.checkedContentColor.compose,
+      disabledContainerColor = props.colors.disabledContainerColor.compose,
+      disabledContentColor = props.colors.disabledContentColor.compose
+    )
+  ) {
+    Children(ComposableScope())
   }
+}
 
-  // RowScope content for ToggleButton
-  val rowContent: @Composable RowScope.() -> Unit = {
-    when {
-      props.text != null -> Text(text = props.text)
-      else -> scope.Children(composableScope)
-    }
+@Composable
+fun FunctionalComposableScope.FilledIconToggleButtonContent(
+  props: ToggleButtonProps,
+  onCheckedChange: (ToggleButtonValueChangeEvent) -> Unit
+) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  FilledIconToggleButton(
+    checked = props.checked,
+    onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
+    enabled = props.enabled,
+    modifier = modifier,
+    colors = IconButtonDefaults.filledIconToggleButtonColors(
+      containerColor = props.colors.containerColor.compose,
+      contentColor = props.colors.contentColor.compose,
+      checkedContainerColor = props.colors.checkedContainerColor.compose,
+      checkedContentColor = props.colors.checkedContentColor.compose,
+      disabledContainerColor = props.colors.disabledContainerColor.compose,
+      disabledContentColor = props.colors.disabledContentColor.compose
+    )
+  ) {
+    Children(ComposableScope())
   }
+}
 
-  when (props.variant) {
-    "icon" -> {
-      IconToggleButton(
-        checked = props.checked,
-        onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
-        enabled = !props.disabled,
-        modifier = modifier,
-        content = content
-      )
-    }
-    "filledIcon" -> {
-      FilledIconToggleButton(
-        checked = props.checked,
-        onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
-        enabled = !props.disabled,
-        modifier = modifier,
-        content = content
-      )
-    }
-    "outlinedIcon" -> {
-      OutlinedIconToggleButton(
-        checked = props.checked,
-        onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
-        enabled = !props.disabled,
-        modifier = modifier,
-        content = content
-      )
-    }
-    else -> {
-      ToggleButton(
-        checked = props.checked,
-        onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
-        enabled = !props.disabled,
-        modifier = modifier,
-        colors = ToggleButtonDefaults.toggleButtonColors(),
-        content = rowContent
-      )
-    }
+@Composable
+fun FunctionalComposableScope.OutlinedIconToggleButtonContent(
+  props: ToggleButtonProps,
+  onCheckedChange: (ToggleButtonValueChangeEvent) -> Unit
+) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  OutlinedIconToggleButton(
+    checked = props.checked,
+    onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
+    enabled = props.enabled,
+    modifier = modifier,
+    colors = IconButtonDefaults.outlinedIconToggleButtonColors(
+      containerColor = props.colors.containerColor.compose,
+      contentColor = props.colors.contentColor.compose,
+      checkedContainerColor = props.colors.checkedContainerColor.compose,
+      checkedContentColor = props.colors.checkedContentColor.compose,
+      disabledContainerColor = props.colors.disabledContainerColor.compose,
+      disabledContentColor = props.colors.disabledContentColor.compose
+    )
+  ) {
+    Children(ComposableScope())
   }
 }