Skip to content

Commit ca63638

Browse files
YuKongAYuKongA
committed
library: Add VerticalDivider Component
* Also move Divider.kt to basic package
1 parent c267d2d commit ca63638

File tree

15 files changed

+252
-207
lines changed

15 files changed

+252
-207
lines changed

‎composeApp/src/commonMain/kotlin/component/OtherComponent.kt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -286,6 +286,7 @@ fun OtherComponent(padding: PaddingValues) {
286286
Slider(
287287
progress = progress,
288288
onProgressChange = { newProgress -> progress = newProgress },
289+
decimalPlaces = 3,
289290
modifier = Modifier
290291
.padding(horizontal = 12.dp)
291292
.padding(bottom = 12.dp)

‎composeApp/src/commonMain/kotlin/component/TextComponent.kt‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,6 @@ fun TextComponent(
220220
checked = miuixSuperRightCheckboxState.value,
221221
rightActions = {
222222
Text(
223-
modifier = Modifier.padding(end = 10.dp),
224223
text = miuixSuperRightCheckbox.value,
225224
color = MiuixTheme.colorScheme.onSurfaceVariantActions
226225
)

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Button.kt‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -175,14 +175,12 @@ object ButtonDefaults {
175175
disabledColor: Color = MiuixTheme.colorScheme.disabledSecondaryVariant,
176176
textColor: Color = MiuixTheme.colorScheme.onSecondaryVariant,
177177
disabledTextColor: Color = MiuixTheme.colorScheme.disabledOnSecondaryVariant
178-
): TextButtonColors {
179-
return TextButtonColors(
180-
color = color,
181-
disabledColor = disabledColor,
182-
textColor = textColor,
183-
disabledTextColor = disabledTextColor
184-
)
185-
}
178+
): TextButtonColors = TextButtonColors(
179+
color = color,
180+
disabledColor = disabledColor,
181+
textColor = textColor,
182+
disabledTextColor = disabledTextColor
183+
)
186184

187185
/**
188186
* The [TextButtonColors] for primary text buttons.

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Card.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ fun Card(
4545
Box(
4646
modifier = modifier
4747
.background(color = color, shape = shape.value)
48-
.clip(RoundedCornerShape(cornerRadius)) // For touch feedback, because there is a problem when using Smooth RoundedCornerShape.
48+
.clip(RoundedCornerShape(cornerRadius)) // For touch feedback, because there is a problem when using SmoothRoundedCornerShape.
4949
.semantics(mergeDescendants = false) {
5050
isTraversalGroup = true
5151
}

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Checkbox.kt‎

Lines changed: 48 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,22 @@ import androidx.compose.foundation.Canvas
1212
import androidx.compose.foundation.LocalIndication
1313
import androidx.compose.foundation.background
1414
import androidx.compose.foundation.interaction.MutableInteractionSource
15+
import androidx.compose.foundation.interaction.collectIsDraggedAsState
16+
import androidx.compose.foundation.interaction.collectIsHoveredAsState
1517
import androidx.compose.foundation.interaction.collectIsPressedAsState
1618
import androidx.compose.foundation.layout.Box
1719
import androidx.compose.foundation.layout.size
1820
import androidx.compose.foundation.selection.toggleable
19-
import androidx.compose.foundation.shape.RoundedCornerShape
21+
import androidx.compose.foundation.shape.CircleShape
2022
import androidx.compose.runtime.Composable
2123
import androidx.compose.runtime.Immutable
2224
import androidx.compose.runtime.LaunchedEffect
2325
import androidx.compose.runtime.Stable
2426
import androidx.compose.runtime.getValue
27+
import androidx.compose.runtime.mutableStateOf
2528
import androidx.compose.runtime.remember
2629
import androidx.compose.runtime.rememberUpdatedState
30+
import androidx.compose.runtime.setValue
2731
import androidx.compose.ui.Alignment
2832
import androidx.compose.ui.Modifier
2933
import androidx.compose.ui.draw.clip
@@ -39,6 +43,7 @@ import androidx.compose.ui.hapticfeedback.HapticFeedbackType
3943
import androidx.compose.ui.platform.LocalHapticFeedback
4044
import androidx.compose.ui.semantics.Role
4145
import androidx.compose.ui.unit.dp
46+
import kotlinx.coroutines.delay
4247
import kotlinx.coroutines.launch
4348
import top.yukonga.miuix.kmp.theme.MiuixTheme
4449

@@ -60,16 +65,33 @@ fun Checkbox(
6065
enabled: Boolean = true,
6166
) {
6267
val isChecked by rememberUpdatedState(checked)
68+
var onCheck by remember { mutableStateOf(false) }
6369
val hapticFeedback = LocalHapticFeedback.current
6470
val interactionSource = remember { MutableInteractionSource() }
65-
val isPressed by interactionSource.collectIsPressedAsState()
71+
72+
val isInteracted = interactionSource.let { source ->
73+
val isPressed by source.collectIsPressedAsState()
74+
val isDragged by source.collectIsDraggedAsState()
75+
val isHovered by source.collectIsHoveredAsState()
76+
isPressed || isDragged || isHovered
77+
}
78+
79+
LaunchedEffect(onCheck == true) {
80+
delay(80)
81+
onCheck = false
82+
}
83+
84+
val springSpec = spring<Float>(
85+
dampingRatio = Spring.DampingRatioLowBouncy,
86+
stiffness = if (onCheck) Spring.StiffnessHigh else Spring.StiffnessMedium
87+
)
6688

6789
val scale by animateFloatAsState(
68-
targetValue = if (isPressed) 0.85f else 1f,
69-
animationSpec = spring(
70-
dampingRatio = Spring.DampingRatioMediumBouncy,
71-
stiffness = Spring.StiffnessLow
72-
)
90+
targetValue = when {
91+
isInteracted || onCheck -> 0.95f
92+
else -> 1f
93+
},
94+
animationSpec = springSpec
7395
)
7496

7597
val backgroundColor by animateColorAsState(
@@ -120,7 +142,10 @@ fun Checkbox(
120142
launch {
121143
checkAlpha.animateTo(
122144
targetValue = 0f,
123-
animationSpec = tween(durationMillis = 150, easing = FastOutSlowInEasing)
145+
animationSpec = tween(
146+
durationMillis = 150,
147+
easing = FastOutSlowInEasing
148+
)
124149
)
125150
}
126151
launch {
@@ -137,7 +162,7 @@ fun Checkbox(
137162
targetValue = 0.1f,
138163
animationSpec = keyframes {
139164
durationMillis = 300
140-
0.0f at 300
165+
0.1f at 300
141166
}
142167
)
143168
}
@@ -149,9 +174,9 @@ fun Checkbox(
149174
value = isChecked,
150175
onValueChange = {
151176
onCheckedChange(it)
177+
onCheck = true
152178
hapticFeedback.performHapticFeedback(
153-
if (it) HapticFeedbackType.ToggleOn
154-
else HapticFeedbackType.ToggleOff
179+
if (it) HapticFeedbackType.ToggleOn else HapticFeedbackType.ToggleOff
155180
)
156181
},
157182
enabled = enabled,
@@ -167,7 +192,7 @@ fun Checkbox(
167192
modifier = modifier
168193
.size(24.5.dp)
169194
.scale(scale)
170-
.clip(RoundedCornerShape(100.dp))
195+
.clip(CircleShape)
171196
.background(backgroundColor)
172197
.then(toggleableModifier),
173198
contentAlignment = Alignment.Center
@@ -190,6 +215,7 @@ private fun DrawScope.drawTrimmedCheckmark(
190215
trimEnd: Float
191216
) {
192217
val viewportSize = 25.5f
218+
val strokeWidth = size.width * 0.09f
193219

194220
val centerX = size.width / 2
195221
val centerY = size.height / 2
@@ -216,8 +242,6 @@ private fun DrawScope.drawTrimmedCheckmark(
216242
val startDistance = totalLength * trimStart
217243
val endDistance = totalLength * trimEnd
218244

219-
val strokeWidth = size.width * 0.09f
220-
221245
val path = Path()
222246

223247
if (startDistance < firstSegmentLength && endDistance > 0) {
@@ -283,7 +307,6 @@ private fun DrawScope.drawTrimmedCheckmark(
283307
}
284308

285309
object CheckboxDefaults {
286-
287310
@Composable
288311
fun checkboxColors(
289312
checkedForegroundColor: Color = MiuixTheme.colorScheme.onPrimary,
@@ -294,18 +317,16 @@ object CheckboxDefaults {
294317
uncheckedBackgroundColor: Color = MiuixTheme.colorScheme.secondary,
295318
disabledCheckedBackgroundColor: Color = MiuixTheme.colorScheme.disabledPrimary,
296319
disabledUncheckedBackgroundColor: Color = MiuixTheme.colorScheme.disabledSecondary
297-
): CheckboxColors {
298-
return CheckboxColors(
299-
checkedForegroundColor = checkedForegroundColor,
300-
uncheckedForegroundColor = uncheckedForegroundColor,
301-
disabledCheckedForegroundColor = disabledCheckedForegroundColor,
302-
disabledUncheckedForegroundColor = disabledUncheckedForegroundColor,
303-
checkedBackgroundColor = checkedBackgroundColor,
304-
uncheckedBackgroundColor = uncheckedBackgroundColor,
305-
disabledCheckedBackgroundColor = disabledCheckedBackgroundColor,
306-
disabledUncheckedBackgroundColor = disabledUncheckedBackgroundColor
307-
)
308-
}
320+
): CheckboxColors = CheckboxColors(
321+
checkedForegroundColor = checkedForegroundColor,
322+
uncheckedForegroundColor = uncheckedForegroundColor,
323+
disabledCheckedForegroundColor = disabledCheckedForegroundColor,
324+
disabledUncheckedForegroundColor = disabledUncheckedForegroundColor,
325+
checkedBackgroundColor = checkedBackgroundColor,
326+
uncheckedBackgroundColor = uncheckedBackgroundColor,
327+
disabledCheckedBackgroundColor = disabledCheckedBackgroundColor,
328+
disabledUncheckedBackgroundColor = disabledUncheckedBackgroundColor
329+
)
309330
}
310331

311332
@Immutable

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/ColorPicker.kt‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
1111
import androidx.compose.foundation.layout.height
1212
import androidx.compose.foundation.layout.offset
1313
import androidx.compose.foundation.layout.size
14-
import androidx.compose.foundation.shape.RoundedCornerShape
14+
import androidx.compose.foundation.shape.CircleShape
1515
import androidx.compose.runtime.Composable
1616
import androidx.compose.runtime.LaunchedEffect
1717
import androidx.compose.runtime.getValue
@@ -377,9 +377,9 @@ private fun SliderIndicator(
377377
}
378378
)
379379
.size(indicatorSize)
380-
.clip(RoundedCornerShape(50.dp))
381-
.border(6.dp, Color.White, RoundedCornerShape(50.dp))
382-
.background(Color.Transparent, RoundedCornerShape(50.dp))
380+
.clip(CircleShape)
381+
.border(6.dp, Color.White, CircleShape)
382+
.background(Color.Transparent, CircleShape)
383383
)
384384
}
385385

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Component.kt‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -132,12 +132,10 @@ object BasicComponentDefaults {
132132
fun summaryColor(
133133
color: Color = MiuixTheme.colorScheme.onSurfaceVariantSummary,
134134
disabledColor: Color = MiuixTheme.colorScheme.disabledOnSecondaryVariant
135-
): BasicComponentColors {
136-
return BasicComponentColors(
137-
color = color,
138-
disabledColor = disabledColor
139-
)
140-
}
135+
): BasicComponentColors = BasicComponentColors(
136+
color = color,
137+
disabledColor = disabledColor
138+
)
141139
}
142140

143141
@Immutable

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Divider.kt‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
package top.yukonga.miuix.kmp.basic
2+
3+
import androidx.compose.foundation.Canvas
4+
import androidx.compose.foundation.layout.fillMaxHeight
5+
import androidx.compose.foundation.layout.fillMaxWidth
6+
import androidx.compose.foundation.layout.height
7+
import androidx.compose.foundation.layout.width
8+
import androidx.compose.runtime.Composable
9+
import androidx.compose.ui.Modifier
10+
import androidx.compose.ui.geometry.Offset
11+
import androidx.compose.ui.graphics.Color
12+
import androidx.compose.ui.unit.Dp
13+
import androidx.compose.ui.unit.dp
14+
import top.yukonga.miuix.kmp.theme.MiuixTheme
15+
16+
/**
17+
* A divider is a thin line that groups content in lists and layouts.
18+
*
19+
* @param modifier the [Modifier] to be applied to this divider line.
20+
* @param thickness thickness of this divider line. Using [Dp.Hairline] will produce a single pixel
21+
* divider regardless of screen density.
22+
* @param color color of this divider line.
23+
*/
24+
@Composable
25+
fun HorizontalDivider(
26+
modifier: Modifier = Modifier,
27+
thickness: Dp = DividerDefaults.Thickness,
28+
color: Color = DividerDefaults.Color
29+
) =
30+
Canvas(modifier.fillMaxWidth().height(thickness)) {
31+
drawLine(
32+
color = color,
33+
strokeWidth = thickness.toPx(),
34+
start = Offset(0f, thickness.toPx() / 2),
35+
end = Offset(size.width, thickness.toPx() / 2),
36+
)
37+
}
38+
39+
/**
40+
* A divider is a thin line that groups content in lists and layouts.
41+
*
42+
* @param modifier the [Modifier] to be applied to this divider line.
43+
* @param thickness thickness of this divider line. Using [Dp.Hairline] will produce a single pixel
44+
* divider regardless of screen density.
45+
* @param color color of this divider line.
46+
*/
47+
@Composable
48+
fun VerticalDivider(
49+
modifier: Modifier = Modifier,
50+
thickness: Dp = DividerDefaults.Thickness,
51+
color: Color = DividerDefaults.Color
52+
) =
53+
Canvas(modifier.fillMaxHeight().width(thickness)) {
54+
drawLine(
55+
color = color,
56+
strokeWidth = thickness.toPx(),
57+
start = Offset(thickness.toPx() / 2, 0f),
58+
end = Offset(thickness.toPx() / 2, size.height),
59+
)
60+
}
61+
62+
object DividerDefaults {
63+
64+
/**
65+
* Default thickness of the divider line.
66+
*/
67+
val Thickness = 0.75.dp
68+
69+
/**
70+
* Default color of the divider line.
71+
*/
72+
val Color @Composable get() = MiuixTheme.colorScheme.dividerLine
73+
74+
}

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/FloatingActionButton.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import androidx.compose.foundation.layout.displayCutout
88
import androidx.compose.foundation.layout.navigationBars
99
import androidx.compose.foundation.layout.only
1010
import androidx.compose.foundation.layout.windowInsetsPadding
11-
import androidx.compose.foundation.shape.RoundedCornerShape
11+
import androidx.compose.foundation.shape.CircleShape
1212
import androidx.compose.runtime.Composable
1313
import androidx.compose.ui.Alignment
1414
import androidx.compose.ui.Modifier
@@ -38,7 +38,7 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
3838
fun FloatingActionButton(
3939
onClick: () -> Unit,
4040
modifier: Modifier = Modifier,
41-
shape: Shape = RoundedCornerShape(60.dp),
41+
shape: Shape = CircleShape,
4242
containerColor: Color = MiuixTheme.colorScheme.primary,
4343
shadowElevation: Dp = 4.dp,
4444
minWidth: Dp = 60.dp,

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/NavigationBar.kt‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ import androidx.compose.ui.unit.Dp
3838
import androidx.compose.ui.unit.dp
3939
import androidx.compose.ui.unit.sp
4040
import top.yukonga.miuix.kmp.theme.MiuixTheme
41-
import top.yukonga.miuix.kmp.utils.HorizontalDivider
4241
import top.yukonga.miuix.kmp.utils.Platform
4342
import top.yukonga.miuix.kmp.utils.platform
4443

@@ -80,10 +79,7 @@ fun NavigationBar(
8079
.background(Color.Transparent)
8180
) {
8281
if (showDivider) {
83-
HorizontalDivider(
84-
thickness = 0.75.dp,
85-
color = MiuixTheme.colorScheme.dividerLine
86-
)
82+
HorizontalDivider()
8783
}
8884
Row(
8985
modifier = Modifier.fillMaxWidth(),

0 commit comments

Comments
 (0)