@momo-kits/native-kits 0.157.5-debug → 0.158.1-beta.1-debug

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Swipe.kt

@@ -0,0 +1,215 @@
+package vn.momo.kits.components
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.gestures.detectHorizontalDragGestures
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.launch
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.modifier.conditional
+import kotlin.math.roundToInt
+
+data class SwipeAction(
+    val label: String = "",
+    val icon: String = "",
+    val onPress: () -> Unit = {},
+    val backgroundColor: Color? = null,
+)
+
+private val ACTION_WIDTH = 56.dp
+
+@Composable
+fun Swipe(
+    modifier: Modifier = Modifier,
+    leftActions: List<SwipeAction> = emptyList(),
+    rightActions: List<SwipeAction> = emptyList(),
+    height: Dp = 56.dp,
+    itemRadius: Dp = 0.dp,
+    onSwipeableOpen: () -> Unit = {},
+    onSwipeableClose: () -> Unit = {},
+    onSwipeableLeftOpen: () -> Unit = {},
+    onSwipeableRightOpen: () -> Unit = {},
+    content: @Composable () -> Unit = {},
+) {
+    val theme = AppTheme.current
+    val density = LocalDensity.current
+    val scope = rememberCoroutineScope()
+
+    val left = leftActions.take(3)
+    val right = rightActions.take(3)
+
+    val leftWidthPx = with(density) { (ACTION_WIDTH * left.size).toPx() }
+    val rightWidthPx = with(density) { (ACTION_WIDTH * right.size).toPx() }
+
+    val offsetX = remember { Animatable(0f) }
+
+    val shape = remember(itemRadius) {
+        if (itemRadius > 0.dp) RoundedCornerShape(itemRadius) else RoundedCornerShape(0.dp)
+    }
+
+    fun snapToClosest() {
+        scope.launch {
+            val current = offsetX.value
+            val target = when {
+                current > leftWidthPx * 0.5f && left.isNotEmpty() -> {
+                    onSwipeableLeftOpen()
+                    onSwipeableOpen()
+                    leftWidthPx
+                }
+                current < -rightWidthPx * 0.5f && right.isNotEmpty() -> {
+                    onSwipeableRightOpen()
+                    onSwipeableOpen()
+                    -rightWidthPx
+                }
+                else -> {
+                    onSwipeableClose()
+                    0f
+                }
+            }
+            offsetX.animateTo(target, tween(200))
+        }
+    }
+
+    fun close() {
+        scope.launch {
+            offsetX.animateTo(0f, tween(200))
+            onSwipeableClose()
+        }
+    }
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(height)
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) }
+    ) {
+        // Left actions
+        if (left.isNotEmpty()) {
+            Row(
+                modifier = Modifier
+                    .align(Alignment.CenterStart)
+                    .fillMaxHeight()
+            ) {
+                left.forEach { action ->
+                    SwipeActionButton(
+                        action = action,
+                        width = ACTION_WIDTH,
+                        height = height,
+                        shape = shape,
+                        defaultColor = theme.colors.primary,
+                    )
+                }
+            }
+        }
+
+        // Right actions
+        if (right.isNotEmpty()) {
+            Row(
+                modifier = Modifier
+                    .align(Alignment.CenterEnd)
+                    .fillMaxHeight()
+            ) {
+                right.forEach { action ->
+                    SwipeActionButton(
+                        action = action,
+                        width = ACTION_WIDTH,
+                        height = height,
+                        shape = shape,
+                        defaultColor = theme.colors.error.primary,
+                    )
+                }
+            }
+        }
+
+        // Main content
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(height)
+                .offset { IntOffset(offsetX.value.roundToInt(), 0) }
+                .clip(shape)
+                .background(theme.colors.background.surface)
+                .pointerInput(left.size, right.size) {
+                    detectHorizontalDragGestures(
+                        onDragEnd = { snapToClosest() },
+                        onDragCancel = { snapToClosest() },
+                    ) { _, dragAmount ->
+                        scope.launch {
+                            val newOffset = offsetX.value + dragAmount
+                            val clamped = newOffset.coerceIn(-rightWidthPx, leftWidthPx)
+                            offsetX.snapTo(clamped)
+                        }
+                    }
+                }
+        ) {
+            content()
+        }
+    }
+}
+
+@Composable
+private fun SwipeActionButton(
+    action: SwipeAction,
+    width: Dp,
+    height: Dp,
+    shape: RoundedCornerShape,
+    defaultColor: Color,
+) {
+    val bgColor = action.backgroundColor ?: defaultColor
+
+    Box(
+        modifier = Modifier
+            .width(width)
+            .height(height)
+            .clip(shape)
+            .background(bgColor)
+            .activeOpacityClickable(onClick = action.onPress),
+        contentAlignment = Alignment.Center,
+    ) {
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            if (action.icon.isNotEmpty()) {
+                Icon(
+                    source = action.icon,
+                    size = 20.dp,
+                    color = Colors.black_01,
+                )
+            }
+            if (action.label.isNotEmpty()) {
+                Text(
+                    text = action.label,
+                    style = Typography.labelSMedium,
+                    color = Colors.black_01,
+                    maxLines = 1,
+                )
+            }
+        }
+    }
+}