11package com.getcode.ui.components
22
3- import androidx.compose.foundation.interaction.MutableInteractionSource
4- import androidx.compose.material.ExperimentalMaterialApi
5- import androidx.compose.material.Switch
3+ import androidx.compose.animation.core.animateFloatAsState
4+ import androidx.compose.foundation.Canvas
5+ import androidx.compose.foundation.gestures.detectTapGestures
6+ import androidx.compose.foundation.layout.size
7+ import androidx.compose.material.SwitchColors
68import androidx.compose.material.SwitchDefaults
79import androidx.compose.runtime.Composable
8- import androidx.compose.runtime.remember
10+ import androidx.compose.runtime.getValue
911import androidx.compose.ui.Modifier
12+ import androidx.compose.ui.draw.scale
13+ import androidx.compose.ui.geometry.CornerRadius
14+ import androidx.compose.ui.geometry.Offset
1015import androidx.compose.ui.graphics.Color
11- import com.getcode.theme.CodeTheme
16+ import androidx.compose.ui.input.pointer.pointerInput
17+ import androidx.compose.ui.platform.LocalDensity
18+ import androidx.compose.ui.unit.dp
19+ import com.getcode.theme.SystemGreen
1220import com.getcode.theme.White
13- import com.getcode.theme.White50
21+ import com.getcode.ui.utils.addIf
22+
23+ object CodeToggleSwitchDefaults {
24+
25+ val colors: SwitchColors
26+ @Composable get() = SwitchDefaults .colors(
27+ checkedThumbColor = White ,
28+ uncheckedThumbColor = White ,
29+ checkedTrackColor = SystemGreen ,
30+ checkedTrackAlpha = 1f ,
31+ uncheckedTrackAlpha = 1f ,
32+ uncheckedTrackColor = Color (0xFF201D2F )
33+ )
34+ }
1435
1536@Composable
16- fun CodeSwitch (
17- checked : Boolean ,
18- onCheckedChange : ((Boolean ) -> Unit )? ,
37+ fun CodeToggleSwitch (
1938 modifier : Modifier = Modifier ,
2039 enabled : Boolean = true,
21- interactionSource : MutableInteractionSource = remember { MutableInteractionSource () },
40+ checked : Boolean ,
41+ onCheckedChange : ((Boolean ) -> Unit )? = null,
2242) {
23- Switch (
24- checked = checked,
25- onCheckedChange = onCheckedChange,
26- modifier = modifier,
27- enabled = enabled,
28- interactionSource = interactionSource,
29- colors = SwitchDefaults .colors(
30- checkedThumbColor = White ,
31- uncheckedThumbColor = White50 ,
32- checkedTrackColor = CodeTheme .colors.brandLight,
33- checkedTrackAlpha = 1f ,
34- uncheckedTrackColor = CodeTheme .colors.brandLight
35- )
43+ val width = 51 .dp
44+ val height = 31 .dp
45+ val gapBetweenThumbAndTrackEdge = 2 .dp
46+
47+ val thumbRadius = (height / 2 ) - gapBetweenThumbAndTrackEdge
48+ val animatePosition = animateFloatAsState(
49+ targetValue = if (checked) {
50+ with (LocalDensity .current) { (width - thumbRadius - gapBetweenThumbAndTrackEdge).toPx() }
51+ } else {
52+ with (LocalDensity .current) { (thumbRadius + gapBetweenThumbAndTrackEdge).toPx() }
53+ }, label = " thumb position"
3654 )
55+
56+ val colors = CodeToggleSwitchDefaults .colors
57+ val trackColor by colors.trackColor(enabled = enabled, checked = checked)
58+ val thumbColor by colors.thumbColor(enabled = enabled, checked = checked)
59+ Canvas (
60+ modifier = Modifier
61+ .size(width = width, height = height)
62+ .addIf(onCheckedChange != null ) {
63+ Modifier .pointerInput(Unit ) {
64+ detectTapGestures(
65+ onTap = {
66+ onCheckedChange?.invoke(! checked)
67+ }
68+ )
69+ }
70+ }.then(modifier)
71+ ) {
72+ drawRoundRect(
73+ color = trackColor,
74+ cornerRadius = CornerRadius (x = 45 .dp.toPx(), y = 45 .dp.toPx())
75+ )
76+ drawCircle(
77+ color = thumbColor,
78+ radius = thumbRadius.toPx(),
79+ center = Offset (
80+ x = animatePosition.value,
81+ y = size.height / 2
82+ )
83+ )
84+ }
3785}
0 commit comments