Add Switch atom and SwitchInput molecule

This commit is contained in:
Wolf-Martell Montwé 2023-05-24 17:40:42 +02:00
parent 6bec60edcd
commit 7013d9819f
No known key found for this signature in database
GPG key ID: 6D45B21512ACBF72
4 changed files with 136 additions and 0 deletions

View file

@ -17,6 +17,7 @@ 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.designsystem.molecule.input.SwitchInput
import app.k9mail.core.ui.compose.theme.MainTheme
import app.k9mail.ui.catalog.ui.common.helper.WithRememberedState
import app.k9mail.ui.catalog.ui.common.list.itemDefaultPadding
@ -102,6 +103,17 @@ fun LazyGridScope.moleculeItems() {
}
}
}
item {
MoleculeWrapper(title = "SwitchInput") {
WithRememberedState(input = false) { state ->
SwitchInput(
text = "Switch the toggle",
checked = state.value,
onCheckedChange = { state.value = it },
)
}
}
}
item {
val options = persistentListOf("Option 1", "Option 2", "Option 3")
MoleculeWrapper(title = "SelectInput") {

View file

@ -6,6 +6,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import app.k9mail.core.ui.compose.designsystem.atom.Checkbox
import app.k9mail.core.ui.compose.designsystem.atom.Switch
import app.k9mail.core.ui.compose.designsystem.atom.text.TextCaption
import app.k9mail.ui.catalog.ui.common.list.itemDefaultPadding
import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem
@ -24,6 +25,19 @@ fun LazyGridScope.selectionControlItems() {
captionItem(caption = "Disabled") {
Checkbox(checked = false, onCheckedChange = {}, enabled = false)
}
sectionSubtitleItem(text = "Switch")
captionItem(caption = "Checked") {
Switch(checked = true, onCheckedChange = {})
}
captionItem(caption = "Unchecked") {
Switch(checked = false, onCheckedChange = {})
}
captionItem(caption = "Disabled Checked") {
Switch(checked = true, onCheckedChange = {}, enabled = false)
}
captionItem(caption = "Disabled") {
Switch(checked = false, onCheckedChange = {}, enabled = false)
}
}
private fun LazyGridScope.captionItem(

View file

@ -0,0 +1,45 @@
package app.k9mail.core.ui.compose.designsystem.atom
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import app.k9mail.core.ui.compose.theme.PreviewWithThemes
import androidx.compose.material.Switch as MaterialSwitch
@Composable
fun Switch(
checked: Boolean,
onCheckedChange: (Boolean) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
) {
MaterialSwitch(
checked = checked,
onCheckedChange = onCheckedChange,
modifier = modifier,
enabled = enabled,
)
}
@Preview(showBackground = true)
@Composable
internal fun SwitchPreview() {
PreviewWithThemes {
Switch(
checked = true,
onCheckedChange = {},
)
}
}
@Preview(showBackground = true)
@Composable
internal fun SwitchDisabledPreview() {
PreviewWithThemes {
Switch(
checked = true,
onCheckedChange = {},
enabled = false,
)
}
}

View file

@ -0,0 +1,65 @@
package app.k9mail.core.ui.compose.designsystem.molecule.input
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
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.tooling.preview.Preview
import app.k9mail.core.ui.compose.designsystem.atom.Switch
import app.k9mail.core.ui.compose.designsystem.atom.text.TextBody1
import app.k9mail.core.ui.compose.theme.MainTheme
import app.k9mail.core.ui.compose.theme.PreviewWithThemes
@Composable
fun SwitchInput(
text: String,
checked: Boolean,
onCheckedChange: (Boolean) -> Unit,
modifier: Modifier = Modifier,
contentPadding: PaddingValues = inputContentPadding(),
) {
Row(
modifier = Modifier
.padding(contentPadding)
.fillMaxWidth()
.clickable { onCheckedChange(!checked) }
.then(modifier),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.half),
) {
Switch(
checked = checked,
onCheckedChange = onCheckedChange,
)
TextBody1(text = text)
}
}
@Preview(showBackground = true)
@Composable
internal fun SwitchInputPreview() {
PreviewWithThemes {
SwitchInput(
text = "SwitchInput",
checked = false,
onCheckedChange = {},
)
}
}
@Preview(showBackground = true)
@Composable
internal fun SwitchInputCheckedPreview() {
PreviewWithThemes {
SwitchInput(
text = "SwitchInput",
checked = true,
onCheckedChange = {},
)
}
}