Adding a clear text icon

theolm · Oct 13, 2024 · a60c001 · a60c001
1 parent d5b3293
commit a60c001
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 40 deletions.
diff --git a/.idea/kotlinc.xml b/.idea/kotlinc.xml
diff --git a/app/src/main/java/dev/theolm/wwc/ui/components/ListItems.kt b/app/src/main/java/dev/theolm/wwc/ui/components/ListItems.kt
@@ -17,7 +17,6 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import dev.theolm.wwc.R
 
-@Suppress("ModifierHeightWithText")
 @Composable
 fun SelectableItemList(
     headlineText: String,

diff --git a/app/src/main/java/dev/theolm/wwc/ui/dialog/phoneinput/PhoneInput.kt b/app/src/main/java/dev/theolm/wwc/ui/dialog/phoneinput/PhoneInput.kt
@@ -14,8 +14,10 @@ import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Phone
+import androidx.compose.material.icons.rounded.Close
 import androidx.compose.material3.AlertDialogDefaults
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
@@ -43,7 +45,26 @@ import kotlinx.coroutines.delay
 
 private const val ResetCounterDelay = 300L
 
-@Suppress("ModifierHeightWithText", "LongParameterList")
+@Preview(locale = "pt", showBackground = true)
+@Composable
+private fun EditTextPreview() {
+    Surface(
+        modifier = Modifier
+            .wrapContentWidth()
+            .wrapContentHeight(),
+        tonalElevation = AlertDialogDefaults.TonalElevation,
+    ) {
+        PhoneInput(
+            phoneNumber = "997088821",
+            defaultCountryCode = Country(R.string.brazil, "+55"),
+            onChange = {},
+            onDone = {},
+            onIgnoreDefaultCode = {},
+            onCountryCodeClick = {}
+        )
+    }
+}
+
 @Composable
 internal fun PhoneInput(
     phoneNumber: String,
@@ -100,28 +121,84 @@ internal fun PhoneInput(
         ),
         singleLine = true,
         leadingIcon = {
-            Row(
-                modifier = Modifier.padding(start = 16.dp),
-                verticalAlignment = Alignment.CenterVertically
-            ) {
-                Icon(
-                    imageVector = Icons.Default.Phone,
-                    contentDescription = null
-                )
-                defaultCountryCode?.let {
-                    CountryCodeField(
-                        countryCode = it,
-                        onClick = onCountryCodeClick
-                    )
-                }
-            }
+            LeadIcon(
+                defaultCountryCode = defaultCountryCode,
+                onCountryCodeClick = onCountryCodeClick
+            )
+        },
+        trailingIcon = {
+            ClearIcon(
+                phoneNumber = phoneNumber,
+                onChange = onChange,
+                onIgnoreDefaultCode = onIgnoreDefaultCode
+            )
         },
         supportingText = {
             Text(text = stringResource(id = R.string.main_dialog_input_support))
         }
     )
 }
 
+@Composable
+private fun LeadIcon(
+    defaultCountryCode: Country?,
+    onCountryCodeClick: () -> Unit,
+) {
+    Row(
+        modifier = Modifier.padding(start = 16.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Icon(
+            imageVector = Icons.Default.Phone,
+            contentDescription = null
+        )
+        defaultCountryCode?.let {
+            CountryCodeField(
+                countryCode = it,
+                onClick = onCountryCodeClick
+            )
+        }
+    }
+}
+
+@Composable
+private fun ClearIcon(
+    phoneNumber: String,
+    onChange: (String) -> Unit,
+    onIgnoreDefaultCode: () -> Unit,
+) {
+    var clearButtonCounter by remember {
+        mutableIntStateOf(0)
+    }
+
+    LaunchedEffect(clearButtonCounter) {
+        runCatching {
+            delay(ResetCounterDelay)
+            clearButtonCounter = 0
+        }
+    }
+
+    IconButton(
+        onClick = {
+            if (phoneNumber.isBlank()) {
+                clearButtonCounter++
+                if (clearButtonCounter == 2) {
+                    onIgnoreDefaultCode.invoke()
+                    clearButtonCounter = 0
+                }
+            } else {
+                onChange("")
+                clearButtonCounter = 0
+            }
+        }
+    ) {
+        Icon(
+            imageVector = Icons.Rounded.Close,
+            contentDescription = null
+        )
+    }
+}
+
 @Composable
 private fun CountryCodeField(
     countryCode: Country,
@@ -139,23 +216,3 @@ private fun CountryCodeField(
         )
     }
 }
-
-@Preview(locale = "pt", showBackground = true)
-@Composable
-private fun EditTextPreview() {
-    Surface(
-        modifier = Modifier
-            .wrapContentWidth()
-            .wrapContentHeight(),
-        tonalElevation = AlertDialogDefaults.TonalElevation,
-    ) {
-        PhoneInput(
-            phoneNumber = "997088821",
-            defaultCountryCode = Country(R.string.brazil, "+55"),
-            onChange = {},
-            onDone = {},
-            onIgnoreDefaultCode = {},
-            onCountryCodeClick = {}
-        )
-    }
-}
diff --git a/config/detekt/detekt.yml b/config/detekt/detekt.yml
@@ -131,7 +131,7 @@ complexity:
     threshold: 75
   LongParameterList:
     active: true
-    functionThreshold: 6
+    functionThreshold: 7
     constructorThreshold: 7
     ignoreDefaultParameters: true
     ignoreDataClasses: true
@@ -243,7 +243,7 @@ compose:
   ComposableParametersOrdering:
     active: true
   ModifierHeightWithText:
-    active: true
+    active: false
   ModifierParameterPosition:
     active: true
   ModifierDefaultValue: