Skip to content

Instantly share code, notes, and snippets.

@fvilarino
Created April 26, 2024 02:47
Show Gist options
  • Save fvilarino/6bd355c7f25c1a0a315aa28a7fecdab1 to your computer and use it in GitHub Desktop.
Save fvilarino/6bd355c7f25c1a0a315aa28a7fecdab1 to your computer and use it in GitHub Desktop.
Container Transform - Input Box
// 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")
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment