library: Allow add icon on both sides of MiuixTextField

miuix-kotlin-multiplatform · Sep 5, 2024 · d80a7a0 · d80a7a0
1 parent f8db27d
commit d80a7a0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/composeApp/src/commonMain/kotlin/component/OtherComponent.kt b/composeApp/src/commonMain/kotlin/component/OtherComponent.kt
@@ -98,7 +98,7 @@ fun OtherComponent(padding: PaddingValues) {
         label = "Text Field",
         modifier = Modifier.padding(horizontal = 24.dp, vertical = 20.dp),
         keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
-        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
+        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done)
     )
 
     MiuixTextField(

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
@@ -6,6 +6,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsFocusedAsState
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
@@ -48,6 +49,8 @@ import top.yukonga.miuix.kmp.utils.squircleshape.SquircleShape
  * @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].
+ * @param leadingIcon The leading icon to be displayed in the [MiuixTextField].
+ * @param trailingIcon The trailing icon to be displayed in the [MiuixTextField].
  * @param singleLine Whether the text field is single line.
  * @param maxLines The maximum number of lines allowed to be displayed in [MiuixTextField].
  * @param minLines The minimum number of lines allowed to be displayed in [MiuixTextField]. It is required
@@ -71,6 +74,8 @@ fun MiuixTextField(
     textStyle: TextStyle = MiuixTheme.textStyles.main,
     keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
     keyboardActions: KeyboardActions = KeyboardActions.Default,
+    leadingIcon: @Composable (() -> Unit)? = null,
+    trailingIcon: @Composable (() -> Unit)? = null,
     singleLine: Boolean = false,
     maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
     minLines: Int = 1,
@@ -80,8 +85,11 @@ fun MiuixTextField(
 ) {
     @Suppress("NAME_SHADOWING")
     val interactionSource = interactionSource ?: remember { MutableInteractionSource() }
-    val paddingModifier = remember(insideMargin) {
-        Modifier.padding(horizontal = insideMargin.width, vertical = insideMargin.height)
+    val paddingModifier = remember(insideMargin, leadingIcon, trailingIcon) {
+        if (leadingIcon == null && trailingIcon == null) Modifier.padding(insideMargin.width, vertical = insideMargin.height)
+        else if (leadingIcon == null) Modifier.padding(start = insideMargin.width).padding(vertical = insideMargin.height)
+        else if (trailingIcon == null) Modifier.padding(end = insideMargin.width).padding(vertical = insideMargin.height)
+        else Modifier.padding(vertical = insideMargin.height)
     }
     val isFocused by interactionSource.collectIsFocusedAsState()
     val borderWidth by animateDpAsState(if (isFocused) 1.6.dp else 0.dp)
@@ -123,13 +131,17 @@ fun MiuixTextField(
                         shape = SquircleShape(cornerRadius)
                     )
             ) {
-                MiuixBox(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .then(paddingModifier)
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    verticalAlignment = Alignment.CenterVertically
                 ) {
+                    if (leadingIcon != null) {
+                        leadingIcon()
+                    }
                     MiuixBox(
-                        modifier = Modifier.fillMaxWidth()
+                        modifier = Modifier
+                            .weight(1f)
+                            .then(paddingModifier)
                     ) {
                         MiuixText(
                             text = label,
@@ -147,6 +159,9 @@ fun MiuixTextField(
                             innerTextField()
                         }
                     }
+                    if (trailingIcon != null) {
+                        trailingIcon()
+                    }
                 }
             }
         }