static cell & space modifiers removed (#10)

* isFocused added to check if view is focused OtpCell cursor condition added to only be visible, when PinInput is focused. * cellModifier & spaceModifier static changes removed. cellModifier default moved to params, to let developer define complete modifiers. * Update OtpView.kt cursor visibility removed for disabled PinInput
yogeshpaliyal · Oct 8, 2023 · 5ebd6c9 · 5ebd6c9
1 parent 2872c89
commit 5ebd6c9
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 27 deletions.
diff --git a/app/src/main/java/com/yogeshpaliyal/speld/MainActivity.kt b/app/src/main/java/com/yogeshpaliyal/speld/MainActivity.kt
@@ -4,6 +4,7 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -16,6 +17,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import com.yogeshpaliyal.speld.ui.theme.AndroidComposeOTPViewTheme
@@ -30,7 +32,8 @@ class MainActivity : ComponentActivity() {
                     val text = remember { mutableStateOf("") }
                     val length = 5 // Define the length of the PIN here
 
-                    Column(modifier = Modifier.fillMaxSize(),
+                    Column(
+                        modifier = Modifier.fillMaxSize(),
                         Arrangement.Center, Alignment.CenterHorizontally
                     ) {
 
@@ -45,10 +48,18 @@ class MainActivity : ComponentActivity() {
 
                         // Bordered PIN View
                         PinInput(
-                            cellModifier = Modifier.border(
-                                BorderStroke(2.dp, Color.Red),
-                                shape = RoundedCornerShape(3.dp)
-                            ), value = text.value,
+                            cellModifier = Modifier
+                                .size(width = 45.dp, height = 45.dp)
+                                .clip(MaterialTheme.shapes.large)
+                                .background(
+                                    MaterialTheme.colors.primary.copy(alpha = 0.1f),
+                                    shape = RoundedCornerShape(3.dp)
+                                )
+                                .border(
+                                    BorderStroke(2.dp, Color.Red),
+                                    shape = RoundedCornerShape(3.dp)
+                                ),
+                            value = text.value,
                             obscureText = "*",
                             length = length, //Use the number defined here
                             disableKeypad = true, //Do not open the android keypad
@@ -57,7 +68,7 @@ class MainActivity : ComponentActivity() {
                         }
 
                         Spacer(modifier = Modifier.height(20.dp))
-                        
+
                         KeyPad(input = text, length)
 
                     }
@@ -69,9 +80,9 @@ class MainActivity : ComponentActivity() {
     }
 
     @Composable
-    fun KeyPad(input: MutableState<String>, length: Int){
-        val callback = {
-                text: String -> handleButtonClick(text, input, length)
+    fun KeyPad(input: MutableState<String>, length: Int) {
+        val callback = { text: String ->
+            handleButtonClick(text, input, length)
         }
 
         Column(
@@ -115,7 +126,7 @@ class MainActivity : ComponentActivity() {
                 .padding(2.dp, 2.dp)
         ) {
             for (i in texts.indices) {
-                val useIcon = texts[i]=="←"
+                val useIcon = texts[i] == "←"
                 MyButton(
                     text = texts[i],
                     callback = callback,
@@ -155,7 +166,7 @@ class MainActivity : ComponentActivity() {
                     contentDescription = "Favorite",
                     modifier = Modifier.size(ButtonDefaults.IconSize)
                 )
-            }else Text(text)
+            } else Text(text)
         }
     }
 
@@ -168,8 +179,9 @@ class MainActivity : ComponentActivity() {
             "←" -> if (inputTextView.value.isNotEmpty()) {
                 inputTextView.value = inputTextView.value.dropLast(1) // remove last char
             }
+
             "C" -> inputTextView.value = "" // clear all text
-            else -> if(inputTextView.value.length<length) inputTextView.value += txt // handles key input here
+            else -> if (inputTextView.value.length < length) inputTextView.value += txt // handles key input here
         }
     }
 }
diff --git a/speld/src/main/java/com/yogeshpaliyal/speld/OtpView.kt b/speld/src/main/java/com/yogeshpaliyal/speld/OtpView.kt
@@ -62,7 +62,14 @@ fun OtpCell(
 @Composable
 fun PinInput(
     modifier: Modifier = Modifier,
-    cellModifier: Modifier = Modifier,
+    cellModifier: Modifier = Modifier
+        .size(width = 45.dp, height = 45.dp)
+        .clip(MaterialTheme.shapes.large)
+        .background(
+            MaterialTheme.colors.primary.copy(alpha = 0.1f),
+            shape = RoundedCornerShape(3.dp)
+        ),
+    spacerModifier: Modifier = Modifier.size(8.dp),
     length: Int = 5,
     value: String = "",
     disableKeypad: Boolean = false,
@@ -105,23 +112,16 @@ fun PinInput(
     ) {
         repeat(length) {
             OtpCell(
-                modifier = cellModifier
-                    .size(width = 45.dp, height = 45.dp)
-                    .clip(MaterialTheme.shapes.large)
-                    .background(
-                        MaterialTheme.colors.primary.copy(alpha = 0.1f),
-                        shape = RoundedCornerShape(3.dp)
-                    )
-                    .clickable {
-                        focusRequester.requestFocus()
-                        keyboard?.show()
-                    },
+                modifier = cellModifier.clickable {
+                    focusRequester.requestFocus()
+                    keyboard?.show()
+                },
                 value = value.getOrNull(it),
-                isCursorVisible = (isFocused.value || !cursorVisibleOnlyOnFocus) && value.length == it,
-                obscureText
+                isCursorVisible = !disableKeypad && (isFocused.value || !cursorVisibleOnlyOnFocus) && value.length == it,
+                obscureText = obscureText
             )
             if (it != length - 1)
-                Spacer(modifier = Modifier.size(8.dp))
+                Spacer(modifier = spacerModifier)
         }
     }
 }