library: Refactor PressFeedback to use Modifier.Node

Author: Voemp

docs/guide/utils.md

@@ -193,6 +193,18 @@ Box(
 )
 ```
 
+If you want to use both `Modifier.clickable()` and instant feedback, you can pass the `immediate = true` parameter.
+
+```kotlin
+val interactionSource = remember { MutableInteractionSource() }
+
+Box(
+    modifier = Modifier
+        .clickable(interactionSource = interactionSource, indication = null, onClick = {})
+        .pressSink(interactionSource, immediate = true)
+)
+```
+
 ### Press Feedback Type (`PressFeedbackType`)
 
 The `PressFeedbackType` enum defines different types of visual feedback that can be applied when the component is pressed.

docs/zh_CN/guide/utils.md

@@ -193,6 +193,18 @@ Box(
 )
 ```
 
+如果既想使用 `Modifier.clickable()` 又想要即时的反馈效果，可以传递 `immediate = true` 参数。
+
+```kotlin
+val interactionSource = remember { MutableInteractionSource() }
+
+Box(
+    modifier = Modifier
+        .clickable(interactionSource = interactionSource, indication = null, onClick = {})
+        .pressSink(interactionSource, immediate = true)
+)
+```
+
 ### 按压反馈类型 (PressFeedbackType)
 
 `PressFeedbackType` 枚举定义了组件被按下时可以应用的不同类型的视觉反馈。

example/src/commonMain/kotlin/component/OtherComponent.kt

@@ -32,8 +32,6 @@ import androidx.compose.ui.focus.FocusManager
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.hapticfeedback.HapticFeedbackType
-import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.TextFieldValue
@@ -481,8 +479,7 @@ fun LazyListScope.otherComponent(
             ),
             insideMargin = PaddingValues(16.dp),
             pressFeedbackType = PressFeedbackType.None,
-            showIndication = true,
-            onClick = { }
+            showIndication = true
         ) {
             Text(
                 color = MiuixTheme.colorScheme.onPrimary,
@@ -497,7 +494,6 @@ fun LazyListScope.otherComponent(
                 fontWeight = FontWeight.Normal
             )
         }
-        val hapticFeedback = LocalHapticFeedback.current
         Row(
             modifier = Modifier
                 .fillMaxWidth()
@@ -510,7 +506,7 @@ fun LazyListScope.otherComponent(
                 insideMargin = PaddingValues(16.dp),
                 pressFeedbackType = PressFeedbackType.Sink,
                 showIndication = true,
-                onClick = { },
+                onClick = { println("Card click") },
                 content = {
                     Text(
                         color = MiuixTheme.colorScheme.onSurface,
@@ -529,7 +525,7 @@ fun LazyListScope.otherComponent(
                 modifier = Modifier.weight(1f),
                 insideMargin = PaddingValues(16.dp),
                 pressFeedbackType = PressFeedbackType.Tilt,
-                onLongPress = { hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress) },
+                onLongPress = { println("Card long press") },
                 content = {
                     Text(
                         color = MiuixTheme.colorScheme.onSurface,

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

@@ -5,14 +5,8 @@ package top.yukonga.miuix.kmp.basic
 
 import androidx.compose.foundation.LocalIndication
 import androidx.compose.foundation.background
-import androidx.compose.foundation.gestures.awaitEachGesture
-import androidx.compose.foundation.gestures.awaitFirstDown
-import androidx.compose.foundation.gestures.detectTapGestures
-import androidx.compose.foundation.gestures.waitForUpOrCancellation
-import androidx.compose.foundation.hoverable
-import androidx.compose.foundation.indication
+import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.interaction.PressInteraction
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
@@ -26,7 +20,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.takeOrElse
-import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.semantics.isTraversalGroup
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.Dp
@@ -104,43 +97,23 @@ fun Card(
     val pressFeedbackModifier = remember(pressFeedbackType, interactionSource) {
         when (pressFeedbackType) {
             PressFeedbackType.None -> Modifier
-            PressFeedbackType.Sink -> Modifier.pressSink(interactionSource)
-            PressFeedbackType.Tilt -> Modifier.pressTilt(interactionSource)
+            PressFeedbackType.Sink -> Modifier.pressSink(interactionSource, immediate = true)
+            PressFeedbackType.Tilt -> Modifier.pressTilt(interactionSource, immediate = true)
         }
     }
 
     BasicCard(
-        modifier = modifier
-            .pointerInput(onClick, onLongPress) {
-                detectTapGestures(
-                    onTap = { onClick?.invoke() },
-                    onLongPress = { onLongPress?.invoke() }
-                )
-            }
-            .pointerInput(interactionSource) {
-                awaitEachGesture {
-                    val pressInteraction: PressInteraction.Press
-                    awaitFirstDown().also {
-                        pressInteraction = PressInteraction.Press(it.position)
-                        interactionSource.tryEmit(pressInteraction)
-                    }
-                    if (waitForUpOrCancellation() == null) {
-                        interactionSource.tryEmit(PressInteraction.Cancel(pressInteraction))
-                    } else {
-                        interactionSource.tryEmit(PressInteraction.Release(pressInteraction))
-                    }
-                }
-            }
-            .hoverable(interactionSource)
-            .then(pressFeedbackModifier),
+        modifier = modifier.then(pressFeedbackModifier),
         cornerRadius = cornerRadius,
         colors = colors
     ) {
         Column(
             modifier = Modifier
-                .indication(
+                .combinedClickable(
                     interactionSource = interactionSource,
-                    indication = if (showIndication == true) LocalIndication.current else null
+                    indication = if (showIndication == true) LocalIndication.current else null,
+                    onClick = { onClick?.invoke() },
+                    onLongClick = onLongPress
                 )
                 .padding(insideMargin),
             content = content