Skip to content

Commit

Permalink
Add search option (#2)
Browse files Browse the repository at this point in the history
Add country search option
  • Loading branch information
cp-luzi-p authored Apr 9, 2022
1 parent 1d760d5 commit e18ef5c
Show file tree
Hide file tree
Showing 8 changed files with 184 additions and 41 deletions.
1 change: 1 addition & 0 deletions app/src/main/AndroidManifest.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,17 @@ 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.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.canopas.campose.countrypicker.CountryPickerBottomSheet
import com.canopas.campose.countrypicker.CountryTextField
import com.canopas.campose.countrypicker.countryList
import com.canopas.campose.countrypicker.model.Country
import com.canopas.campose.jetcountypicker.ui.theme.JetCountyPickerTheme

Expand All @@ -44,29 +48,37 @@ 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 = stringResource(R.string.select_country_text), textAlign = TextAlign.Center,
fontWeight = FontWeight.Bold,
fontSize = 20.sp
)
},
expanded,
onDismissRequest = {
expanded = false
},
onItemSelected = {
selectedCountry = it
expanded = false
focusManager.clearFocus()
}
) {
CountryTextField(
label = "Select country",
label = stringResource(R.string.select_country_text),
modifier = Modifier
.padding(top = 50.dp)
.align(Alignment.TopCenter),
expanded = expanded,
selectedCountry = selectedCountry
selectedCountry = selectedCountry,
defaultSelectedCountry = countryList(LocalContext.current).single { it.code == "IN" }
) {
expanded = !expanded
}
Expand Down
1 change: 1 addition & 0 deletions app/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<resources>
<string name="app_name">JetCountyPicker</string>
<string name="select_country_text">Select country</string>
</resources>
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -38,6 +39,7 @@ fun CountryPickerBottomSheet(
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
Expand All @@ -60,32 +62,43 @@ 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 {
searchValue = countrySearchView(modalBottomSheetState)

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(12.dp)) {
Text(text = localeToEmoji(country.code))
Text(
text = country.name,
modifier = Modifier
.padding(start = 8.dp)
.weight(2f)
)
Text(
text = country.dial_code,
modifier = Modifier
.padding(start = 8.dp)
)
}
Divider(
color = Color.LightGray, thickness = 0.5.dp
)
}
Divider(
color = Color.LightGray, thickness = 0.5.dp
)
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import androidx.compose.ui.input.pointer.PointerEvent
import androidx.compose.ui.input.pointer.PointerEventPass
import androidx.compose.ui.input.pointer.changedToUp
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.onClick
import androidx.compose.ui.semantics.semantics
Expand All @@ -31,17 +32,19 @@ fun CountryTextField(
shape: Shape = MaterialTheme.shapes.small,
expanded: Boolean = false,
selectedCountry: Country? = null,
defaultSelectedCountry: Country = countryList(LocalContext.current).first(),
colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors(),
onExpandedChange: () -> Unit,
) {
val countryValue = "${defaultSelectedCountry.dial_code} ${defaultSelectedCountry.name}"

OutlinedTextField(
modifier = modifier
.expandable(menuLabel = label, onExpandedChange = onExpandedChange),
readOnly = true,
isError = isError,
label = { Text(label) },
value = if (selectedCountry == null) "" else "${selectedCountry.dial_code} ${selectedCountry.name}",
value = if (selectedCountry == null) countryValue else "${selectedCountry.dial_code} ${selectedCountry.name}",
onValueChange = {},
colors = colors,
shape = shape,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
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.material.icons.rounded.Clear
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun countrySearchView(state: ModalBottomSheetState): String {

var searchValue: String by rememberSaveable { mutableStateOf("") }
var showClearIcon by rememberSaveable { mutableStateOf(false) }

showClearIcon = searchValue.isNotEmpty()

if (!state.isVisible) {
searchValue = ""
}

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)
)
},
trailingIcon = {
if (showClearIcon) {
IconButton(onClick = {
searchValue = ""
}) {
Icon(
imageVector = Icons.Rounded.Clear,
tint = MaterialTheme.colors.onBackground,
contentDescription = "Clear icon"
)
}
}
},
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent
)
)
if (searchValue.isEmpty()) {
Text(
text = stringResource(R.string.search_text),
style = MaterialTheme.typography.body1,
color = Color.Gray,
modifier = Modifier
.align(Alignment.CenterStart)
.padding(start = 52.dp)
)
}
}
}
return searchValue
}


@OptIn(ExperimentalMaterialApi::class)
@Preview(showBackground = true)
@Composable
fun PreviewSearchView() {
countrySearchView(rememberModalBottomSheetState(ModalBottomSheetValue.Hidden))
}
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
4 changes: 4 additions & 0 deletions countrypicker/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="search_text">Search</string>
</resources>

0 comments on commit e18ef5c

Please sign in to comment.