Bug fix and update

Author: togisoft

.idea/inspectionProfiles/Project_Default.xml

@@ -4,22 +4,27 @@ Jetpack Compose Country Code Picker
 
 <a href="https://www.buymeacoffee.com/togitech" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
 
+<h1>Updated</h1>
+
 If you are looking for Country Phone Code Picker for Jetpack Compose you can use the package.
 
+
 * Country numbers hints
 * Phone number visualTransformation (Automatic number formatting)
 * Automatic country recognition (detection by sim card if sim card is inserted)
 * With TextField
 * Can Customize
-* Adding language translations
-
+* Added language translations
+* Added clear text button
+* Dialog changed
 
 Languages:
 
 * Turkish
 * English
 * Italian
 * Arabic
+* Russian
 
 New features will be added every day. This project is open source without any profit motive.
 
@@ -28,23 +33,92 @@ https://github.com/togisoft/jetpack_compose_country_code_picker/blob/master/ccp/
 
 <h3>Screenshots</h3>
 <div class="row">
-  <img src="screenshots/1.gif" width="300"> 
-  <img src="screenshots/1.jpg" width="300"> 
-  <img src="screenshots/1-en.jpg" width="300"> 
-  <img src="screenshots/2.jpg" width="300"> 
-  <img src="screenshots/3.jpg" width="300"> 
-  <img src="screenshots/4.jpg" width="300"> 
-  <img src="screenshots/5.jpg" width="300"> 
-  <img src="screenshots/6-dark.jpg" width="300"> 
-  <img src="screenshots/7-dark.jpg" width="300"> 
+  <img src="screenshots/1.png" width="300"> 
+  <img src="screenshots/2.png" width="300"> 
+  <img src="screenshots/3.png" width="300"> 
+  <img src="screenshots/4.png" width="300"> 
+  <img src="screenshots/5.png" width="300"> 
+  <img src="screenshots/6.png" width="300"> 
+  <img src="screenshots/7.png" width="300"> 
+  <img src="screenshots/8.png" width="300"> 
  </div>
 
 
+**** Specifications ****
+
+<h3> DEFAULT </h3>
+
+```kotlin
+@Composable
+fun TogiCountryCodePicker(
+    text: String,
+    onValueChange: (String) -> Unit,
+    modifier: Modifier = Modifier,
+    color: Color = MaterialTheme.colors.background,
+    showCountryCode: Boolean = true,
+    showCountryFlag: Boolean = true,
+    defaultCountry: CountryData,
+    pickedCountry: (CountryData) -> Unit,
+    focusedBorderColor: Color = MaterialTheme.colors.primary,
+    unfocusedBorderColor: Color = MaterialTheme.colors.onSecondary,
+    cursorColor: Color = MaterialTheme.colors.primary,
+    error: Boolean,
+    rowPadding: Modifier = modifier.padding(vertical = 16.dp, horizontal = 16.dp)
+)
+
+```  
+
+<h3> Rounded </h3>
+
+```kotlin
+@Composable
+fun TogiRoundedPicker(
+    value: String,
+    onValueChange: (String) -> Unit,
+    modifier: Modifier = Modifier,
+    shape: Shape = RoundedCornerShape(24.dp),
+    color: Color = MaterialTheme.colors.background,
+    showCountryCode: Boolean = true,
+    showCountryFlag: Boolean = true,
+    defaultCountry: CountryData,
+    pickedCountry: (CountryData) -> Unit,
+    focusedBorderColor: Color = MaterialTheme.colors.primary,
+    unFocusedBorderColor: Color = MaterialTheme.colors.onSecondary,
+    cursorColor: Color = MaterialTheme.colors.primary,
+    error: Boolean,
+    rowPadding: Modifier = modifier.padding(vertical = 16.dp, horizontal = 16.dp)
+)
+
+```  
+
+<h3> Bottom Text Field </h3>
+
+```kotlin
+@Composable
+fun TogiBottomCodePicker(
+    text: String,
+    onValueChange: (String) -> Unit,
+    modifier: Modifier = Modifier,
+    color: Color = MaterialTheme.colors.background,
+    showCountryCode: Boolean = true,
+    showCountryFlag: Boolean = true,
+    showCountryName: Boolean = true,
+    defaultCountry: CountryData,
+    pickedCountry: (CountryData) -> Unit,
+    focusedBorderColor: Color = MaterialTheme.colors.primary,
+    unfocusedBorderColor: Color = MaterialTheme.colors.onSecondary,
+    cursorColor: Color = MaterialTheme.colors.primary,
+    error: Boolean,
+    rowPadding: Modifier = modifier.padding(vertical = 16.dp, horizontal = 16.dp)
+)
+
+```  
+
 
 <h3> Rounded Field Usage </h3>
 
 ```kotlin
-        val context = LocalContext.current
+val context = LocalContext.current
 var phoneCode by rememberSaveable { mutableStateOf(getDefaultPhoneCode(context)) }
 var defaultLang by rememberSaveable { mutableStateOf(getDefaultLangCode(context)) }
 val phoneNumber = rememberSaveable { mutableStateOf("") }
@@ -92,8 +166,6 @@ fun SelectCountryWithCountryCode() {
             defaultCountry = getLibCountries().single { it.countryCode == defaultLang },
             focusedBorderColor = MaterialTheme.colors.primary,
             unfocusedBorderColor = MaterialTheme.colors.primary,
-            dialogAppBarTextColor = Color.Black,
-            dialogAppBarColor = Color.White,
             error = isValidPhone,
             text = phoneNumber.value,
             onValueChange = { phoneNumber.value = it }
@@ -131,8 +203,7 @@ fun SelectCountryWithCountryCode() {
 * focusedBorderColor = TextField Border Color
 * unfocusedBorderColor = TextField Unfocused Border Color
 * cursorColor = TextField Cursor Color
-* dialogAppBarColor = Dialog Top App Bar Background Color
-* dialogAppBarTextColor = Dialog Top App Bar Text Color
+
 
 <h3> How to add in your project </h3>
 

README.md

@@ -4,12 +4,12 @@ plugins {
 }
 
 android {
-    compileSdk 32
+    compileSdk 33
 
     defaultConfig {
         applicationId "com.togitech.togii"
         minSdk 21
-        targetSdk 32
+        targetSdk 33
         versionCode 1
         versionName "1.0"
 
@@ -36,7 +36,7 @@ android {
         compose true
     }
     composeOptions {
-        kotlinCompilerExtensionVersion compose_version
+        kotlinCompilerExtensionVersion "1.3.2"
     }
     packagingOptions {
         resources {
@@ -47,13 +47,13 @@ android {
 
 dependencies {
 
-    implementation 'androidx.core:core-ktx:1.7.0'
+    implementation 'androidx.core:core-ktx:1.9.0'
     implementation "androidx.compose.ui:ui:$compose_version"
     implementation "androidx.compose.material:material:$compose_version"
     implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
-    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.4.1'
-    implementation 'androidx.activity:activity-compose:1.4.0'
-    implementation 'com.google.accompanist:accompanist-systemuicontroller:0.24.5-alpha'
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
+    implementation 'androidx.activity:activity-compose:1.6.0'
+    implementation 'com.google.accompanist:accompanist-systemuicontroller:0.26.5-rc'
 
     implementation project(path: ':ccp')
     testImplementation 'junit:junit:4.13.2'

app/build.gradle

@@ -1,5 +1,6 @@
 package com.togitech.togii
 
+import com.togitech.ccp.component.TogiBottomCodePicker
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
@@ -11,7 +12,6 @@ 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.platform.LocalContext
 import androidx.compose.ui.unit.dp
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
@@ -61,6 +61,7 @@ class MainActivity : ComponentActivity() {
 
             SelectCountryWithCountryCode()
             RoundedPicker()
+            BottomCodePicker()
 
         }
     }
@@ -84,8 +85,6 @@ class MainActivity : ComponentActivity() {
                 defaultCountry = getLibCountries().single { it.countryCode == defaultLang },
                 focusedBorderColor = MaterialTheme.colors.primary,
                 unfocusedBorderColor = MaterialTheme.colors.primary,
-                dialogAppBarTextColor = Color.Black,
-                dialogAppBarColor = Color.White,
                 error = isValidPhone,
                 text = phoneNumber.value,
                 onValueChange = { phoneNumber.value = it }
@@ -115,6 +114,54 @@ class MainActivity : ComponentActivity() {
 }
 
 
+@Composable
+fun BottomCodePicker() {
+    val context = LocalContext.current
+    var phoneCode by rememberSaveable { mutableStateOf(getDefaultPhoneCode(context)) }
+    val phoneNumber = rememberSaveable { mutableStateOf("") }
+    var defaultLang by rememberSaveable { mutableStateOf(getDefaultLangCode(context)) }
+    var isValidPhone by remember { mutableStateOf(true) }
+
+    Column(
+        modifier = Modifier.padding(8.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        TogiBottomCodePicker(
+            showCountryName = true,
+            pickedCountry = {
+                phoneCode = it.countryPhoneCode
+                defaultLang = it.countryCode
+            },
+            defaultCountry = getLibCountries().single { it.countryCode == defaultLang },
+            focusedBorderColor = MaterialTheme.colors.primary,
+            unfocusedBorderColor = MaterialTheme.colors.primary,
+            error = isValidPhone,
+            text = phoneNumber.value,
+            onValueChange = { phoneNumber.value = it }
+        )
+        val fullPhoneNumber = "$phoneCode${phoneNumber.value}"
+        val checkPhoneNumber = checkPhoneNumber(
+            phone = phoneNumber.value,
+            fullPhoneNumber = fullPhoneNumber,
+            countryCode = defaultLang
+        )
+        OutlinedButton(
+            onClick = {
+                isValidPhone = checkPhoneNumber
+            },
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp)
+                .height(
+                    50.dp
+                )
+        ) {
+            Text(text = "Phone Verify")
+        }
+    }
+}
+
+
 @Composable
 private fun RoundedPicker() {
     val context = LocalContext.current

app/src/main/java/com/togitech/togii/MainActivity.kt

@@ -1,12 +1,12 @@
 buildscript {
     ext {
-        compose_version = '1.2.0-beta02'
+        compose_version = '1.2.1'
     }
 }// Top-level build file where you can add configuration options common to all sub-projects/modules.
 plugins {
-    id 'com.android.application' version '7.1.2' apply false
-    id 'com.android.library' version '7.1.2' apply false
-    id 'org.jetbrains.kotlin.android' version '1.6.21' apply false
+    id 'com.android.application' version '7.3.0' apply false
+    id 'com.android.library' version '7.3.0' apply false
+    id 'org.jetbrains.kotlin.android' version '1.7.20' apply false
 }
 
 task clean(type: Delete) {

build.gradle

@@ -10,12 +10,12 @@ version '1.1.3'
 
 
 android {
-    compileSdk 32
+    compileSdk 33
     namespace = 'com.togitech.ccp'
 
     defaultConfig {
         minSdk 21
-        targetSdk 32
+        targetSdk 33
         versionCode 1
         versionName "1.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
@@ -40,7 +40,7 @@ android {
         freeCompilerArgs += "-Xopt-in=kotlin.RequiresOptIn"
     }
     composeOptions {
-        kotlinCompilerExtensionVersion compose_version
+        kotlinCompilerExtensionVersion "1.3.2"
     }
     packagingOptions {
         resources {
@@ -50,12 +50,16 @@ android {
 }
 
 dependencies {
+    def lifecycle_version = "2.5.1"
+    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"
+    implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycle_version"
+    implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version"
 
-    implementation 'androidx.core:core-ktx:1.7.0'
-    implementation 'androidx.appcompat:appcompat:1.4.1'
-    implementation 'androidx.activity:activity-compose:1.4.0'
+    implementation 'androidx.core:core-ktx:1.9.0'
+    implementation 'androidx.appcompat:appcompat:1.5.1'
+    implementation 'androidx.activity:activity-compose:1.6.0'
     implementation "androidx.compose.material:material:$compose_version"
-    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1'
+    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
     implementation 'com.googlecode.libphonenumber:libphonenumber:8.12.48'
 
 }