Add clear button for search field

errr-maxx-builds · Apr 21, 2024 · 25e0eae · 25e0eae
1 parent 07f96f6
commit 25e0eae
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 8 deletions.
diff --git a/app/src/main/java/tk/zwander/wifilist/ui/components/ExpandableSearchField.kt b/app/src/main/java/tk/zwander/wifilist/ui/components/ExpandableSearchField.kt
@@ -1,13 +1,16 @@
 package tk.zwander.wifilist.ui.components
 
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.expandIn
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.shrinkOut
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Clear
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
@@ -125,17 +128,20 @@ fun ExpandedSearchView(
         horizontalArrangement = Arrangement.Start,
         verticalAlignment = Alignment.CenterVertically
     ) {
-        IconButton(onClick = {
-            onExpandedChanged(false)
-            onSearchDisplayClosed()
-            keyboardController?.hide()
-        }) {
+        IconButton(
+            onClick = {
+                onExpandedChanged(false)
+                onSearchDisplayClosed()
+                keyboardController?.hide()
+            },
+        ) {
             Icon(
                 painter = painterResource(id = R.drawable.ic_back),
                 contentDescription = stringResource(id = R.string.back),
-                tint = tint
+                tint = tint,
             )
         }
+
         TextField(
             value = searchDisplay,
             onValueChange = {
@@ -154,15 +160,34 @@ fun ExpandedSearchView(
             keyboardActions = KeyboardActions(
                 onDone = {
                     focusManager.clearFocus()
-                }
+                },
             ),
             colors = TextFieldDefaults.colors(
                 focusedContainerColor = Color.Transparent,
                 unfocusedContainerColor = Color.Transparent,
                 disabledContainerColor = Color.Transparent,
                 errorContainerColor = Color.Transparent,
             ),
-            singleLine = true
+            singleLine = true,
+            trailingIcon = {
+                IconButton(
+                    onClick = {
+                        onSearchDisplayChanged("")
+                    },
+                    enabled = searchDisplay.isNotEmpty(),
+                ) {
+                    val iconColor by animateColorAsState(
+                        targetValue = if (searchDisplay.isNotEmpty()) tint else tint.copy(alpha = LocalContentColor.current.alpha),
+                        label = "SearchClearIconColor",
+                    )
+
+                    Icon(
+                        imageVector = Icons.Default.Clear,
+                        contentDescription = stringResource(id = R.string.clear),
+                        tint = iconColor,
+                    )
+                }
+            },
         )
     }
 }
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -30,6 +30,7 @@
     <string name="plmn">PLMN</string>
     <string name="realm">Realm</string>
     <string name="cert_suite">Cert Suite</string>
+    <string name="clear">Clear</string>
 
     <string name="menu">Menu</string>
     <string name="patreon">Patreon</string>