@momo-kits/native-kits 0.158.1-beta.1 → 0.158.1-beta.2-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,
+                )
+            }
+        }
+    }
+}

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

@@ -0,0 +1,96 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+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.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.setAutomationId
+
+// Pre-computed shapes to avoid repeated creation
+private val switchShape = RoundedCornerShape(20.dp)
+private val circleShape = RoundedCornerShape(percent = 100)
+
+@Composable
+fun Switch(
+    value: Boolean = false,
+    onChange: (Boolean) -> Unit = {},
+    disabled: Boolean = false,
+    title: String? = "",
+    accessibilityId: String? = ""
+) {
+    // Memoize color calculations to avoid repeated conditional logic
+    val colors = remember(value, disabled) {
+        val circleColor = if (value) Colors.black_01 else Colors.black_03
+        val bgColor = when {
+            disabled && value -> Colors.green_09
+            disabled && !value -> Colors.black_05
+            value -> Colors.green_03
+            else -> Colors.black_07
+        }
+        circleColor to bgColor
+    }
+
+    val (circleBackgroundColor, backgroundColor) = colors
+
+    // Memoize automation ID to avoid string concatenation on every render
+    val automationIdValue = remember(accessibilityId, title, value) {
+        accessibilityId ?: "toggle_${title ?: "unknown"}_$value"
+    }
+
+    // Memoize alignment calculation
+    val contentAlignment = remember(value) {
+        if (value) Alignment.CenterEnd else Alignment.CenterStart
+    }
+
+    // Memoize click handler to avoid lambda recreation
+    val onClickHandler = remember(onChange, value) {
+        { onChange(!value) }
+    }
+
+    Box(modifier = Modifier.setAutomationId(automationIdValue)) {
+        Box(
+            modifier = Modifier
+                .width(38.dp)
+                .height(20.dp)
+                .border(0.dp, Color.Unspecified, switchShape)
+                .background(backgroundColor, switchShape)
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .clip(switchShape)
+                .clickable(enabled = !disabled, onClick = onClickHandler)
+                .padding(horizontal = Spacing.XS),
+            contentAlignment = contentAlignment
+        ) {
+            Box(
+                modifier = Modifier
+                    .size(14.dp)
+                    .border(0.dp, Color.Unspecified, circleShape)
+                    .background(circleBackgroundColor, circleShape),
+                contentAlignment = Alignment.Center
+            ) {
+                Box(
+                    Modifier
+                        .size(6.dp)
+                        .background(backgroundColor, circleShape)
+                )
+            }
+        }
+    }
+}