add search option

app/src/main/AndroidManifest.xml

@@ -13,6 +13,7 @@
             android:name=".MainActivity"
             android:exported="true"
             android:label="@string/app_name"
+            android:windowSoftInputMode="adjustResize"
             android:theme="@style/Theme.JetCountyPicker.NoActionBar">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

app/src/main/java/com/canopas/campose/jetcountypicker/MainActivity.kt

@@ -16,6 +16,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
@@ -44,24 +45,33 @@ fun SampleCountryPicker() {
     Box {
         var expanded by remember { mutableStateOf(false) }
         var selectedCountry by remember { mutableStateOf<Country?>(null) }
+        val focusManager = LocalFocusManager.current
 
-        CountryPickerBottomSheet(title = {
-            Text(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(16.dp),
-                text = "Select Country", textAlign = TextAlign.Center,
-                fontWeight = FontWeight.Bold,
-                fontSize = 20.sp
-            )
-        }, expanded, onDismissRequest = {
-            expanded = false
-        }, onItemSelected = {
-            selectedCountry = it
-            expanded = false
-        }) {
+        CountryPickerBottomSheet(
+            title = {
+                Text(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(16.dp),
+                    text = "Select Country", textAlign = TextAlign.Center,
+                    fontWeight = FontWeight.Bold,
+                    fontSize = 20.sp
+                )
+            },
+            expanded,
+            onDismissRequest = {
+                expanded = false
+            },
+            onItemSelected = {
+                selectedCountry = it
+                expanded = false
+                focusManager.clearFocus()
+            },
+            dialogSearch = true,
+        ) {
             CountryTextField(
                 label = "Select country",
+                placeholder = { Text(text = "+91 India") },
                 modifier = Modifier
                     .padding(top = 50.dp)
                     .align(Alignment.TopCenter),

countrypicker/src/main/java/com/canopas/campose/countrypicker/CountryPickerBottomSheet.kt

@@ -2,6 +2,7 @@ package com.canopas.campose.countrypicker
 
 import android.util.Log
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
@@ -33,11 +34,13 @@ fun CountryPickerBottomSheet(
     show: Boolean,
     onItemSelected: (country: Country) -> Unit,
     onDismissRequest: () -> Unit,
+    dialogSearch: Boolean = true,
     content: @Composable () -> Unit
 ) {
     val context = LocalContext.current
     val countries = remember { countryList(context) }
     var selectedCountry by remember { mutableStateOf(countries[0]) }
+    var searchValue by remember { mutableStateOf("") }
 
     val modalBottomSheetState = rememberModalBottomSheetState(
         initialValue = ModalBottomSheetValue.Hidden
@@ -60,32 +63,44 @@ fun CountryPickerBottomSheet(
         sheetShape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
         sheetContent = {
             title()
-            LazyColumn(
-                contentPadding = PaddingValues(16.dp)
-            ) {
-                items(countries) { country ->
-                    Row(modifier = Modifier
-                        .clickable {
-                            selectedCountry = country
-                            onItemSelected(selectedCountry)
+
+            Column {
+                if (dialogSearch) {
+                    searchValue = countrySearchView()
+                }
+                LazyColumn(
+                    contentPadding = PaddingValues(16.dp)
+                ) {
+                    items(
+                        if (searchValue.isEmpty()) {
+                            countries
+                        } else {
+                            countries.searchCountryList(searchValue)
                         }
-                        .padding(10.dp)) {
-                        Text(text = localeToEmoji(country.code))
-                        Text(
-                            text = country.name,
-                            modifier = Modifier
-                                .padding(start = 6.dp)
-                                .weight(2f)
-                        )
-                        Text(
-                            text = country.dial_code,
-                            modifier = Modifier
-                                .padding(start = 6.dp)
+                    ) { country ->
+                        Row(modifier = Modifier
+                            .clickable {
+                                selectedCountry = country
+                                onItemSelected(selectedCountry)
+                            }
+                            .padding(10.dp)) {
+                            Text(text = localeToEmoji(country.code))
+                            Text(
+                                text = country.name,
+                                modifier = Modifier
+                                    .padding(start = 6.dp)
+                                    .weight(2f)
+                            )
+                            Text(
+                                text = country.dial_code,
+                                modifier = Modifier
+                                    .padding(start = 6.dp)
+                            )
+                        }
+                        Divider(
+                            color = Color.LightGray, thickness = 0.5.dp
                         )
                     }
-                    Divider(
-                        color = Color.LightGray, thickness = 0.5.dp
-                    )
                 }
             }
 

countrypicker/src/main/java/com/canopas/campose/countrypicker/CountryPickerTextField.kt

@@ -26,6 +26,7 @@ import kotlinx.coroutines.coroutineScope
 @Composable
 fun CountryTextField(
     label: String = "",
+    placeholder: @Composable (() -> Unit)? = null,
     isError: Boolean = false,
     modifier: Modifier,
     shape: Shape = MaterialTheme.shapes.small,
@@ -41,6 +42,7 @@ fun CountryTextField(
         readOnly = true,
         isError = isError,
         label = { Text(label) },
+        placeholder = placeholder,
         value = if (selectedCountry == null) "" else "${selectedCountry.dial_code} ${selectedCountry.name}",
         onValueChange = {},
         colors = colors,

countrypicker/src/main/java/com/canopas/campose/countrypicker/CountrySearchView.kt

@@ -0,0 +1,72 @@
+package com.canopas.campose.countrypicker
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun countrySearchView(): String {
+    var searchValue by remember { mutableStateOf("") }
+    Row {
+        Box(
+            modifier = Modifier
+                .background(
+                    color = Color.White.copy(alpha = 0.1f)
+                )
+        ) {
+            TextField(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(48.dp),
+                value = searchValue,
+                onValueChange = {
+                    searchValue = it
+                },
+                textStyle = LocalTextStyle.current.copy(
+                    fontSize = 14.sp
+                ),
+                singleLine = true,
+                leadingIcon = {
+                    Icon(
+                        Icons.Default.Search,
+                        contentDescription = null,
+                        tint = Color.Black.copy(0.2f)
+                    )
+                },
+                colors = TextFieldDefaults.textFieldColors(
+                    backgroundColor = Color.Transparent,
+                    focusedIndicatorColor = Color.Transparent,
+                    disabledIndicatorColor = Color.Transparent,
+                    unfocusedIndicatorColor = Color.Transparent
+                )
+            )
+            if (searchValue.isEmpty()) {
+                Text(
+                    text = "Search",
+                    style = MaterialTheme.typography.body1,
+                    color = Color.Gray,
+                    modifier = Modifier
+                        .align(Alignment.CenterStart)
+                        .padding(start = 52.dp)
+                )
+            }
+        }
+    }
+    return searchValue
+}
+
+
+@Preview(showBackground = true)
+@Composable
+fun SearchViewPreview() {
+    countrySearchView()
+}

countrypicker/src/main/java/com/canopas/campose/countrypicker/CountyUtils.kt

@@ -27,4 +27,14 @@ fun getJsonDataFromAsset(context: Context, fileName: String): String? {
         return null
     }
     return jsonString
+}
+
+fun List<Country>.searchCountryList(countryName: String): MutableList<Country> {
+    val countryList = mutableListOf<Country>()
+    this.forEach {
+        if (it.name.lowercase().contains(countryName.lowercase())) {
+            countryList.add(it)
+        }
+    }
+    return countryList
 }