Add SelectInput molecule

This commit is contained in:
Wolf-Martell Montwé 2023-05-23 11:06:46 +02:00
parent df2d61f76e
commit 1a83f0e974
No known key found for this signature in database
GPG key ID: 6D45B21512ACBF72
2 changed files with 62 additions and 0 deletions

View file

@ -16,8 +16,10 @@ import app.k9mail.core.ui.compose.designsystem.molecule.LoadingView
import app.k9mail.core.ui.compose.designsystem.molecule.input.CheckboxInput
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.theme.MainTheme
import app.k9mail.ui.catalog.helper.WithRememberedState
import kotlinx.collections.immutable.persistentListOf
@Suppress("LongMethod")
fun LazyGridScope.moleculeItems() {
@ -98,6 +100,18 @@ fun LazyGridScope.moleculeItems() {
}
}
}
item {
val options = persistentListOf("Option 1", "Option 2", "Option 3")
MoleculeWrapper(title = "SelectInput") {
WithRememberedState(input = options.first()) { state ->
SelectInput(
options = options,
selectedOption = state.value,
onOptionChange = { state.value = it },
)
}
}
}
}
@Composable

View file

@ -0,0 +1,48 @@
package app.k9mail.core.ui.compose.designsystem.molecule.input
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.tooling.preview.Preview
import app.k9mail.core.ui.compose.designsystem.atom.textfield.TextFieldOutlinedSelect
import app.k9mail.core.ui.compose.theme.PreviewWithThemes
import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.persistentListOf
@Composable
fun <T> SelectInput(
options: ImmutableList<T>,
selectedOption: T,
onOptionChange: (T) -> Unit,
modifier: Modifier = Modifier,
contentPadding: PaddingValues = inputContentPadding(),
) {
Column(
modifier = Modifier
.padding(contentPadding)
.fillMaxWidth()
.then(modifier),
) {
TextFieldOutlinedSelect(
options = options,
selectedOption = selectedOption,
onValueChange = onOptionChange,
modifier = Modifier.fillMaxWidth(),
)
}
}
@Preview(showBackground = true)
@Composable
internal fun SelectInputPreview() {
PreviewWithThemes {
SelectInput(
options = persistentListOf("Option 1", "Option 2", "Option 3"),
selectedOption = "Option 1",
onOptionChange = {},
)
}
}