Container Transform - Input Box

container_transform_input_box.kt

// 1
@Composable
fun InputBox(
    onAddUser: (User) -> Unit,
    onCancel: () -> Unit,
    modifier: Modifier = Modifier,
) {
    // 2
    Card(
        modifier = modifier,
        colors = CardDefaults.cardColors().copy(
            containerColor = MaterialTheme.colorScheme.tertiaryContainer
        ),
    ) {
        // 3
        var name by remember { mutableStateOf("") }
        var email by remember { mutableStateOf("") }
        val canAdd by remember {
            derivedStateOf {
                name.isNotBlank() && email.isNotBlank()
            }
        }
        val focusManager = LocalFocusManager.current
        // 4
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(all = 16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
           // 5
            OutlinedTextField(
                value = name,
                onValueChange = { name = it },
                modifier = Modifier.fillMaxWidth(),
                label = { Text(text = "Name") },
                keyboardOptions = KeyboardOptions(
                    imeAction = ImeAction.Next,
                ),
                keyboardActions = KeyboardActions(
                    onNext = {
                        focusManager.moveFocus(FocusDirection.Down)
                    },
                ),
            )
            // 6
            OutlinedTextField(
                value = email,
                onValueChange = { email = it },
                modifier = Modifier.fillMaxWidth(),
                label = { Text(text = "Email") },
                keyboardOptions = KeyboardOptions(
                    imeAction = ImeAction.Done,
                ),
                keyboardActions = KeyboardActions(
                    onDone = {
                        if (canAdd) {
                            onAddUser(User(name, email))
                            name = ""
                            email = ""
                        }
                    }
                )
            )
            Spacer(modifier = Modifier.height(16.dp))
            // 7
            Row(
                modifier = Modifier.align(Alignment.End),
                horizontalArrangement = Arrangement.spacedBy(16.dp),
            ) {
                TextButton(
                    onClick = onCancel
                ) {
                    Text(text = "Cancel")
                }
                TextButton(
                    onClick = {
                        onAddUser(User(name, email))
                        name = ""
                        email = ""
                    },
                    enabled = canAdd,
                ) {
                    Text(text = "Add")
                }
            }
        }
    }
}