Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add search option #2

Merged
merged 6 commits into from
Apr 9, 2022
Merged

Add search option #2

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9ba9d32
add search option
cp-luzi-p Apr 6, 2022
f2c2b74
Add default country Selected
cp-luzi-p Apr 8, 2022
5b19e87
Minor Change.
cp-luzi-p Apr 8, 2022
0c42395
MR Change
cp-luzi-p Apr 9, 2022
67405a7
add string into string resource
cp-luzi-p Apr 9, 2022
55c14ab
Padding value Change
cp-luzi-p Apr 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions app/src/main/AndroidManifest.xml
View file
Open in desktop
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
44 changes: 28 additions & 16 deletions app/src/main/java/com/canopas/campose/jetcountypicker/MainActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,16 @@ 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.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 +47,38 @@ 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",
cp-luzi-p marked this conversation as resolved.
Show resolved Hide resolved
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
61 changes: 38 additions & 23 deletions countrypicker/src/main/java/com/canopas/campose/countrypicker/CountryPickerBottomSheet.kt
View file
Open in desktop
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 @@ -33,11 +34,13 @@ fun CountryPickerBottomSheet(
show: Boolean,
onItemSelected: (country: Country) -> Unit,
onDismissRequest: () -> Unit,
dialogSearch: Boolean = true,
cp-luzi-p marked this conversation as resolved.
Show resolved Hide resolved
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
Expand All @@ -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(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(10.dp)) {
Text(text = localeToEmoji(country.code))
Text(
text = country.name,
modifier = Modifier
.padding(start = 6.dp)
cp-luzi-p marked this conversation as resolved.
Show resolved Hide resolved
.weight(2f)
)
Text(
text = country.dial_code,
modifier = Modifier
.padding(start = 6.dp)
cp-luzi-p marked this conversation as resolved.
Show resolved Hide resolved
)
}
Divider(
color = Color.LightGray, thickness = 0.5.dp
)
}
Divider(
color = Color.LightGray, thickness = 0.5.dp
)
}
}

Expand Down
5 changes: 4 additions & 1 deletion countrypicker/src/main/java/com/canopas/campose/countrypicker/CountryPickerTextField.kt
View file
Open in desktop
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
102 changes: 102 additions & 0 deletions countrypicker/src/main/java/com/canopas/campose/countrypicker/CountrySearchView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
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.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) }

if (searchValue.isEmpty()) {
showClearIcon = false
} else if (searchValue.isNotEmpty()) {
cp-luzi-p marked this conversation as resolved.
Show resolved Hide resolved
showClearIcon = true
}

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 = "Search",
cp-luzi-p marked this conversation as resolved.
Show resolved Hide resolved
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))
}
10 changes: 10 additions & 0 deletions countrypicker/src/main/java/com/canopas/campose/countrypicker/CountyUtils.kt
View file
Open in desktop
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
}