Add TextInput and add singleLine to TextFieldOutlined

2023-05-24 18:09:24 +02:00 · 2023-05-24 18:09:24 +02:00 · fccf89f371
commit fccf89f371
parent b99166bc2d
7 changed files with 157 additions and 35 deletions
--- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TextFieldItems.kt
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TextFieldItems.kt
@ -50,6 +50,7 @@ data class TextFieldState<T>(
    val isReadOnly: Boolean = false,
    val isRequired: Boolean = false,
    val hasError: Boolean = false,
+    val isSingleLine: Boolean = false,
 )

@Suppress("LongMethod")
@ -58,6 +59,7 @@ fun <T> TextFieldDemo(
    initialState: TextFieldState<T>,
    modifier: Modifier = Modifier,
    hasTrailingIcon: Boolean = false,
+    hasSingleLine: Boolean = false,
    content: @Composable (state: MutableState<TextFieldState<T>>) -> Unit,
 ) {
    WithRememberedState(input = initialState) { state ->
@ -126,6 +128,15 @@ fun <T> TextFieldDemo(
                    onCheckedChange = { state.value = state.value.copy(hasError = it) },
                    contentPadding = defaultPadding,
                )
+
+                if (hasSingleLine) {
+                    CheckboxInput(
+                        text = "Single line",
+                        checked = state.value.isSingleLine,
+                        onCheckedChange = { state.value = state.value.copy(isSingleLine = it) },
+                        contentPadding = defaultPadding,
+                    )
+                }
            }
        }
    }
@ -137,6 +148,7 @@ private fun LazyGridScope.textFieldOutlinedItems() {
    item {
        TextFieldDemo(
            hasTrailingIcon = true,
+            hasSingleLine = true,
            initialState = TextFieldState(input = ""),
        ) { state ->
            TextFieldOutlined(
@ -151,6 +163,7 @@ private fun LazyGridScope.textFieldOutlinedItems() {
                isEnabled = !state.value.isDisabled,
                isReadOnly = state.value.isReadOnly,
                isRequired = state.value.isRequired,
+                isSingleLine = state.value.isSingleLine,
                hasError = state.value.hasError,
                modifier = Modifier.fillMaxWidth(),
            )
--- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/InputItems.kt
+++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/InputItems.kt
@ -6,6 +6,7 @@ import app.k9mail.core.ui.compose.designsystem.molecule.input.EmailAddressInput
 import app.k9mail.core.ui.compose.designsystem.molecule.input.PasswordInput
 import app.k9mail.core.ui.compose.designsystem.molecule.input.SelectInput
 import app.k9mail.core.ui.compose.designsystem.molecule.input.SwitchInput
+import app.k9mail.core.ui.compose.designsystem.molecule.input.TextInput
 import app.k9mail.ui.catalog.ui.common.helper.WithRememberedState
 import app.k9mail.ui.catalog.ui.common.list.ItemOutlined
 import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem
@ -14,6 +15,31 @@ import kotlinx.collections.immutable.persistentListOf

@Suppress("LongMethod")
 fun LazyGridScope.inputItems() {
+    sectionHeaderItem(text = "TextInput")
+    sectionSubtitleItem(text = "Default")
+    item {
+        ItemOutlined {
+            WithRememberedState(input = "") { state ->
+                TextInput(
+                    text = state.value,
+                    onTextChange = { state.value = it },
+                )
+            }
+        }
+    }
+    sectionSubtitleItem(text = "With error")
+    item {
+        ItemOutlined {
+            WithRememberedState(input = "") { state ->
+                TextInput(
+                    text = state.value,
+                    onTextChange = { state.value = it },
+                    errorMessage = "Invalid input",
+                )
+            }
+        }
+    }
+
    sectionHeaderItem(text = "EmailAddressInput")
    sectionSubtitleItem(text = "Default")
    item {
@ -91,7 +117,7 @@ fun LazyGridScope.inputItems() {
        }
    }

-    sectionHeaderItem(text = "SelectInput")
+    sectionHeaderItem(text = "SwitchInput")
    item {
        ItemOutlined {
            WithRememberedState(input = false) { state ->
--- a/core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/textfield/TextFieldOutlined.kt
+++ b/core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/textfield/TextFieldOutlined.kt
@ -20,6 +20,7 @@ fun TextFieldOutlined(
    isReadOnly: Boolean = false,
    isRequired: Boolean = false,
    hasError: Boolean = false,
+    isSingleLine: Boolean = true,
 ) {
    MaterialOutlinedTextField(
        value = value,
@ -30,6 +31,7 @@ fun TextFieldOutlined(
        trailingIcon = trailingIcon,
        readOnly = isReadOnly,
        isError = hasError,
+        singleLine = isSingleLine,
    )
 }

--- a/core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/molecule/input/EmailAddressInput.kt
+++ b/core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/molecule/input/EmailAddressInput.kt
@ -1,18 +1,13 @@
 package app.k9mail.core.ui.compose.designsystem.molecule.input

-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 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.TextFieldOutlinedEmailAddress
-import app.k9mail.core.ui.compose.theme.MainTheme
 import app.k9mail.core.ui.compose.theme.PreviewWithThemes

@Composable
@ -23,11 +18,10 @@ fun EmailAddressInput(
    errorMessage: String? = null,
    contentPadding: PaddingValues = inputContentPadding(),
 ) {
-    Column(
-        modifier = Modifier
-            .padding(contentPadding)
-            .fillMaxWidth()
-            .then(modifier),
+    TextInputLayout(
+        modifier = modifier,
+        contentPadding = contentPadding,
+        errorMessage = errorMessage,
    ) {
        TextFieldOutlinedEmailAddress(
            value = emailAddress,
@ -36,13 +30,6 @@ fun EmailAddressInput(
            hasError = errorMessage != null,
            modifier = Modifier.fillMaxWidth(),
        )
-        AnimatedVisibility(visible = errorMessage != null) {
-            TextCaption(
-                text = errorMessage ?: "",
-                modifier = Modifier.padding(start = MainTheme.spacings.double, top = MainTheme.spacings.half),
-                color = MainTheme.colors.error,
-            )
-        }
    }
 }

--- a/core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/molecule/input/PasswordInput.kt
+++ b/core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/molecule/input/PasswordInput.kt
@ -1,18 +1,13 @@
 package app.k9mail.core.ui.compose.designsystem.molecule.input

-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 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
@ -23,11 +18,10 @@ fun PasswordInput(
    errorMessage: String? = null,
    contentPadding: PaddingValues = inputContentPadding(),
 ) {
-    Column(
-        modifier = Modifier
-            .padding(contentPadding)
-            .fillMaxWidth()
-            .then(modifier),
+    TextInputLayout(
+        modifier = modifier,
+        contentPadding = contentPadding,
+        errorMessage = errorMessage,
    ) {
        TextFieldOutlinedPassword(
            value = password,
@ -36,13 +30,6 @@ fun PasswordInput(
            hasError = errorMessage != null,
            modifier = Modifier.fillMaxWidth(),
        )
-        AnimatedVisibility(visible = errorMessage != null) {
-            TextCaption(
-                text = errorMessage ?: "",
-                modifier = Modifier.padding(start = MainTheme.spacings.double, top = MainTheme.spacings.half),
-                color = MainTheme.colors.error,
-            )
-        }
    }
 }

--- a/core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/molecule/input/TextInput.kt
+++ b/core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/molecule/input/TextInput.kt
@ -0,0 +1,71 @@
+package app.k9mail.core.ui.compose.designsystem.molecule.input
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.designsystem.atom.textfield.TextFieldOutlined
+import app.k9mail.core.ui.compose.theme.PreviewWithThemes
+
+@Suppress("LongParameterList")
+@Composable
+fun TextInput(
+    onTextChange: (String) -> Unit,
+    modifier: Modifier = Modifier,
+    text: String = "",
+    label: String? = null,
+    isRequired: Boolean = false,
+    errorMessage: String? = null,
+    contentPadding: PaddingValues = inputContentPadding(),
+    isSingleLine: Boolean = true,
+) {
+    TextInputLayout(
+        modifier = modifier,
+        contentPadding = contentPadding,
+        errorMessage = errorMessage,
+    ) {
+        TextFieldOutlined(
+            value = text,
+            onValueChange = onTextChange,
+            label = label,
+            isRequired = isRequired,
+            hasError = errorMessage != null,
+            isSingleLine = isSingleLine,
+            modifier = Modifier.fillMaxWidth(),
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun TextInputPreview() {
+    PreviewWithThemes {
+        TextInput(
+            onTextChange = {},
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun TextInputIsRequiredPreview() {
+    PreviewWithThemes {
+        TextInput(
+            onTextChange = {},
+            label = "Text input is required",
+            isRequired = true,
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun TextInputWithErrorPreview() {
+    PreviewWithThemes {
+        TextInput(
+            onTextChange = {},
+            errorMessage = "Text input error",
+        )
+    }
+}
--- a/core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/molecule/input/TextInputLayout.kt
+++ b/core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/molecule/input/TextInputLayout.kt
@ -0,0 +1,36 @@
+package app.k9mail.core.ui.compose.designsystem.molecule.input
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextCaption
+import app.k9mail.core.ui.compose.theme.MainTheme
+
+@Composable
+internal fun TextInputLayout(
+    modifier: Modifier = Modifier,
+    contentPadding: PaddingValues = inputContentPadding(),
+    errorMessage: String? = null,
+    content: @Composable () -> Unit,
+) {
+    Column(
+        modifier = Modifier
+            .padding(contentPadding)
+            .fillMaxWidth()
+            .then(modifier),
+    ) {
+        content()
+
+        AnimatedVisibility(visible = errorMessage != null) {
+            TextCaption(
+                text = errorMessage ?: "",
+                modifier = Modifier.padding(start = MainTheme.spacings.double, top = MainTheme.spacings.half),
+                color = MainTheme.colors.error,
+            )
+        }
+    }
+}