adding two other textfield on inputScreen

devscast · Jun 1, 2024 · 4ccfa1c · 4ccfa1c
1 parent 719f077
commit 4ccfa1c
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ Validable is an extensible library that allows you to validate your text fields
 
 This is what it looks like :
 
-<img src="screenshots/inputscreen.png?raw=true" width="220" alt="Welcome screen">
+<img src="screenshots/inputScreen.png?raw=true" width="459" alt="Welcome screen">
 
 ```kotlin  
 @Composable  

diff --git a/sample/build.gradle.kts b/sample/build.gradle.kts
@@ -63,7 +63,6 @@ dependencies {
 
     implementation("androidx.compose.ui:ui")
     implementation("androidx.activity:activity-compose:1.9.0")
-//    implementation("androidx.compose.material:material")
     implementation("androidx.compose.ui:ui-tooling-preview")
     implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.8.1")
     testImplementation("junit:junit:4.13.2")

diff --git a/sample/src/main/java/tech/devscast/validable/sample/ui/screens/InputScreen.kt b/sample/src/main/java/tech/devscast/validable/sample/ui/screens/InputScreen.kt
@@ -1,5 +1,7 @@
 package tech.devscast.validable.sample.ui.screens
 
+import android.content.ContentValues.TAG
+import android.util.Log
 import android.widget.Toast
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.ExperimentalAnimationApi
@@ -10,25 +12,28 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.Shapes
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import tech.devscast.validable.CardScheme
 import tech.devscast.validable.CardSchemeValidable
 import tech.devscast.validable.EmailValidable
+import tech.devscast.validable.HostnameValidable
 import tech.devscast.validable.NotEmptyValidable
+import tech.devscast.validable.RegexValidable
+import tech.devscast.validable.UrlValidable
 import tech.devscast.validable.withValidable
 
 @ExperimentalAnimationApi
@@ -39,12 +44,14 @@ fun InputScreen() {
     val emailField = remember { EmailValidable() }
     val nameField = remember { NotEmptyValidable() }
 
-    val cardField = remember { CardSchemeValidable(CardScheme.MasterCard,) }
-    val multipleCardField = remember {
-        CardSchemeValidable(
-            CardScheme.merge(CardScheme.MasterCard, CardScheme.Visa),
-            "Invalid Card"
-        )
+    val cardField = remember { CardSchemeValidable(CardScheme.MasterCard) }
+
+    val urlField = remember {
+        UrlValidable()
+    }
+
+    val hostnameField = remember {
+        HostnameValidable()
     }
 
     Column(
@@ -53,7 +60,7 @@ fun InputScreen() {
         modifier = Modifier.padding(24.dp)
     ) {
         OutlinedTextField(
-            shape = MaterialTheme.shapes.large,
+            shape = RoundedCornerShape(20.dp),
             label = { Text("Email address", style = MaterialTheme.typography.labelLarge) },
             value = emailField.value,
             onValueChange = { emailField.value = it },
@@ -67,7 +74,7 @@ fun InputScreen() {
         Spacer(modifier = Modifier.height(16.dp))
 
         OutlinedTextField(
-            shape = MaterialTheme.shapes.large,
+            shape = RoundedCornerShape(20.dp),
             label = { Text(text = "Username", style = MaterialTheme.typography.labelLarge) },
             value = nameField.value,
             onValueChange = { nameField.value = it },
@@ -81,10 +88,66 @@ fun InputScreen() {
 
         Spacer(modifier = Modifier.height(16.dp))
 
+        OutlinedTextField(
+            shape = RoundedCornerShape(20.dp),
+            label = {
+                Text(text = "Card credit number", style = MaterialTheme.typography.labelLarge)
+            },
+            value = cardField.value,
+            onValueChange = { cardField.value = it },
+            isError = cardField.hasError(),
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        AnimatedVisibility(visible = cardField.hasError()) {
+            Log.d(TAG, "InputScreen: ${cardField.errorMessage}")
+            TextFieldError(textError = cardField.errorMessage ?: "")
+        }
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        OutlinedTextField(
+            shape = RoundedCornerShape(20.dp),
+            label = { Text(text = "Url", style = MaterialTheme.typography.labelLarge) },
+            value = urlField.value,
+            onValueChange = { urlField.value = it },
+            isError = urlField.hasError(),
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        AnimatedVisibility(visible = urlField.hasError()) {
+            TextFieldError(textError = urlField.errorMessage ?: "")
+        }
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        OutlinedTextField(
+            shape = RoundedCornerShape(20.dp),
+            label = { Text(text = "Hostname", style = MaterialTheme.typography.labelLarge) },
+            value = hostnameField.value,
+            onValueChange = {
+                hostnameField.value = it
+            },
+            isError = hostnameField.hasError(),
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        AnimatedVisibility(visible = hostnameField.hasError()) {
+            TextFieldError(textError = hostnameField.errorMessage ?: "")
+        }
+
+        Spacer(modifier = Modifier.height(16.dp))
+
         Button(
             modifier = Modifier.fillMaxWidth(),
             onClick = {
-                withValidable(emailField, nameField) {
+                withValidable(
+                    emailField,
+                    nameField,
+                    cardField,
+                    urlField,
+                    hostnameField
+                ) {
                     Toast.makeText(context, "All fields are valid", Toast.LENGTH_SHORT).show()
                 }
             }
@@ -99,6 +162,7 @@ fun TextFieldError(textError: String) {
     Row(modifier = Modifier.fillMaxWidth()) {
         Text(
             text = textError,
+            fontSize = 14.sp,
             modifier = Modifier.fillMaxWidth(),
             style = LocalTextStyle.current.copy(color = MaterialTheme.colorScheme.error)
         )

diff --git a/screenshots/inputScreen.png b/screenshots/inputScreen.png
diff --git a/validable/src/main/java/tech/devscast/validable/RegexValidable.kt b/validable/src/main/java/tech/devscast/validable/RegexValidable.kt
@@ -12,5 +12,5 @@ import java.util.regex.Pattern
  */
 class RegexValidable(pattern: String, message: String? = null) : BaseValidable(
     validator = { value -> Pattern.matches(pattern, value) },
-    errorFor = { _ -> message ?: "This value is not valid." }
+    errorFor = { _ -> message ?: "This value is not a valid regex." }
 )