Add support for leading icons and multi-line text fields (#292)

This commit is contained in:
David Perez 2023-11-29 09:54:30 -06:00 committed by Álison Fernandes
parent d4d64c2a6d
commit 8e099a546d
4 changed files with 29 additions and 1 deletions

View file

@ -40,6 +40,8 @@ import com.x8bit.bitwarden.R
* @param onValueChange Callback that is triggered when the password changes.
* @param modifier Modifier for the composable.
* @param readOnly `true` if the input should be read-only and not accept user interactions.
* @param singleLine when `true`, this text field becomes a single line that horizontally scrolls
* instead of wrapping onto multiple lines.
* @param hint optional hint text that will appear below the text input.
* @param showPasswordTestTag The test tag to be used on the show password button (testing tool).
* @param autoFocus When set to true, the view will request focus after the first recomposition.
@ -54,6 +56,7 @@ fun BitwardenPasswordField(
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
readOnly: Boolean = false,
singleLine: Boolean = true,
hint: String? = null,
showPasswordTestTag: String? = null,
autoFocus: Boolean = false,
@ -70,7 +73,7 @@ fun BitwardenPasswordField(
} else {
PasswordVisualTransformation()
},
singleLine = true,
singleLine = singleLine,
readOnly = readOnly,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
supportingText = hint?.let {
@ -117,6 +120,8 @@ fun BitwardenPasswordField(
* @param onValueChange Callback that is triggered when the password changes.
* @param modifier Modifier for the composable.
* @param readOnly `true` if the input should be read-only and not accept user interactions.
* @param singleLine when `true`, this text field becomes a single line that horizontally scrolls
* instead of wrapping onto multiple lines.
* @param hint optional hint text that will appear below the text input.
* @param initialShowPassword The initial state of the show/hide password control. A value of
* `false` (the default) indicates that that password should begin in the hidden state.
@ -131,6 +136,7 @@ fun BitwardenPasswordField(
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
readOnly: Boolean = false,
singleLine: Boolean = true,
hint: String? = null,
initialShowPassword: Boolean = false,
showPasswordTestTag: String? = null,
@ -145,6 +151,7 @@ fun BitwardenPasswordField(
showPasswordChange = { showPassword = !showPassword },
onValueChange = onValueChange,
readOnly = readOnly,
singleLine = singleLine,
hint = hint,
showPasswordTestTag = showPasswordTestTag,
autoFocus = autoFocus,

View file

@ -25,6 +25,8 @@ import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
* @param onValueChange Callback that is triggered when the password changes.
* @param modifier Modifier for the composable.
* @param readOnly `true` if the input should be read-only and not accept user interactions.
* @param singleLine when `true`, this text field becomes a single line that horizontally scrolls
* instead of wrapping onto multiple lines.
* @param actions A lambda containing the set of actions (usually icons or similar) to display
* in the app bar's trailing side. This lambda extends [RowScope], allowing flexibility in
* defining the layout of the actions.
@ -36,6 +38,7 @@ fun BitwardenPasswordFieldWithActions(
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
readOnly: Boolean = false,
singleLine: Boolean = false,
actions: @Composable RowScope.() -> Unit = {},
) {
Row(
@ -47,6 +50,7 @@ fun BitwardenPasswordFieldWithActions(
value = value,
onValueChange = onValueChange,
readOnly = readOnly,
singleLine = singleLine,
modifier = Modifier
.weight(1f)
.padding(end = 8.dp),

View file

@ -1,6 +1,7 @@
package com.x8bit.bitwarden.ui.platform.components
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
@ -8,6 +9,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.tooling.preview.Preview
import com.x8bit.bitwarden.ui.platform.components.model.IconResource
/**
* Component that allows the user to input text. This composable will manage the state of
@ -18,6 +20,7 @@ import androidx.compose.ui.tooling.preview.Preview
* @param onValueChange callback that is triggered when the input of the text field changes.
* @param placeholder the optional placeholder to be displayed when the text field is in focus and
* the [value] is empty.
* @param leadingIconResource the optional resource for the leading icon on the text field.
* @param hint optional hint text that will appear below the text input.
* @param singleLine when `true`, this text field becomes a single line that horizontally scrolls
* instead of wrapping onto multiple lines.
@ -32,6 +35,7 @@ fun BitwardenTextField(
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
placeholder: String? = null,
leadingIconResource: IconResource? = null,
hint: String? = null,
singleLine: Boolean = true,
readOnly: Boolean = false,
@ -43,6 +47,15 @@ fun BitwardenTextField(
enabled = enabled,
label = { Text(text = label) },
value = value,
leadingIcon = leadingIconResource?.let { iconResource ->
{
Icon(
painter = iconResource.iconPainter,
contentDescription = iconResource.contentDescription,
tint = MaterialTheme.colorScheme.onSurfaceVariant,
)
}
},
placeholder = placeholder?.let {
{ Text(text = it) }
},

View file

@ -23,6 +23,8 @@ import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
* @param onValueChange Callback that is triggered when the text content changes.
* @param modifier [Modifier] applied to this layout composable.
* @param readOnly `true` if the input should be read-only and not accept user interactions.
* @param singleLine when `true`, this text field becomes a single line that horizontally scrolls
* instead of wrapping onto multiple lines.
* @param actions A lambda containing the set of actions (usually icons or similar) to display
* next to the text field. This lambda extends [RowScope],
* providing flexibility in the layout definition.
@ -34,6 +36,7 @@ fun BitwardenTextFieldWithActions(
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
readOnly: Boolean = false,
singleLine: Boolean = true,
keyboardType: KeyboardType = KeyboardType.Text,
actions: @Composable RowScope.() -> Unit = {},
) {
@ -47,6 +50,7 @@ fun BitwardenTextFieldWithActions(
label = label,
value = value,
readOnly = readOnly,
singleLine = singleLine,
onValueChange = onValueChange,
keyboardType = keyboardType,
)