Skip to content

Commit c819fac

Browse files
YuKongAYuKongA
committed
library: Rewrite click effect
1 parent ee5ab54 commit c819fac

File tree

9 files changed

+149
-35
lines changed

9 files changed

+149
-35
lines changed

‎composeApp/build.gradle.kts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,10 +81,10 @@ kotlin {
8181
commonMain.dependencies {
8282
implementation(compose.runtime)
8383
implementation(compose.foundation)
84-
implementation(compose.material)
8584
implementation(compose.ui)
8685
implementation(compose.components.resources)
8786

87+
implementation(compose.materialIconsExtended)
8888
implementation(project(":miuix"))
8989
}
9090
desktopMain.dependencies {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import androidx.compose.foundation.layout.height
1414
import androidx.compose.foundation.layout.padding
1515
import androidx.compose.foundation.layout.width
1616
import androidx.compose.material.icons.Icons
17-
import androidx.compose.material.icons.filled.Star
17+
import androidx.compose.material.icons.rounded.Computer
1818
import androidx.compose.runtime.Composable
1919
import androidx.compose.runtime.MutableState
2020
import androidx.compose.runtime.getValue
@@ -119,7 +119,7 @@ fun TextComponent() {
119119
) {
120120
Image(
121121
colorFilter = ColorFilter.tint(MiuixTheme.colorScheme.onBackground),
122-
imageVector = Icons.Default.Star,
122+
imageVector = Icons.Rounded.Computer,
123123
contentDescription = "Person",
124124
)
125125
}

‎miuix/build.gradle.kts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ kotlin {
4444
commonMain.dependencies {
4545
implementation(compose.runtime)
4646
implementation(compose.foundation)
47-
implementation(compose.material)
4847
implementation(compose.ui)
4948
implementation(compose.components.resources)
5049
implementation(libs.jetbrains.compose.window.size)

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

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
package top.yukonga.miuix.kmp.basic
22

3-
import androidx.compose.animation.animateColorAsState
4-
import androidx.compose.animation.core.spring
3+
import androidx.compose.foundation.LocalIndication
54
import androidx.compose.foundation.clickable
65
import androidx.compose.foundation.interaction.MutableInteractionSource
7-
import androidx.compose.foundation.interaction.collectIsPressedAsState
86
import androidx.compose.foundation.layout.Arrangement
97
import androidx.compose.foundation.layout.Column
108
import androidx.compose.foundation.layout.Row
@@ -18,7 +16,6 @@ import androidx.compose.runtime.remember
1816
import androidx.compose.runtime.setValue
1917
import androidx.compose.ui.Alignment
2018
import androidx.compose.ui.Modifier
21-
import androidx.compose.ui.draw.drawBehind
2219
import androidx.compose.ui.graphics.Color
2320
import androidx.compose.ui.input.pointer.PointerEventType
2421
import androidx.compose.ui.input.pointer.pointerInput
@@ -40,6 +37,7 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
4037
* @param rightActions The [Composable] content on the right side of the [BasicComponent].
4138
* @param onClick The callback when the [BasicComponent] is clicked.
4239
* @param enabled Whether the [BasicComponent] is enabled.
40+
* @param interactionSource The [MutableInteractionSource] for the [BasicComponent].
4341
*/
4442
@Composable
4543
@Suppress("NAME_SHADOWING")
@@ -54,26 +52,20 @@ fun BasicComponent(
5452
rightActions: @Composable RowScope.() -> Unit = {},
5553
onClick: (() -> Unit)? = null,
5654
enabled: Boolean = true,
57-
extPressed: Boolean = false
55+
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
5856
) {
59-
val interactionSource = remember { MutableInteractionSource() }
60-
val isPressed = interactionSource.collectIsPressedAsState().value
6157
var pointerPressed by remember { mutableStateOf(false) }
6258
val insideMargin = remember { insideMargin } ?: remember { DpSize(16.dp, 16.dp) }
6359
val paddingModifier = remember(insideMargin) {
6460
Modifier.padding(horizontal = insideMargin.width, vertical = insideMargin.height)
6561
}
66-
val backgroundColor = animateColorAsState(
67-
targetValue = if (isPressed || extPressed || pointerPressed) MiuixTheme.colorScheme.selectedTint else Color.Unspecified,
68-
animationSpec = spring(1f, 2000f)
69-
).value
7062
val titleColor = if (enabled) titleColor else MiuixTheme.colorScheme.disabledOnSecondaryVariant
7163
val summaryColor = if (enabled) summaryColor else MiuixTheme.colorScheme.disabledOnSecondaryVariant
7264
Row(
7365
modifier = if (onClick != null && enabled) {
7466
modifier
7567
.clickable(
76-
indication = null,
68+
indication = LocalIndication.current,
7769
interactionSource = interactionSource
7870
) {
7971
onClick.invoke()
@@ -90,7 +82,6 @@ fun BasicComponent(
9082
}
9183
}
9284
.fillMaxWidth()
93-
.drawBehind { drawRect(backgroundColor) }
9485
.then(paddingModifier),
9586
verticalAlignment = Alignment.CenterVertically,
9687
horizontalArrangement = Arrangement.SpaceBetween

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import androidx.compose.foundation.BorderStroke
44
import androidx.compose.foundation.background
55
import androidx.compose.foundation.border
66
import androidx.compose.foundation.clickable
7-
import androidx.compose.material.minimumInteractiveComponentSize
87
import androidx.compose.runtime.Composable
98
import androidx.compose.runtime.NonRestartableComposable
109
import androidx.compose.runtime.Stable
@@ -82,7 +81,6 @@ fun Surface(
8281
border = border,
8382
shadowElevation = shadowElevation
8483
)
85-
.minimumInteractiveComponentSize()
8684
.clickable(
8785
enabled = enabled,
8886
onClick = onClick

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import androidx.compose.foundation.Image
44
import androidx.compose.foundation.background
55
import androidx.compose.foundation.clickable
66
import androidx.compose.foundation.gestures.detectTapGestures
7+
import androidx.compose.foundation.interaction.MutableInteractionSource
78
import androidx.compose.foundation.layout.Arrangement
89
import androidx.compose.foundation.layout.Row
910
import androidx.compose.foundation.layout.WindowInsets
@@ -31,6 +32,7 @@ import androidx.compose.runtime.getValue
3132
import androidx.compose.runtime.mutableStateListOf
3233
import androidx.compose.runtime.mutableStateOf
3334
import androidx.compose.runtime.remember
35+
import androidx.compose.runtime.rememberCoroutineScope
3436
import androidx.compose.runtime.rememberUpdatedState
3537
import androidx.compose.runtime.saveable.rememberSaveable
3638
import androidx.compose.runtime.setValue
@@ -58,6 +60,7 @@ import androidx.compose.ui.unit.DpSize
5860
import androidx.compose.ui.unit.LayoutDirection
5961
import androidx.compose.ui.unit.dp
6062
import androidx.compose.ui.unit.sp
63+
import kotlinx.coroutines.launch
6164
import top.yukonga.miuix.kmp.basic.BasicComponent
6265
import top.yukonga.miuix.kmp.basic.Box
6366
import top.yukonga.miuix.kmp.basic.Text
@@ -68,6 +71,7 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
6871
import top.yukonga.miuix.kmp.utils.BackHandler
6972
import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.dismissPopup
7073
import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.showPopup
74+
import top.yukonga.miuix.kmp.utils.PopupInteraction
7175
import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
7276
import top.yukonga.miuix.kmp.utils.getWindowSize
7377
import kotlin.math.roundToInt
@@ -107,7 +111,9 @@ fun SuperDropdown(
107111
onSelectedIndexChange: (Int) -> Unit,
108112
enabled: Boolean = true
109113
) {
114+
val interactionSource = remember { MutableInteractionSource() }
110115
val isDropdownExpanded = remember { mutableStateOf(false) }
116+
val coroutineScope = rememberCoroutineScope()
111117
val hapticFeedback = LocalHapticFeedback.current
112118
val actionColor = if (enabled) MiuixTheme.colorScheme.onSurfaceVariantActions else MiuixTheme.colorScheme.disabledOnSecondaryVariant
113119
var alignLeft by rememberSaveable { mutableStateOf(true) }
@@ -119,6 +125,9 @@ fun SuperDropdown(
119125
DisposableEffect(Unit) {
120126
onDispose {
121127
dismissPopup(isDropdownExpanded)
128+
coroutineScope.launch {
129+
interactionSource.emit(PopupInteraction.Close)
130+
}
122131
}
123132
}
124133

@@ -144,7 +153,7 @@ fun SuperDropdown(
144153
componentWidthPx = coordinates.size.width
145154
}
146155
},
147-
extPressed = isDropdownExpanded.value,
156+
interactionSource = interactionSource,
148157
insideMargin = insideMargin,
149158
title = title,
150159
titleColor = titleColor,
@@ -171,6 +180,9 @@ fun SuperDropdown(
171180
if (enabled) {
172181
isDropdownExpanded.value = enabled
173182
hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)
183+
coroutineScope.launch {
184+
interactionSource.emit(PopupInteraction.Open)
185+
}
174186
}
175187
},
176188
enabled = enabled
@@ -213,7 +225,12 @@ fun SuperDropdown(
213225
}.roundToInt())
214226
val paddingPx by rememberUpdatedState(with(density) { horizontalPadding.toPx() }.roundToInt())
215227

216-
BackHandler(enabled = isDropdownExpanded.value) { dismissPopup(isDropdownExpanded) }
228+
BackHandler(enabled = isDropdownExpanded.value) {
229+
dismissPopup(isDropdownExpanded)
230+
coroutineScope.launch {
231+
interactionSource.emit(PopupInteraction.Close)
232+
}
233+
}
217234

218235
showPopup(
219236
content = {
@@ -229,6 +246,9 @@ fun SuperDropdown(
229246
detectTapGestures(
230247
onTap = {
231248
dismissPopup(isDropdownExpanded)
249+
coroutineScope.launch {
250+
interactionSource.emit(PopupInteraction.Close)
251+
}
232252
}
233253
)
234254
}
@@ -273,6 +293,9 @@ fun SuperDropdown(
273293
onSelectedIndexChange = {
274294
hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)
275295
onSelectedIndexChange(it)
296+
coroutineScope.launch {
297+
interactionSource.emit(PopupInteraction.Close)
298+
}
276299
dismissPopup(isDropdownExpanded)
277300
},
278301
textWidthDp = textWidthDp,

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/theme/Colors.kt‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@ import androidx.compose.ui.graphics.Color
5757
* @param surfaceContainerHighest The container color of the surface color.
5858
* @param onSurfaceContainerHighest The color of the text on surface container highest color.
5959
* @param windowDimming The color of the window dimming. Cases: Dialog, Dropdown.
60-
* @param selectedTint The color of the selected tint. Cases: List, Grid.
6160
*/
6261
@Stable
6362
class Colors(
@@ -107,7 +106,6 @@ class Colors(
107106
surfaceContainerHighest: Color,
108107
onSurfaceContainerHighest: Color,
109108
windowDimming: Color,
110-
selectedTint: Color,
111109
) {
112110
var primary by mutableStateOf(primary, structuralEqualityPolicy())
113111
internal set
@@ -201,8 +199,6 @@ class Colors(
201199
internal set
202200
var windowDimming by mutableStateOf(windowDimming, structuralEqualityPolicy())
203201
internal set
204-
var selectedTint by mutableStateOf(selectedTint, structuralEqualityPolicy())
205-
internal set
206202

207203
fun copy(
208204
primary: Color = this.primary,
@@ -251,7 +247,6 @@ class Colors(
251247
surfaceContainerHighest: Color = this.surfaceContainerHighest,
252248
onSurfaceContainerHighest: Color = this.onSurfaceContainerHighest,
253249
windowDimming: Color = this.windowDimming,
254-
selectedTint: Color = this.selectedTint
255250
): Colors = Colors(
256251
primary,
257252
onPrimary,
@@ -299,7 +294,6 @@ class Colors(
299294
surfaceContainerHighest,
300295
onSurfaceContainerHighest,
301296
windowDimming,
302-
selectedTint
303297
)
304298
}
305299

@@ -350,7 +344,6 @@ fun lightColorScheme(
350344
surfaceContainerHighest: Color = Color(0xFFE8E8E8),
351345
onSurfaceContainerHighest: Color = Color.Black,
352346
windowDimming: Color = Color.Black.copy(alpha = 0.3f),
353-
selectedTint: Color = Color(0x14000000)
354347
): Colors = Colors(
355348
primary,
356349
onPrimary,
@@ -398,7 +391,6 @@ fun lightColorScheme(
398391
surfaceContainerHighest,
399392
onSurfaceContainerHighest,
400393
windowDimming,
401-
selectedTint
402394
)
403395

404396
fun darkColorScheme(
@@ -448,7 +440,6 @@ fun darkColorScheme(
448440
surfaceContainerHighest: Color = Color(0xFF2D2D2D),
449441
onSurfaceContainerHighest: Color = Color(0xFFE9E9E9),
450442
windowDimming: Color = Color.Black.copy(alpha = 0.6f),
451-
selectedTint: Color = Color(0xCC393939)
452443
): Colors = Colors(
453444
primary,
454445
onPrimary,
@@ -496,7 +487,6 @@ fun darkColorScheme(
496487
surfaceContainerHighest,
497488
onSurfaceContainerHighest,
498489
windowDimming,
499-
selectedTint
500490
)
501491

502492
internal fun Colors.updateColorsFrom(other: Colors) {
@@ -546,7 +536,6 @@ internal fun Colors.updateColorsFrom(other: Colors) {
546536
surfaceContainerHighest = other.surfaceContainerHighest
547537
onSurfaceContainerHighest = other.onSurfaceContainerHighest
548538
windowDimming = other.windowDimming
549-
selectedTint = other.selectedTint
550539
}
551540

552541
val LocalColors = staticCompositionLocalOf { lightColorScheme() }

‎miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/theme/MiuixTheme.kt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
package top.yukonga.miuix.kmp.theme
22

33
import androidx.compose.foundation.LocalIndication
4-
import androidx.compose.material.ripple
54
import androidx.compose.runtime.Composable
65
import androidx.compose.runtime.CompositionLocalProvider
76
import androidx.compose.runtime.ReadOnlyComposable
87
import androidx.compose.runtime.remember
8+
import top.yukonga.miuix.kmp.utils.MiuixIndication
99

1010
/**
1111
* The default theme that provides color and text styles for the Miuix components.
@@ -29,12 +29,12 @@ fun MiuixTheme(
2929
)
3030
}
3131
val miuixRipple = remember(colorScheme.onBackground) {
32-
ripple(color = colorScheme.onBackground)
32+
MiuixIndication(backgroundColor = colorScheme.onBackground)
3333
}
3434
CompositionLocalProvider(
3535
LocalColors provides miuixColors,
3636
LocalTextStyles provides miuixTextStyles,
37-
LocalIndication provides miuixRipple,
37+
LocalIndication provides miuixRipple
3838
) {
3939
content()
4040
}

0 commit comments

Comments
 (0)