diff --git a/app/src/main/java/com/togitech/togii/MainActivity.kt b/app/src/main/java/com/togitech/togii/MainActivity.kt index 07876df..86d64da 100644 --- a/app/src/main/java/com/togitech/togii/MainActivity.kt +++ b/app/src/main/java/com/togitech/togii/MainActivity.kt @@ -14,8 +14,11 @@ 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.text.TextStyle +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import com.google.accompanist.systemuicontroller.rememberSystemUiController +import androidx.compose.ui.platform.LocalTextInputService import com.togitech.ccp.component.* import com.togitech.togii.ui.theme.TogiiTheme @@ -60,13 +63,46 @@ fun CountryCodePick() { val phoneNumber = rememberSaveable { mutableStateOf("") } val fullPhoneNumber = rememberSaveable { mutableStateOf("") } val onlyPhoneNumber = rememberSaveable { mutableStateOf("") } + val errorStatus = rememberSaveable { mutableStateOf(false) } + val liveErrorStatus = rememberSaveable { mutableStateOf(false) } + val keyboardController = LocalTextInputService.current TogiCountryCodePicker( text = phoneNumber.value, onValueChange = { phoneNumber.value = it }, unfocusedBorderColor = MaterialTheme.colors.primary, - bottomStyle =false, - shape = RoundedCornerShape(24.dp) + bottomStyle = false, + shape = RoundedCornerShape(24.dp), + textStyleDefault = TextStyle( + fontWeight = FontWeight.Normal, + color = Color.Yellow, + fontSize = MaterialTheme.typography.body1.fontSize, + ), + textStyleHint = TextStyle( + fontWeight = FontWeight.Thin, + color = Color.Gray, + fontSize = MaterialTheme.typography.body1.fontSize, + ), + textStyleError = TextStyle( + fontWeight = FontWeight.Normal, + color = MaterialTheme.colors.error, + fontSize = MaterialTheme.typography.body1.fontSize, + ), + countryCodeStyle = TextStyle( + fontWeight = FontWeight.Bold, + color = Color.Yellow, + fontSize = MaterialTheme.typography.body1.fontSize, + ), + countryCodeDialogBackgroundColor = Color.DarkGray, + changeStatustoErrorIfError = errorStatus.value, + turnLiveErrorStatusOn = true, + liveErrorStatus = { + liveErrorStatus.value = it + if (!it) { + errorStatus.value = false + keyboardController?.hideSoftwareKeyboard() + } + }, ) Spacer(modifier = Modifier.height(10.dp)) Button(onClick = { @@ -76,6 +112,7 @@ fun CountryCodePick() { } else { fullPhoneNumber.value = "Error" onlyPhoneNumber.value = "Error" + errorStatus.value = true } }) { Text(text = "Check") @@ -83,12 +120,12 @@ fun CountryCodePick() { Text( text = "Full Phone Number: ${fullPhoneNumber.value}", - color = if (getErrorStatus()) Color.Red else Color.Green + color = if (getErrorStatus() && errorStatus.value) Color.Red else Color.Green ) Text( text = "Only Phone Number: ${onlyPhoneNumber.value}", - color = if (getErrorStatus()) Color.Red else Color.Green + color = if (getErrorStatus() && errorStatus.value) Color.Red else Color.Green ) } } diff --git a/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt b/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt index 05f187b..af1202f 100644 --- a/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt +++ b/ccp/src/main/java/com/togitech/ccp/component/TogiCodePicker.kt @@ -2,6 +2,7 @@ package com.togitech.ccp.component import android.content.Context import androidx.compose.foundation.Image +import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.* @@ -22,12 +23,10 @@ import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource -import androidx.compose.ui.text.font.FontFamily -import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.TextUnit import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp import androidx.compose.ui.window.Dialog import com.togitech.ccp.R import com.togitech.ccp.data.CountryData @@ -46,6 +45,8 @@ fun TogiCodeDialog( pickedCountry: (CountryData) -> Unit, showFlag: Boolean = true, showCountryName: Boolean = false, + textStyleDefault: TextStyle = TextStyle.Default, + backgroundColor: Color = MaterialTheme.colors.background, ) { val context = LocalContext.current @@ -82,22 +83,26 @@ fun TogiCodeDialog( if (showCountryCode) { Text( text = isPickCountry.countryPhoneCode, - fontWeight = FontWeight.Bold, modifier = Modifier.padding(start = 6.dp), - fontSize = 18.sp, - color = MaterialTheme.colors.onSurface + style = textStyleDefault, + ) + Icon( + imageVector = Icons.Default.ArrowDropDown, + contentDescription = null, + tint = textStyleDefault.color ) - Icon(imageVector = Icons.Default.ArrowDropDown, contentDescription = null) } if (showCountryName) { Text( text = stringResource(id = getCountryName(isPickCountry.countryCode.lowercase())), - fontWeight = FontWeight.Bold, modifier = Modifier.padding(start = 6.dp), - fontSize = 18.sp, - color = MaterialTheme.colors.onSurface + style = textStyleDefault, + ) + Icon( + imageVector = Icons.Default.ArrowDropDown, + contentDescription = null, + tint = textStyleDefault.color ) - Icon(imageVector = Icons.Default.ArrowDropDown, contentDescription = null) } } @@ -112,7 +117,9 @@ fun TogiCodeDialog( pickedCountry(countryItem) isPickCountry = countryItem isOpenDialog = false - } + }, + textStyleDefault = textStyleDefault, + backgroundColor = backgroundColor, ) } } @@ -126,6 +133,8 @@ fun CountryDialog( onSelected: (item: CountryData) -> Unit, context: Context, dialogStatus: Boolean, + textStyleDefault: TextStyle = TextStyle.Default, + backgroundColor: Color = MaterialTheme.colors.background, ) { var searchValue by remember { mutableStateOf("") } if (!dialogStatus) searchValue = "" @@ -134,23 +143,25 @@ fun CountryDialog( onDismissRequest = onDismissRequest, content = { Surface( - color = MaterialTheme.colors.onSurface, + color = textStyleDefault.color, modifier = Modifier .fillMaxWidth() .clip(RoundedCornerShape(25.dp)) ) { Scaffold { scaffold -> scaffold.calculateBottomPadding() - Column(modifier = Modifier.fillMaxSize()) { + Column(modifier = Modifier + .fillMaxSize() + .background(backgroundColor)) { SearchTextField( value = searchValue, onValueChange = { searchValue = it }, - textColor = MaterialTheme.colors.onSurface, - fontSize = 16.sp, + textColor = textStyleDefault.color, + fontSize = textStyleDefault.fontSize, leadingIcon = { Icon( imageVector = Icons.Filled.Search, contentDescription = "Search", - tint = MaterialTheme.colors.onSurface, + tint = textStyleDefault.color, modifier = Modifier.padding(horizontal = 3.dp) ) }, @@ -186,8 +197,8 @@ fun CountryDialog( Text( stringResource(id = getCountryName(countryItem.countryCode.lowercase())), Modifier.padding(horizontal = 18.dp), - fontSize = 14.sp, - fontFamily = FontFamily.Serif, + style = textStyleDefault, + fontFamily = textStyleDefault.fontFamily ) } } diff --git a/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt b/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt index 856742e..d08c2dd 100644 --- a/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt +++ b/ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt @@ -19,6 +19,7 @@ import androidx.compose.ui.graphics.Shape import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalTextInputService import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.unit.dp @@ -48,7 +49,27 @@ fun TogiCountryCodePicker( focusedBorderColor: Color = MaterialTheme.colors.primary, unfocusedBorderColor: Color = MaterialTheme.colors.onSecondary, cursorColor: Color = MaterialTheme.colors.primary, - bottomStyle: Boolean = false + bottomStyle: Boolean = false, + textStyleDefault: TextStyle = TextStyle.Default, + textStyleHint: TextStyle = TextStyle( + fontWeight = FontWeight.Normal, + color = MaterialTheme.colors.onBackground, + fontSize = MaterialTheme.typography.body1.fontSize, + ), + textStyleError: TextStyle = TextStyle( + fontWeight = FontWeight.Bold, + color = MaterialTheme.colors.error, + fontSize = MaterialTheme.typography.caption.fontSize, + ), + countryCodeStyle: TextStyle = TextStyle( + fontWeight = FontWeight.Bold, + color = MaterialTheme.colors.onBackground, + fontSize = MaterialTheme.typography.body1.fontSize, + ), + countryCodeDialogBackgroundColor: Color, + changeStatustoErrorIfError: Boolean = true, + turnLiveErrorStatusOn: Boolean = false, + liveErrorStatus: (Boolean) -> Unit = {}, ) { val context = LocalContext.current var textFieldValue by rememberSaveable { mutableStateOf("") } @@ -66,9 +87,9 @@ fun TogiCountryCodePicker( ) } + countryCodeState = defaultLang fullNumberState = phoneCode + textFieldValue phoneNumberState = textFieldValue - countryCodeState = defaultLang Surface(color = color) { @@ -82,7 +103,8 @@ fun TogiCountryCodePicker( defaultSelectedCountry = getLibCountries.single { it.countryCode == defaultLang }, showCountryCode = showCountryCode, showFlag = showCountryFlag, - showCountryName = true + showCountryName = true, + backgroundColor = countryCodeDialogBackgroundColor, ) } Row( @@ -97,15 +119,23 @@ fun TogiCountryCodePicker( if (text != it) { onValueChange(it) } + fullNumberState = phoneCode + textFieldValue + phoneNumberState = textFieldValue + + if (turnLiveErrorStatusOn) { + liveErrorStatus(isPhoneNumber()) + } + }, singleLine = true, colors = TextFieldDefaults.outlinedTextFieldColors( - focusedBorderColor = if (getErrorStatus()) Color.Red else focusedBorderColor, - unfocusedBorderColor = if (getErrorStatus()) Color.Red else unfocusedBorderColor, - cursorColor = cursorColor + focusedBorderColor = if (getErrorStatus() && changeStatustoErrorIfError) Color.Red else focusedBorderColor, + unfocusedBorderColor = if (getErrorStatus() && changeStatustoErrorIfError) Color.Red else unfocusedBorderColor, + cursorColor = cursorColor, ), + textStyle = textStyleDefault, visualTransformation = PhoneNumberTransformation(getLibCountries.single { it.countryCode == defaultLang }.countryCode.uppercase()), - placeholder = { Text(text = stringResource(id = getNumberHint(getLibCountries.single { it.countryCode == defaultLang }.countryCode.lowercase()))) }, + placeholder = { Text(text = stringResource(id = getNumberHint(getLibCountries.single { it.countryCode == defaultLang }.countryCode.lowercase())), style = textStyleHint) }, keyboardOptions = KeyboardOptions.Default.copy( keyboardType = KeyboardType.NumberPassword, autoCorrect = true, @@ -124,7 +154,9 @@ fun TogiCountryCodePicker( }, defaultSelectedCountry = getLibCountries.single { it.countryCode == defaultLang }, showCountryCode = showCountryCode, - showFlag = showCountryFlag + showFlag = showCountryFlag, + textStyleDefault = countryCodeStyle, + backgroundColor = countryCodeDialogBackgroundColor, ) } } @@ -137,16 +169,14 @@ fun TogiCountryCodePicker( Icon( imageVector = Icons.Filled.Clear, contentDescription = "Clear", - tint = if (getErrorStatus()) Color.Red else MaterialTheme.colors.onSurface + tint = if (getErrorStatus() && changeStatustoErrorIfError) textStyleError.color else textStyleDefault.color, ) } }) } - if (getErrorStatus()) Text( + if (getErrorStatus() && changeStatustoErrorIfError) Text( text = stringResource(id = R.string.invalid_number), - color = MaterialTheme.colors.error, - style = MaterialTheme.typography.caption, - fontWeight = FontWeight.Bold, + style = textStyleError, modifier = Modifier.padding(top = 0.8.dp) ) }