library: Change click effect

Author: YuKongA

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

@@ -5,7 +5,6 @@ import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.requiredSize
 import androidx.compose.foundation.layout.size
@@ -21,6 +20,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Matrix
 import androidx.compose.ui.graphics.Path
@@ -33,7 +33,6 @@ import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.theme.MiuixTheme
-import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 
 /**
  * A checkbox component with Miuix style.
@@ -108,7 +107,7 @@ fun Checkbox(
         Canvas(
             modifier = Modifier
                 .requiredSize(checkboxSize)
-                .background(if (enabled) backgroundColor else disabledBackgroundColor)
+                .drawBehind { drawRect(if (enabled) backgroundColor else disabledBackgroundColor) }
         ) {
             val svgPath =
                 "m400-416 236-236q11-11 28-11t28 11q11 11 11 28t-11 28L428-332q-12 12-28 12t-28-12L268-436q-11-11-11-28t11-28q11-11 28-11t28 11l76 76Z"

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

@@ -1,17 +1,27 @@
 package top.yukonga.miuix.kmp.basic
 
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.spring
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 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.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.PointerEventType
+import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
@@ -43,22 +53,44 @@ fun BasicComponent(
     leftAction: @Composable (() -> Unit?)? = null,
     rightActions: @Composable RowScope.() -> Unit = {},
     onClick: (() -> Unit)? = null,
-    enabled: Boolean = true
+    enabled: Boolean = true,
+    extPressed: Boolean = false
 ) {
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed = interactionSource.collectIsPressedAsState().value
+    var pointerPressed by remember { mutableStateOf(false) }
     val insideMargin = remember { insideMargin } ?: remember { DpSize(16.dp, 16.dp) }
     val paddingModifier = remember(insideMargin) {
         Modifier.padding(horizontal = insideMargin.width, vertical = insideMargin.height)
     }
+    val backgroundColor = animateColorAsState(
+        targetValue = if (isPressed || extPressed || pointerPressed) MiuixTheme.colorScheme.selectedTint else Color.Unspecified,
+        animationSpec = spring(1f, 2000f)
+    ).value
     val titleColor = if (enabled) titleColor else MiuixTheme.colorScheme.disabledOnSecondaryVariant
     val summaryColor = if (enabled) summaryColor else MiuixTheme.colorScheme.disabledOnSecondaryVariant
     Row(
         modifier = if (onClick != null && enabled) {
             modifier
-                .clickable { onClick.invoke() }
+                .clickable(
+                    indication = null,
+                    interactionSource = interactionSource
+                ) {
+                    onClick.invoke()
+                }
         } else {
             modifier
         }
+            .pointerInput(Unit) {
+                awaitPointerEventScope {
+                    while (enabled) {
+                        val event = awaitPointerEvent()
+                        pointerPressed = event.type == PointerEventType.Press
+                    }
+                }
+            }
             .fillMaxWidth()
+            .drawBehind { drawRect(backgroundColor) }
             .then(paddingModifier),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.SpaceBetween

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Switch.kt

@@ -22,6 +22,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.hapticfeedback.HapticFeedbackType
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalHapticFeedback
@@ -107,7 +108,7 @@ fun Switch(
             .size(52.dp, 28.5.dp)
             .requiredSize(52.dp, 28.5.dp)
             .clip(SmoothRoundedCornerShape(52.dp))
-            .background(if (enabled) backgroundColor else disabledBackgroundColor)
+            .drawBehind { drawRect(if (enabled) backgroundColor else disabledBackgroundColor) }
             .pointerInput(Unit) {
                 detectHorizontalDragGestures(
                     onDragStart = {

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

@@ -1,7 +1,5 @@
 package top.yukonga.miuix.kmp.extra
 
-import androidx.compose.animation.animateColorAsState
-import androidx.compose.animation.core.spring
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
@@ -112,8 +110,6 @@ fun SuperDropdown(
     val isDropdownExpanded = remember { mutableStateOf(false) }
     val hapticFeedback = LocalHapticFeedback.current
     val actionColor = if (enabled) MiuixTheme.colorScheme.onSurfaceVariantActions else MiuixTheme.colorScheme.disabledOnSecondaryVariant
-    val targetColor = if (isDropdownExpanded.value) MiuixTheme.colorScheme.selectedTint else Color.Transparent
-    val selectedTint by animateColorAsState(targetValue = targetColor, animationSpec = spring(stiffness = 2000f))
     var alignLeft by rememberSaveable { mutableStateOf(true) }
     var dropdownOffsetXPx by remember { mutableStateOf(0) }
     var dropdownOffsetYPx by remember { mutableStateOf(0) }
@@ -147,8 +143,8 @@ fun SuperDropdown(
                     componentHeightPx = coordinates.size.height
                     componentWidthPx = coordinates.size.width
                 }
-            }
-            .background(selectedTint),
+            },
+        extPressed = isDropdownExpanded.value,
         insideMargin = insideMargin,
         title = title,
         titleColor = titleColor,
@@ -205,7 +201,7 @@ fun SuperDropdown(
             with(density) { WindowInsets.captionBar.asPaddingValues().calculateBottomPadding().toPx() }.roundToInt()
         )
         val dropdownMaxHeight by rememberUpdatedState(with(density) {
-            (windowHeightPx - statusBarPx - navigationBarPx - captionBarPx ).toDp()
+            (windowHeightPx - statusBarPx - navigationBarPx - captionBarPx).toDp()
         })
         val dropdownElevation by rememberUpdatedState(with(density) {
             11.dp.toPx()

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/theme/MiuixColor.kt renamed to miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/theme/Colors.kt

@@ -3,6 +3,7 @@ package top.yukonga.miuix.kmp.theme
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.runtime.structuralEqualityPolicy
 import androidx.compose.ui.graphics.Color
 
@@ -57,7 +58,7 @@ import androidx.compose.ui.graphics.Color
  * @param windowDimming The color of the window dimming. Cases: Dialog, Dropdown.
  */
 @Stable
-class MiuixColor(
+class Colors(
     primary: Color,
     onPrimary: Color,
     primaryVariant: Color,
@@ -155,7 +156,7 @@ class MiuixColor(
     val selectedTint by mutableStateOf(selectedTint, structuralEqualityPolicy())
 }
 
-fun lightColorScheme() = MiuixColor(
+fun lightColorScheme() = Colors(
     primary = Color(0xFF3482FF),
     onPrimary = Color.White,
     primaryVariant = Color(0xFF3482FF),
@@ -205,7 +206,7 @@ fun lightColorScheme() = MiuixColor(
     selectedTint = Color(0x14000000)
 )
 
-fun darkColorScheme() = MiuixColor(
+fun darkColorScheme() = Colors(
     primary = Color(0xFF277Af7),
     onPrimary = Color.White,
     primaryVariant = Color(0xFF0073DD),
@@ -253,4 +254,6 @@ fun darkColorScheme() = MiuixColor(
     onSurfaceContainerHighest = Color(0xFFE9E9E9),
     windowDimming = Color.Black.copy(alpha = 0.6f),
     selectedTint = Color(0xCC393939)
-)
+)
+
+val LocalColors = staticCompositionLocalOf { lightColorScheme() }

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

@@ -6,10 +6,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.ReadOnlyComposable
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.staticCompositionLocalOf
-
-private val LocalMiuixColor = staticCompositionLocalOf { lightColorScheme() }
-private val LocalMiuixTextStyles = staticCompositionLocalOf { miuixTextStyles() }
 
 /**
  * The default theme that provides color and text styles for the Miuix components.
@@ -20,12 +16,13 @@ private val LocalMiuixTextStyles = staticCompositionLocalOf { miuixTextStyles()
  */
 @Composable
 fun MiuixTheme(
-    colorScheme: MiuixColor = MiuixTheme.colorScheme,
-    textStyles: MiuixTextStyles = MiuixTheme.textStyles,
+    colorScheme: Colors = MiuixTheme.colorScheme,
+    textStyles: TextStyles = MiuixTheme.textStyles,
     content: @Composable () -> Unit
 ) {
+    val miuixColors = remember(colorScheme) { colorScheme }
     val miuixTextStyles = remember(colorScheme.onBackground) {
-        miuixTextStyles(
+        defaultTextStyles(
             main = textStyles.main.copy(color = colorScheme.onBackground),
             title = textStyles.title.copy(color = colorScheme.onBackground),
             paragraph = textStyles.paragraph.copy(color = colorScheme.onBackground)
@@ -35,22 +32,22 @@ fun MiuixTheme(
         ripple(color = colorScheme.onBackground)
     }
     CompositionLocalProvider(
-        LocalMiuixColor provides colorScheme,
-        LocalMiuixTextStyles provides miuixTextStyles,
+        LocalColors provides miuixColors,
+        LocalTextStyles provides miuixTextStyles,
         LocalIndication provides miuixRipple,
     ) {
         content()
     }
 }
 
 object MiuixTheme {
-    val colorScheme: MiuixColor
+    val colorScheme: Colors
         @Composable
         @ReadOnlyComposable
-        get() = LocalMiuixColor.current
+        get() = LocalColors.current
 
-    val textStyles: MiuixTextStyles
+    val textStyles: TextStyles
         @Composable
         @ReadOnlyComposable
-        get() = LocalMiuixTextStyles.current
+        get() = LocalTextStyles.current
 }

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/theme/MiuixTextStyle.kt renamed to miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/theme/TextStyles.kt

@@ -1,6 +1,7 @@
 package top.yukonga.miuix.kmp.theme
 
 import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.em
 import androidx.compose.ui.unit.sp
@@ -14,17 +15,17 @@ import androidx.compose.ui.unit.sp
  * @param paragraph The paragraph text style.
  */
 @Immutable
-class MiuixTextStyles(
+class TextStyles(
     val main: TextStyle,
     val title: TextStyle,
     val paragraph: TextStyle
 )
 
-fun miuixTextStyles(
+fun defaultTextStyles(
     main: TextStyle = DefaultTextStyle,
     title: TextStyle = TitleTextStyle,
     paragraph: TextStyle = ParagraphTextStyle
-): MiuixTextStyles = MiuixTextStyles(
+): TextStyles = TextStyles(
     main = main,
     title = title,
     paragraph = paragraph
@@ -44,4 +45,6 @@ private val ParagraphTextStyle: TextStyle
     get() = TextStyle(
         fontSize = 17.sp,
         lineHeight = 1.2f.em
-    )
+    )
+
+val LocalTextStyles = staticCompositionLocalOf { defaultTextStyles() }