Skip to content

Commit

Permalink
ANDROAPP-5547-mobile-ui-Create-Switch-component (#66)
Browse files Browse the repository at this point in the history
* Create component

* remove unnecessary color

* Change switch to specific screen and remove unnecessary subtitle
  • Loading branch information
xavimolloy authored Sep 18, 2023
1 parent cec3870 commit 6080364
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 1 deletion.
4 changes: 3 additions & 1 deletion common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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(
Expand Down Expand Up @@ -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()
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
}
Original file line number Diff line number Diff line change
@@ -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)
}
}
}
Original file line number Diff line number Diff line change
@@ -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),
)
}
},
)
}
}

0 comments on commit 6080364

Please sign in to comment.