library: SearchBar: Add default icons on both sides of InputField

Author: YuKongA

example/src/commonMain/kotlin/MainPage.kt

@@ -13,7 +13,6 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
@@ -22,20 +21,16 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.unit.dp
 import component.OtherComponent
 import component.TextComponent
 import top.yukonga.miuix.kmp.basic.BasicComponent
-import top.yukonga.miuix.kmp.basic.Icon
 import top.yukonga.miuix.kmp.basic.InputField
 import top.yukonga.miuix.kmp.basic.ScrollBehavior
 import top.yukonga.miuix.kmp.basic.SearchBar
 import top.yukonga.miuix.kmp.basic.SmallTitle
 import top.yukonga.miuix.kmp.basic.Text
-import top.yukonga.miuix.kmp.icon.MiuixIcons
-import top.yukonga.miuix.kmp.icon.icons.useful.Search
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.overScrollVertical
 
@@ -101,18 +96,7 @@ fun MainPage(
                                 onSearch = { expanded = false },
                                 expanded = expanded,
                                 onExpandedChange = { expanded = it },
-                                label = "Search",
-                                leadingIcon = {
-                                    Icon(
-                                        modifier = Modifier
-                                            .padding(start = 12.dp, end = 8.dp)
-                                            .size(20.dp)
-                                            .alpha(0.4f),
-                                        imageVector = MiuixIcons.Useful.Search,
-                                        tint = MiuixTheme.colorScheme.onSurfaceContainer,
-                                        contentDescription = "Search"
-                                    )
-                                },
+                                label = "Search"
                             )
                         },
                         outsideRightAction = {
@@ -189,15 +173,7 @@ fun MainPage(
                                     onSearch = { expanded = false },
                                     expanded = expanded,
                                     onExpandedChange = { expanded = it },
-                                    label = "Search",
-                                    leadingIcon = {
-                                        Icon(
-                                            modifier = Modifier.padding(horizontal = 16.dp),
-                                            imageVector = MiuixIcons.Useful.Search,
-                                            tint = MiuixTheme.colorScheme.onSurfaceContainer,
-                                            contentDescription = "Search"
-                                        )
-                                    },
+                                    label = "Search"
                                 )
                             },
                             outsideRightAction = {

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SearchBar.kt

@@ -1,7 +1,10 @@
 package top.yukonga.miuix.kmp.basic
 
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.Interaction
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsFocusedAsState
@@ -11,6 +14,7 @@ import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
@@ -20,6 +24,7 @@ import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.focus.onFocusChanged
@@ -32,6 +37,9 @@ import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 import kotlinx.coroutines.delay
+import top.yukonga.miuix.kmp.icon.MiuixIcons
+import top.yukonga.miuix.kmp.icon.icons.basic.SearchCleanup
+import top.yukonga.miuix.kmp.icon.icons.useful.Search
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.BackHandler
 import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
@@ -130,11 +138,34 @@ fun InputField(
     @Suppress("NAME_SHADOWING")
     val interactionSource = interactionSource ?: remember { MutableInteractionSource() }
 
-    val paddingModifier = remember(insideMargin, leadingIcon, trailingIcon) {
-        if (leadingIcon == null && trailingIcon == null) Modifier.padding(horizontal = 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)
+    @Suppress("NAME_SHADOWING")
+    val leadingIcon = leadingIcon ?: {
+        Icon(
+            modifier = Modifier.padding(start = 16.dp, end = 8.dp),
+            imageVector = MiuixIcons.Useful.Search,
+            tint = MiuixTheme.colorScheme.onSurfaceContainer,
+            contentDescription = "Search"
+        )
+    }
+
+    @Suppress("NAME_SHADOWING")
+    val trailingIcon = trailingIcon ?: {
+        AnimatedVisibility(
+            visible = query.isNotEmpty(),
+            enter = fadeIn(),
+            exit = fadeOut(),
+        ) {
+            Box(
+                modifier = Modifier.padding(start = 8.dp, end = 16.dp),
+            ) {
+                Icon(
+                    modifier = Modifier.clip(CircleShape).clickable { onQueryChange("") },
+                    imageVector = MiuixIcons.Basic.SearchCleanup,
+                    tint = MiuixTheme.colorScheme.onSurfaceContainer,
+                    contentDescription = "Search Cleanup"
+                )
+            }
+        }
     }
 
     val focused = interactionSource.collectIsFocusedAsState().value
@@ -174,25 +205,20 @@ fun InputField(
                         modifier = Modifier.fillMaxWidth(),
                         verticalAlignment = Alignment.CenterVertically
                     ) {
-                        if (leadingIcon != null) {
-                            leadingIcon()
-                        }
+                        leadingIcon()
                         Box(
                             modifier = Modifier
                                 .weight(1f)
-                                .then(paddingModifier),
+                                .padding(vertical = insideMargin.height),
                             contentAlignment = Alignment.CenterStart
                         ) {
                             Text(
                                 text = if (!(query.isNotEmpty() || expanded)) label else "",
                                 color = MiuixTheme.colorScheme.onSurfaceContainerHigh
                             )
-
                             innerTextField()
                         }
-                        if (trailingIcon != null) {
-                            trailingIcon()
-                        }
+                        trailingIcon()
                     }
                 }
             }

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/icon/icons/basic/SearchCleanup.kt

@@ -0,0 +1,69 @@
+package top.yukonga.miuix.kmp.icon.icons.basic
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PathFillType
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.path
+import androidx.compose.ui.unit.dp
+import top.yukonga.miuix.kmp.icon.MiuixIcons
+
+val MiuixIcons.Basic.SearchCleanup: ImageVector
+    get() {
+        if (_searchCleanup != null) return _searchCleanup!!
+        _searchCleanup = ImageVector.Builder("SearchCleanup", 18.199984f.dp, 18.199984f.dp, 68f, 68f).apply {
+            path(
+                fill = SolidColor(Color.White),
+                fillAlpha = 0.06f,
+                pathFillType = PathFillType.NonZero
+            ) {
+                moveTo(34f, 66f)
+                curveTo(51.6731f, 66f, 66f, 51.6731f, 66f, 34f)
+                curveTo(66f, 16.3269f, 51.6731f, 2f, 34f, 2f)
+                curveTo(16.3269f, 2f, 2f, 16.3269f, 2f, 34f)
+                curveTo(2f, 51.6731f, 16.3269f, 66f, 34f, 66f)
+                close()
+            }
+            path(
+                fill = SolidColor(Color.Transparent),
+                stroke = SolidColor(Color.Black),
+                strokeAlpha = 0.1f,
+                strokeLineWidth = 0.0f,
+                pathFillType = PathFillType.NonZero
+            ) {
+                moveTo(34f, 67f)
+                curveTo(52.2254f, 67f, 67f, 52.2254f, 67f, 34f)
+                curveTo(67f, 15.7746f, 52.2254f, 1f, 34f, 1f)
+                curveTo(15.7746f, 1f, 1f, 15.7746f, 1f, 34f)
+                curveTo(1f, 52.2254f, 15.7746f, 67f, 34f, 67f)
+                close()
+            }
+            path(
+                fill = SolidColor(Color.White),
+                fillAlpha = 0.3f,
+                pathFillType = PathFillType.EvenOdd
+            ) {
+                moveTo(44.6066f, 27.8492f)
+                curveTo(45.7782f, 26.6777f, 45.7782f, 24.7782f, 44.6066f, 23.6066f)
+                curveTo(43.435f, 22.435f, 41.5355f, 22.435f, 40.364f, 23.6066f)
+                lineTo(34f, 29.9706f)
+                lineTo(27.636f, 23.6066f)
+                curveTo(26.4645f, 22.435f, 24.565f, 22.435f, 23.3934f, 23.6066f)
+                curveTo(22.2218f, 24.7782f, 22.2218f, 26.6777f, 23.3934f, 27.8492f)
+                lineTo(29.7574f, 34.2132f)
+                lineTo(23.3934f, 40.5772f)
+                curveTo(22.2218f, 41.7487f, 22.2218f, 43.6482f, 23.3934f, 44.8198f)
+                curveTo(24.565f, 45.9914f, 26.4645f, 45.9914f, 27.636f, 44.8198f)
+                lineTo(34f, 38.4558f)
+                lineTo(40.364f, 44.8198f)
+                curveTo(41.5355f, 45.9914f, 43.435f, 45.9914f, 44.6066f, 44.8198f)
+                curveTo(45.7782f, 43.6482f, 45.7782f, 41.7487f, 44.6066f, 40.5772f)
+                lineTo(38.2426f, 34.2132f)
+                lineTo(44.6066f, 27.8492f)
+                close()
+            }
+        }.build()
+        return _searchCleanup!!
+    }
+
+private var _searchCleanup: ImageVector? = null