Add Passwordnput molecule
This commit is contained in:
parent
8d0139d6ae
commit
951bd10ddf
3 changed files with 93 additions and 0 deletions
|
@ -14,9 +14,11 @@ import app.k9mail.core.ui.compose.designsystem.atom.text.TextSubtitle1
|
|||
import app.k9mail.core.ui.compose.designsystem.molecule.EmailAddressInput
|
||||
import app.k9mail.core.ui.compose.designsystem.molecule.ErrorView
|
||||
import app.k9mail.core.ui.compose.designsystem.molecule.LoadingView
|
||||
import app.k9mail.core.ui.compose.designsystem.molecule.PasswordInput
|
||||
import app.k9mail.core.ui.compose.theme.MainTheme
|
||||
import app.k9mail.ui.catalog.helper.WithRememberedState
|
||||
|
||||
@Suppress("LongMethod")
|
||||
fun LazyGridScope.moleculeItems() {
|
||||
sectionHeaderItem(text = "Molecules")
|
||||
item {
|
||||
|
@ -62,6 +64,28 @@ fun LazyGridScope.moleculeItems() {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
item {
|
||||
MoleculeWrapper(title = "PasswordInput") {
|
||||
WithRememberedState(input = "") { state ->
|
||||
PasswordInput(
|
||||
password = state.value,
|
||||
onPasswordChange = { state.value = it },
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
item {
|
||||
MoleculeWrapper(title = "PasswordInput with error") {
|
||||
WithRememberedState(input = "wrong password") { state ->
|
||||
PasswordInput(
|
||||
password = state.value,
|
||||
onPasswordChange = { state.value = it },
|
||||
errorMessage = "Invalid password",
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
|
|
|
@ -0,0 +1,68 @@
|
|||
package app.k9mail.core.ui.compose.designsystem.molecule
|
||||
|
||||
import androidx.compose.animation.AnimatedVisibility
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import app.k9mail.core.ui.compose.designsystem.R
|
||||
import app.k9mail.core.ui.compose.designsystem.atom.text.TextCaption
|
||||
import app.k9mail.core.ui.compose.designsystem.atom.textfield.TextFieldOutlinedPassword
|
||||
import app.k9mail.core.ui.compose.theme.MainTheme
|
||||
import app.k9mail.core.ui.compose.theme.PreviewWithThemes
|
||||
|
||||
@Composable
|
||||
fun PasswordInput(
|
||||
onPasswordChange: (String) -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
password: String = "",
|
||||
errorMessage: String? = null,
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.padding(
|
||||
horizontal = MainTheme.spacings.double,
|
||||
vertical = MainTheme.spacings.default,
|
||||
)
|
||||
.then(modifier),
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
) {
|
||||
TextFieldOutlinedPassword(
|
||||
value = password,
|
||||
onValueChange = onPasswordChange,
|
||||
label = stringResource(id = R.string.designsystem_molecule_password_input_label),
|
||||
isError = errorMessage != null,
|
||||
)
|
||||
AnimatedVisibility(visible = errorMessage != null) {
|
||||
TextCaption(
|
||||
text = errorMessage ?: "",
|
||||
modifier = Modifier.padding(top = MainTheme.spacings.default),
|
||||
color = MainTheme.colors.error,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Preview(showBackground = true)
|
||||
@Composable
|
||||
internal fun PasswordInputPreview() {
|
||||
PreviewWithThemes {
|
||||
PasswordInput(
|
||||
onPasswordChange = {},
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Preview(showBackground = true)
|
||||
@Composable
|
||||
internal fun PasswordInputWithErrorPreview() {
|
||||
PreviewWithThemes {
|
||||
PasswordInput(
|
||||
onPasswordChange = {},
|
||||
errorMessage = "Password error",
|
||||
)
|
||||
}
|
||||
}
|
|
@ -3,5 +3,6 @@
|
|||
<string name="designsystem_atom_password_textfield_hide_password">Hide password</string>
|
||||
<string name="designsystem_atom_password_textfield_show_password">Show password</string>
|
||||
<string name="designsystem_molecule_email_address_input_label">Email address</string>
|
||||
<string name="designsystem_molecule_password_input_label">Password</string>
|
||||
<string name="designsystem_molecule_error_view_button_retry">Retry</string>
|
||||
</resources>
|
||||
|
|
Loading…
Reference in a new issue