From 60803648fc690216b06cb2918f0e64d816a6f72d Mon Sep 17 00:00:00 2001 From: Xavier Molloy <44061143+xavimolloy@users.noreply.github.com> Date: Mon, 18 Sep 2023 11:22:12 +0200 Subject: [PATCH] ANDROAPP-5547-mobile-ui-Create-Switch-component (#66) * Create component * remove unnecessary color * Change switch to specific screen and remove unnecessary subtitle --- .../kotlin/org/hisp/dhis/common/App.kt | 4 +- .../hisp/dhis/common/screens/Components.kt | 1 + .../hisp/dhis/common/screens/SwitchScreen.kt | 41 +++++++++++ .../ui/designsystem/component/Switch.kt | 68 +++++++++++++++++++ 4 files changed, 113 insertions(+), 1 deletion(-) create mode 100644 common/src/commonMain/kotlin/org/hisp/dhis/common/screens/SwitchScreen.kt create mode 100644 designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Switch.kt diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt index e48637529..4c4fc1046 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt @@ -47,6 +47,7 @@ import org.hisp.dhis.common.screens.ProgressScreen import org.hisp.dhis.common.screens.RadioButtonScreen import org.hisp.dhis.common.screens.SectionScreen import org.hisp.dhis.common.screens.SupportingTextScreen +import org.hisp.dhis.common.screens.SwitchScreen import org.hisp.dhis.common.screens.TagsScreen import org.hisp.dhis.mobile.ui.designsystem.theme.DHIS2Theme import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing @@ -60,7 +61,7 @@ fun App() { @Composable fun Main() { - val currentScreen = remember { mutableStateOf(Components.FORM_SHELLS) } + val currentScreen = remember { mutableStateOf(Components.SWITCH) } var expanded by remember { mutableStateOf(false) } Column( @@ -132,6 +133,7 @@ fun Main() { Components.INPUT_INTEGER -> InputIntegerScreen() Components.INPUT_NUMBER -> InputNumberScreen() Components.INPUT_LETTER -> InputLetterScreen() + Components.SWITCH -> SwitchScreen() Components.INPUT_RADIO_BUTTON -> InputRadioButtonScreen() } } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt index 2a0f74e2e..e2a7f4a24 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt @@ -27,4 +27,5 @@ enum class Components(val label: String) { BUTTON_BLOCK("Button block"), ICON_CARDS("Icon Cards"), INPUT_RADIO_BUTTON("Input Radio Button"), + SWITCH("Switch"), } diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/SwitchScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/SwitchScreen.kt new file mode 100644 index 000000000..d76bf7860 --- /dev/null +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/SwitchScreen.kt @@ -0,0 +1,41 @@ +package org.hisp.dhis.common.screens + +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.size +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Modifier +import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer +import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle +import org.hisp.dhis.mobile.ui.designsystem.component.Switch +import org.hisp.dhis.mobile.ui.designsystem.component.Title +import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing + +@Composable +fun SwitchScreen() { + ColumnComponentContainer { + Title("Switches") + SubTitle("Toggled enabled and disabled switch") + var switchOne by remember { mutableStateOf(true) } + var switchTwo by remember { mutableStateOf(true) } + var switchThree by remember { mutableStateOf(false) } + var switchFour by remember { mutableStateOf(false) } + + RowComponentContainer { + Switch(isChecked = switchOne, onCheckedChange = { switchOne = !it }) + Switch(isChecked = switchTwo, onCheckedChange = { switchTwo = !it }, enabled = false) + } + + Spacer(Modifier.size(Spacing.Spacing6)) + SubTitle("Untoggled enabled and disabled switch") + + RowComponentContainer { + Switch(isChecked = switchThree, onCheckedChange = { switchThree = !it }) + Switch(isChecked = switchFour, onCheckedChange = { switchFour = !it }, enabled = false) + } + } +} diff --git a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Switch.kt b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Switch.kt new file mode 100644 index 000000000..0c2be4f35 --- /dev/null +++ b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Switch.kt @@ -0,0 +1,68 @@ +package org.hisp.dhis.mobile.ui.designsystem.component + +import androidx.compose.foundation.layout.size +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Check +import androidx.compose.material.icons.outlined.Close +import androidx.compose.material.ripple.LocalRippleTheme +import androidx.compose.material3.Icon +import androidx.compose.material3.Switch +import androidx.compose.material3.SwitchDefaults +import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider +import androidx.compose.ui.Modifier +import org.hisp.dhis.mobile.ui.designsystem.theme.Outline +import org.hisp.dhis.mobile.ui.designsystem.theme.Ripple +import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor +import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor + +@Composable +fun Switch( + modifier: Modifier = Modifier, + isChecked: Boolean = false, + enabled: Boolean = true, + onCheckedChange: (Boolean) -> Unit, +) { + CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme) { + Switch( + modifier = modifier, + checked = isChecked, + onCheckedChange = { onCheckedChange.invoke(isChecked) }, + enabled = enabled, + colors = SwitchDefaults.colors( + checkedThumbColor = TextColor.OnPrimary, + checkedTrackColor = SurfaceColor.Primary, + checkedBorderColor = SurfaceColor.Primary, + checkedIconColor = SurfaceColor.Primary, + uncheckedThumbColor = Outline.Dark, + uncheckedTrackColor = SurfaceColor.Surface, + uncheckedBorderColor = Outline.Dark, + uncheckedIconColor = Outline.Dark, + disabledCheckedThumbColor = SurfaceColor.Surface, + disabledCheckedTrackColor = SurfaceColor.CustomGray, + disabledCheckedBorderColor = SurfaceColor.CustomGray, + disabledCheckedIconColor = TextColor.OnDisabledSurface, + disabledUncheckedThumbColor = TextColor.OnDisabledSurface, + disabledUncheckedTrackColor = SurfaceColor.DisabledSurface, + disabledUncheckedBorderColor = Outline.Light, + disabledUncheckedIconColor = TextColor.OnDisabledSurface, + ), + thumbContent = { + if (isChecked) { + Icon( + imageVector = Icons.Filled.Check, + contentDescription = null, + modifier = Modifier.size(SwitchDefaults.IconSize), + ) + } else { + Icon( + imageVector = Icons.Outlined.Close, + contentDescription = null, + tint = TextColor.OnPrimary, + modifier = Modifier.size(SwitchDefaults.IconSize), + ) + } + }, + ) + } +}