Add Switch atom and SwitchInput molecule
This commit is contained in:
parent
6bec60edcd
commit
7013d9819f
4 changed files with 136 additions and 0 deletions
|
@ -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") {
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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,
|
||||
)
|
||||
}
|
||||
}
|
|
@ -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 = {},
|
||||
)
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue