feat: add otp view rounding, highlighting, spacing (#152)

mukeshsolanki · Apr 5, 2023 · 601ab69 · 601ab69
1 parent b39258a
commit 601ab69
Showing 1 changed file with 35 additions and 9 deletions.
diff --git a/otpview-compose/src/main/kotlin/com/mukeshsolanki/compose/OtpView.kt b/otpview-compose/src/main/kotlin/com/mukeshsolanki/compose/OtpView.kt
@@ -2,14 +2,25 @@ package com.mukeshsolanki
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 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.text.input.KeyboardType
 import androidx.compose.ui.text.style.TextAlign
@@ -24,12 +35,16 @@ const val OTP_VIEW_TYPE_BORDER = 2
 
 @Composable
 fun OtpView(
+    otpText: String,
     modifier: Modifier = Modifier,
-    otpText: String = "",
     charColor: Color = Color.Black,
+    containerColor: Color = charColor,
+    selectedContainerColor: Color = charColor,
     charBackground: Color = Color.Transparent,
     charSize: TextUnit = 16.sp,
     containerSize: Dp = charSize.value.dp * 2,
+    containerRadius: Dp = 4.dp,
+    containerSpacing: Dp = 4.dp,
     otpCount: Int = 4,
     type: Int = OTP_VIEW_TYPE_UNDERLINE,
     enabled: Boolean = true,
@@ -49,48 +64,59 @@ fun OtpView(
         enabled = enabled,
         keyboardOptions = keyboardOptions,
         decorationBox = {
-            Row(horizontalArrangement = Arrangement.SpaceAround) {
+            Row(horizontalArrangement = Arrangement.spacedBy(containerSpacing)) {
                 repeat(otpCount) { index ->
-                    Spacer(modifier = Modifier.width(2.dp))
                     CharView(
                         index = index,
+                        otpCount = otpCount,
                         text = otpText,
                         charColor = charColor,
+                        containerColor = containerColor,
+                        highlightColor = selectedContainerColor,
                         charSize = charSize,
+                        containerRadius = containerRadius,
                         containerSize = containerSize,
                         type = type,
                         charBackground = charBackground,
                         password = password,
                         passwordChar = passwordChar,
                     )
-                    Spacer(modifier = Modifier.width(2.dp))
                 }
             }
-        })
+        }
+    )
 }
 
-
 @Composable
 private fun CharView(
     index: Int,
+    otpCount: Int,
     text: String,
     charColor: Color,
+    highlightColor: Color,
+    containerColor: Color,
     charSize: TextUnit,
     containerSize: Dp,
+    containerRadius: Dp,
     type: Int = OTP_VIEW_TYPE_UNDERLINE,
     charBackground: Color = Color.Transparent,
     password: Boolean = false,
     passwordChar: String = ""
 ) {
+
+    val containerColor2 =
+        if (index == text.length || (index == otpCount - 1 && text.length == otpCount)) highlightColor else containerColor
+
     val modifier = if (type == OTP_VIEW_TYPE_BORDER) {
         Modifier
             .size(containerSize)
             .border(
                 width = 1.dp,
-                color = charColor,
-                shape = MaterialTheme.shapes.medium
+                color = containerColor2,
+                shape = RoundedCornerShape(containerRadius)
             )
             .padding(bottom = 4.dp)
+            .clip(RoundedCornerShape(containerRadius))
             .background(charBackground)
     } else Modifier
         .width(containerSize)