Add option to define custom switch icons

kiwicom · Oct 20, 2023 · 468a1e4 · 468a1e4
1 parent 3acd6dc
commit 468a1e4
Showing 1 changed file with 37 additions and 2 deletions.
diff --git a/ui/src/androidMain/kotlin/kiwi/orbit/compose/ui/controls/Switch.kt b/ui/src/androidMain/kotlin/kiwi/orbit/compose/ui/controls/Switch.kt
@@ -34,17 +34,21 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.paint
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.graphics.drawscope.DrawScope
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
+import kiwi.orbit.compose.icons.Icons
 import kiwi.orbit.compose.ui.OrbitTheme
 import kiwi.orbit.compose.ui.controls.internal.OrbitPreviews
 import kiwi.orbit.compose.ui.controls.internal.Preview
@@ -60,6 +64,25 @@ public fun Switch(
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+) {
+    Switch(
+        checked = checked,
+        onCheckedChange = onCheckedChange,
+        modifier = modifier,
+        icon = null,
+        enabled = enabled,
+        interactionSource = interactionSource,
+    )
+}
+
+@Composable
+public fun Switch(
+    checked: Boolean,
+    onCheckedChange: ((Boolean) -> Unit)?,
+    icon: Painter?,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
 ) {
     val density = LocalDensity.current
     val toggleableModifier =
@@ -109,6 +132,7 @@ public fun Switch(
             enabled = enabled,
             state = swipeableState,
             interactionSource = interactionSource,
+            icon = icon,
         )
     }
 }
@@ -117,6 +141,7 @@ public fun Switch(
 private fun BoxScope.SwitchImpl(
     checked: Boolean,
     enabled: Boolean,
+    icon: Painter?,
     state: SwipeableV2State<Boolean>,
     interactionSource: InteractionSource,
 ) {
@@ -186,7 +211,15 @@ private fun BoxScope.SwitchImpl(
             )
             .background(OrbitTheme.colors.surface.main, CircleShape)
             .padding((ThumbDiameter - ThumbInnerDiameter - ThumbStrokeWidth * 2) / 2)
-            .background(mainColor, CircleShape),
+            .then(
+                if (icon != null) {
+                    Modifier.paint(painter = icon, colorFilter = ColorFilter.tint(mainColor))
+                } else {
+                    Modifier
+                        .padding(ThumbInnerPadding)
+                        .background(mainColor, CircleShape)
+                },
+            ),
     )
 }
 
@@ -235,7 +268,8 @@ private val TrackWidth = SwitchWidth - SwitchPadding * 2
 private val TrackStrokeWidth = SwitchHeight - SwitchPadding * 2
 private val ThumbDiameter = SwitchHeight
 private val ThumbStrokeWidth = 0.5.dp
-private val ThumbInnerDiameter = 10.dp
+private val ThumbInnerDiameter = 16.dp
+private val ThumbInnerPadding = 3.dp
 private val ThumbRippleRadius = 24.dp
 
 private val AnimationSpec = TweenSpec<Float>(durationMillis = 100)
@@ -255,6 +289,7 @@ internal fun SwitchPreview() {
             Switch(
                 checked = true,
                 onCheckedChange = {},
+                icon = Icons.Circle,
             )
             Switch(
                 checked = false,