Untitled
unknown
plain_text
25 days ago
2.8 kB
3
Indexable
@Composable internal fun VerificationCodeTextField( modifier: Modifier = Modifier, value: String, onValueChange: (String) -> Unit, placeholder: String = "", errorMessage: String = "", focusRequester: FocusRequester = remember { FocusRequester() }, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() } ) { val isError = errorMessage.isNotEmpty() Column(modifier = modifier, verticalArrangement = Arrangement.spacedBy(space16)) { BasicTextField( value = value, onValueChange = onValueChange, keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number), modifier = Modifier .focusRequester(focusRequester), interactionSource = interactionSource, decorationBox = { CodeInputBox(text = value) } ) if (isError) { NoFontPaddingText(text = errorMessage, style = ConsumerTextStyle.label3Regular.copy(color = SystemSolidDanger200)) } } } private const val CODE_LENGTH = 4 private val CODE_FONT_SIZE = 28.sp @Composable private fun CodeInputBox(modifier: Modifier = Modifier, text: String = "") { Row(modifier = modifier, horizontalArrangement = Arrangement.spacedBy(space16)) { for (i in 0 until CODE_LENGTH) { val number = text.getOrNull(i)?.toString().safe() when { number.isNotEmpty() -> Text( modifier = Modifier .size(space32), text = number, style = ConsumerTextStyle.label1Regular.copy(fontSize = CODE_FONT_SIZE), textAlign = TextAlign.Center ) else -> Box( modifier = Modifier .size(space32), contentAlignment = Alignment.Center ) { Box( modifier = Modifier .size(space8) .background(NeutralSolidGray400, shape = CircleShape) ) } } } } } @Preview(showBackground = true, showSystemUi = true) @Composable private fun Preview() { ConsumerAppTheme { val focusRequester: FocusRequester = remember { FocusRequester() } LaunchedEffect(Unit) { focusRequester.requestFocus() } var text by remember { mutableStateOf("1234") } VerificationCodeTextField( modifier = Modifier.padding(space10), value = text, placeholder = "email@test.com", errorMessage = "Test error message", onValueChange = { text = it }, focusRequester = focusRequester ) } }
Editor is loading...
Leave a Comment