library: Allow MiuixTextField to set label and background color

miuix-kotlin-multiplatform · Aug 29, 2024 · b1b2cfc · b1b2cfc
1 parent cb085b7
commit b1b2cfc
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 31 deletions.
diff --git a/composeApp/src/commonMain/kotlin/component/OtherComponent.kt b/composeApp/src/commonMain/kotlin/component/OtherComponent.kt
@@ -13,6 +13,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.ImeAction
@@ -40,47 +41,71 @@ fun OtherComponent(padding: PaddingValues) {
         keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
     )
 
+    MiuixTextField(
+        value = text,
+        onValueChange = { text = it },
+        backgroundColor = MiuixTheme.colorScheme.primaryContainer,
+        label = "Text Field",
+        modifier = Modifier.padding(horizontal = 28.dp),
+        keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
+        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
+    )
+
     MiuixSlider(
         progress = progress,
         onProgressChange = { newProgress -> progress = newProgress },
-        modifier = Modifier
-            .padding(horizontal = 28.dp)
-            .padding(bottom = 20.dp)
+        modifier = Modifier.padding(horizontal = 28.dp, vertical = 20.dp)
     )
 
     MiuixSlider(
         progress = progressDisable,
         onProgressChange = {},
         enabled = false,
-        modifier = Modifier
-            .padding(horizontal = 28.dp)
-            .padding(bottom = 20.dp)
+        modifier = Modifier.padding(horizontal = 28.dp)
     )
 
+    MiuixCard(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 28.dp, vertical = 20.dp)
+    ) {
+        CardView()
+    }
+
     MiuixCard(
         modifier = Modifier
             .fillMaxWidth()
             .padding(horizontal = 28.dp)
-            .padding(bottom = 20.dp + padding.calculateBottomPadding())
+            .padding(bottom = 20.dp + padding.calculateBottomPadding()),
+        color = MiuixTheme.colorScheme.primary
     ) {
-        MiuixText(
-            text = "Card",
-            style = MiuixTheme.textStyles.paragraph,
-            fontWeight = FontWeight.SemiBold,
-            fontSize = 16.sp
-        )
-        Spacer(Modifier.height(10.dp))
-        MiuixText(
-            text = "123456789",
-            style = MiuixTheme.textStyles.paragraph
-        )
-        MiuixText(
-            text = "一二三四五六七八九",
-            style = MiuixTheme.textStyles.paragraph
-        )
-        MiuixText(
-            text = "!@#$%^&*()_+-=",
-            style = MiuixTheme.textStyles.paragraph
-        )
+        CardView(color = Color.White)
     }
+}
+
+@Composable
+fun CardView(color: Color = MiuixTheme.colorScheme.onBackground) {
+    MiuixText(
+        color = color,
+        text = "Card",
+        style = MiuixTheme.textStyles.paragraph,
+        fontWeight = FontWeight.SemiBold,
+        fontSize = 16.sp
+    )
+    Spacer(Modifier.height(10.dp))
+    MiuixText(
+        color = color,
+        text = "123456789",
+        style = MiuixTheme.textStyles.paragraph
+    )
+    MiuixText(
+        color = color,
+        text = "一二三四五六七八九",
+        style = MiuixTheme.textStyles.paragraph
+    )
+    MiuixText(
+        color = color,
+        text = "!@#$%^&*()_+-=",
+        style = MiuixTheme.textStyles.paragraph
+    )
 }
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/MiuixTextField.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/MiuixTextField.kt
@@ -15,9 +15,9 @@ import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.text.TextLayoutResult
 import androidx.compose.ui.text.TextStyle
@@ -38,11 +38,12 @@ import top.yukonga.miuix.kmp.utils.squircleshape.SquircleShape
  * @param onValueChange The callback to be called when the value changes.
  * @param modifier The modifier to be applied to the [MiuixTextField].
  * @param insideMargin The margin inside the [MiuixTextField].
+ * @param backgroundColor The background color of the [MiuixTextField].
  * @param cornerRadius The corner radius of the [MiuixTextField].
  * @param label The label to be displayed when the [MiuixTextField] is empty.
+ * @param labelColor The color of the label.
  * @param enabled Whether the [MiuixTextField] is enabled.
  * @param readOnly Whether the [MiuixTextField] is read-only.
- * @param isSecondary Whether the [MiuixTextField] is secondary.
  * @param textStyle The text style to be applied to the [MiuixTextField].
  * @param keyboardOptions The keyboard options to be applied to the [MiuixTextField].
  * @param keyboardActions The keyboard actions to be applied to the [MiuixTextField].
@@ -60,8 +61,10 @@ fun MiuixTextField(
     onValueChange: (String) -> Unit,
     modifier: Modifier = Modifier,
     insideMargin: DpSize = DpSize(16.dp, 18.dp),
+    backgroundColor: Color = MiuixTheme.colorScheme.secondary,
     cornerRadius: Dp = 18.dp,
     label: String = "",
+    labelColor: Color = MiuixTheme.colorScheme.subTextField,
     enabled: Boolean = true,
     readOnly: Boolean = false,
     textStyle: TextStyle = MiuixTheme.textStyles.main,
@@ -76,8 +79,7 @@ fun MiuixTextField(
 ) {
     val isFocused by interactionSource.collectIsFocusedAsState()
     val borderWidth by animateDpAsState(if (isFocused) 1.6.dp else 0.dp)
-    val backgroundColor by rememberUpdatedState(MiuixTheme.colorScheme.secondary)
-    val borderColor by animateColorAsState(if (isFocused) MiuixTheme.colorScheme.primary else MiuixTheme.colorScheme.secondary)
+    val borderColor by animateColorAsState(if (isFocused) MiuixTheme.colorScheme.primary else backgroundColor)
     val labelOffsetY by animateDpAsState(if (value.isNotEmpty()) -(insideMargin.height / 2) else 0.dp)
     val innerTextOffsetY by animateDpAsState(if (value.isNotEmpty()) (insideMargin.height / 2) else 0.dp)
     val labelFontSize by animateDpAsState(if (value.isNotEmpty()) 10.dp else 16.dp)
@@ -125,7 +127,7 @@ fun MiuixTextField(
                             fontWeight = FontWeight.Medium,
                             fontSize = labelFontSize.value.sp,
                             modifier = Modifier.offset(y = labelOffsetY),
-                            color = MiuixTheme.colorScheme.subTextField
+                            color = labelColor
                         )
                         MiuixBox(
                             modifier = Modifier