@momo-kits/native-kits 0.157.1-beta.9-debug → 0.157.1-com.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,
+                )
+            }
+        }
+    }
+}

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

@@ -0,0 +1,449 @@
+package vn.momo.kits.components
+
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.horizontalScroll
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.layout.positionInParent
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
+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
+
+// ---------------------------------------------------------------------------
+// Data model
+// ---------------------------------------------------------------------------
+
+data class TabViewItem(
+    val title: String,
+    val icon: String? = null,
+    val showDot: Boolean = false,
+    val dotSize: DotSize = DotSize.Small,
+    val badgeValue: String? = null,
+    val content: @Composable () -> Unit = {},
+)
+
+enum class TabViewType { DEFAULT, CARD }
+
+// ---------------------------------------------------------------------------
+// Public composable
+// ---------------------------------------------------------------------------
+
+@Composable
+fun TabView(
+    modifier: Modifier = Modifier,
+    tabs: List<TabViewItem>,
+    initialPage: Int = 0,
+    type: TabViewType = TabViewType.DEFAULT,
+    scrollable: Boolean = false,
+    fitContent: Boolean = false,
+    selectedColor: Color? = null,
+    unselectedColor: Color? = null,
+    onPressTabItem: (Int) -> Unit = {},
+) {
+    if (tabs.isEmpty()) return
+
+    val theme = AppTheme.current
+    val resolvedSelectedColor = selectedColor ?: theme.colors.primary
+    val resolvedUnselectedColor = unselectedColor ?: theme.colors.text.default
+
+    val startPage = initialPage.coerceIn(0, tabs.lastIndex)
+    var selectedIndex by remember { mutableStateOf(startPage) }
+
+    // Track which pages have already been visited for lazy rendering
+    val lazyRendered = remember { mutableStateListOf(startPage) }
+
+    val pagerState = if (!fitContent) {
+        rememberPagerState(initialPage = startPage) { tabs.size }
+    } else null
+
+    val coroutineScope = rememberCoroutineScope()
+
+    // Keep selectedIndex in sync when user swipes the pager
+    if (pagerState != null) {
+        LaunchedEffect(pagerState) {
+            snapshotFlow { pagerState.currentPage }.collect { page ->
+                if (!lazyRendered.contains(page)) lazyRendered.add(page)
+                selectedIndex = page
+            }
+        }
+    }
+
+    val onTabPressed: (Int) -> Unit = { index ->
+        onPressTabItem(index)
+        if (!lazyRendered.contains(index)) lazyRendered.add(index)
+        selectedIndex = index
+        if (pagerState != null) {
+            coroutineScope.launch { pagerState.animateScrollToPage(index) }
+        }
+    }
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
+    ) {
+        // Tab bar
+        when {
+            type == TabViewType.CARD -> CardTabBar(
+                tabs = tabs,
+                selectedIndex = selectedIndex,
+                selectedColor = resolvedSelectedColor,
+                unselectedColor = resolvedUnselectedColor,
+                onPressTabItem = onTabPressed,
+            )
+
+            scrollable -> ScrollableTabBar(
+                tabs = tabs,
+                selectedIndex = selectedIndex,
+                selectedColor = resolvedSelectedColor,
+                unselectedColor = resolvedUnselectedColor,
+                onPressTabItem = onTabPressed,
+            )
+
+            else -> DefaultTabBar(
+                tabs = tabs,
+                selectedIndex = selectedIndex,
+                selectedColor = resolvedSelectedColor,
+                unselectedColor = resolvedUnselectedColor,
+                onPressTabItem = onTabPressed,
+            )
+        }
+
+        // Content area
+        if (fitContent) {
+            Box(modifier = Modifier.fillMaxWidth()) {
+                tabs.getOrNull(selectedIndex)?.content?.invoke()
+            }
+        } else if (pagerState != null) {
+            HorizontalPager(
+                state = pagerState,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .weight(1f),
+                userScrollEnabled = false,
+            ) { page ->
+                Box(modifier = Modifier.fillMaxWidth()) {
+                    if (lazyRendered.contains(page)) {
+                        tabs[page].content()
+                    }
+                }
+            }
+        }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Default fixed-width tab bar
+// ---------------------------------------------------------------------------
+
+@Composable
+private fun DefaultTabBar(
+    tabs: List<TabViewItem>,
+    selectedIndex: Int,
+    selectedColor: Color,
+    unselectedColor: Color,
+    onPressTabItem: (Int) -> Unit,
+) {
+    val theme = AppTheme.current
+    val density = LocalDensity.current
+    var totalWidthPx by remember { mutableStateOf(0) }
+
+    val itemWidth: Dp = if (totalWidthPx > 0 && tabs.isNotEmpty()) {
+        with(density) { (totalWidthPx / tabs.size).toDp() }
+    } else 0.dp
+
+    val indicatorOffsetX: Dp by animateDpAsState(
+        targetValue = itemWidth * selectedIndex + Spacing.XS,
+        animationSpec = tween(durationMillis = 200),
+        label = "DefaultIndicatorX",
+    )
+    val indicatorWidth: Dp = (itemWidth - Spacing.XS * 2).coerceAtLeast(0.dp)
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .onGloballyPositioned { totalWidthPx = it.size.width }
+            .background(theme.colors.background.surface)
+            .border(
+                width = 0.5.dp,
+                color = theme.colors.border.default,
+                shape = RoundedCornerShape(0.dp),
+            ),
+    ) {
+        Row(modifier = Modifier.fillMaxWidth()) {
+            tabs.forEachIndexed { index, tab ->
+                TabItemView(
+                    modifier = Modifier.weight(1f),
+                    tab = tab,
+                    active = selectedIndex == index,
+                    selectedColor = selectedColor,
+                    unselectedColor = unselectedColor,
+                    onPress = { onPressTabItem(index) },
+                )
+            }
+        }
+
+        // Animated underline indicator
+        Box(
+            modifier = Modifier
+                .align(Alignment.BottomStart)
+                .offset(x = indicatorOffsetX)
+                .width(indicatorWidth)
+                .height(2.dp)
+                .background(
+                    color = selectedColor,
+                    shape = RoundedCornerShape(topStart = Radius.XXS, topEnd = Radius.XXS),
+                ),
+        )
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Scrollable tab bar
+// ---------------------------------------------------------------------------
+
+@Composable
+private fun ScrollableTabBar(
+    tabs: List<TabViewItem>,
+    selectedIndex: Int,
+    selectedColor: Color,
+    unselectedColor: Color,
+    onPressTabItem: (Int) -> Unit,
+) {
+    val theme = AppTheme.current
+    val density = LocalDensity.current
+    val scrollState: ScrollState = rememberScrollState()
+    val coroutineScope = rememberCoroutineScope()
+
+    // Per-item (widthPx, xPx) measured relative to the scrollable row
+    val itemMeasures = remember { mutableStateListOf<Pair<Float, Float>>() }
+
+    val rawWidth = itemMeasures.getOrNull(selectedIndex)?.first ?: 0f
+    val rawX = itemMeasures.getOrNull(selectedIndex)?.second ?: 0f
+
+    val animatedWidth: Dp by animateDpAsState(
+        targetValue = with(density) { rawWidth.toDp() },
+        animationSpec = tween(250),
+        label = "ScrollableIndicatorWidth",
+    )
+    val animatedX: Dp by animateDpAsState(
+        targetValue = with(density) { rawX.toDp() },
+        animationSpec = tween(250),
+        label = "ScrollableIndicatorX",
+    )
+
+    // Auto-scroll bar to keep selected item visible
+    LaunchedEffect(selectedIndex, itemMeasures.size) {
+        val x = itemMeasures.getOrNull(selectedIndex)?.second ?: return@LaunchedEffect
+        val target = (x - with(density) { Spacing.S.toPx() }).coerceAtLeast(0f).toInt()
+        coroutineScope.launch { scrollState.animateScrollTo(target) }
+    }
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(theme.colors.background.surface)
+            .border(
+                width = 0.5.dp,
+                color = theme.colors.border.default,
+                shape = RoundedCornerShape(0.dp),
+            ),
+    ) {
+        Row(
+            modifier = Modifier
+                .wrapContentWidth()
+                .horizontalScroll(scrollState),
+        ) {
+            tabs.forEachIndexed { index, tab ->
+                Box(
+                    modifier = Modifier
+                        .wrapContentWidth()
+                        .onGloballyPositioned { coords ->
+                            val w = coords.size.width.toFloat()
+                            val x = coords.positionInParent().x
+                            while (itemMeasures.size <= index) itemMeasures.add(0f to 0f)
+                            itemMeasures[index] = w to x
+                        },
+                ) {
+                    TabItemView(
+                        tab = tab,
+                        active = selectedIndex == index,
+                        selectedColor = selectedColor,
+                        unselectedColor = unselectedColor,
+                        onPress = { onPressTabItem(index) },
+                    )
+                }
+            }
+        }
+
+        // Animated underline indicator aligned to bottom of the bar
+        Box(
+            modifier = Modifier
+                .align(Alignment.BottomStart)
+                .offset(x = animatedX + Spacing.XS)
+                .width((animatedWidth - Spacing.XS * 2).coerceAtLeast(0.dp))
+                .height(2.dp)
+                .background(
+                    color = selectedColor,
+                    shape = RoundedCornerShape(topStart = Radius.XXS, topEnd = Radius.XXS),
+                ),
+        )
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Card tab bar
+// ---------------------------------------------------------------------------
+
+@Composable
+private fun CardTabBar(
+    tabs: List<TabViewItem>,
+    selectedIndex: Int,
+    selectedColor: Color,
+    unselectedColor: Color,
+    onPressTabItem: (Int) -> Unit,
+) {
+    val theme = AppTheme.current
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = Spacing.XS),
+        verticalAlignment = Alignment.Bottom,
+    ) {
+        tabs.forEachIndexed { index, tab ->
+            val isActive = selectedIndex == index
+
+            Box(
+                modifier = Modifier
+                    .weight(1f)
+                    .height(if (isActive) 44.dp else 40.dp)
+                    .background(
+                        color = if (isActive) theme.colors.background.surface
+                        else theme.colors.background.tonal,
+                        shape = RoundedCornerShape(
+                            topStart = Radius.M,
+                            topEnd = Radius.M,
+                        ),
+                    )
+                    .activeOpacityClickable { onPressTabItem(index) }
+                    .padding(horizontal = Spacing.S),
+                contentAlignment = Alignment.Center,
+            ) {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    if (tab.icon != null) {
+                        Icon(
+                            source = tab.icon,
+                            size = 18.dp,
+                            color = if (isActive) selectedColor else unselectedColor,
+                        )
+                        Spacer(modifier = Modifier.width(Spacing.XS))
+                    }
+                    Text(
+                        text = tab.title,
+                        style = if (isActive) Typography.headerSSemibold else Typography.bodyDefaultRegular,
+                        color = if (isActive) selectedColor else unselectedColor,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                        modifier = Modifier.weight(1f, fill = false),
+                    )
+                    if (tab.showDot) {
+                        Spacer(modifier = Modifier.width(Spacing.XS))
+                        BadgeDot(size = tab.dotSize)
+                    } else if (!tab.badgeValue.isNullOrEmpty()) {
+                        Spacer(modifier = Modifier.width(Spacing.XS))
+                        Badge(label = tab.badgeValue, modifier = Modifier)
+                    }
+                }
+            }
+        }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Shared tab item used by DefaultTabBar and ScrollableTabBar
+// ---------------------------------------------------------------------------
+
+@Composable
+private fun TabItemView(
+    modifier: Modifier = Modifier,
+    tab: TabViewItem,
+    active: Boolean,
+    selectedColor: Color,
+    unselectedColor: Color,
+    onPress: () -> Unit,
+) {
+    val textColor = if (active) selectedColor else unselectedColor
+    val textStyle = if (active) Typography.headerSSemibold else Typography.bodyDefaultRegular
+
+    Row(
+        modifier = modifier
+            .height(48.dp)
+            .activeOpacityClickable { onPress() }
+            .padding(horizontal = Spacing.S),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        if (tab.icon != null) {
+            Icon(
+                source = tab.icon,
+                size = 18.dp,
+                color = textColor,
+            )
+            Spacer(modifier = Modifier.width(Spacing.XS))
+        }
+        Text(
+            text = tab.title,
+            style = textStyle,
+            color = textColor,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+            modifier = Modifier.weight(1f, fill = false),
+        )
+        if (tab.showDot) {
+            Spacer(modifier = Modifier.width(Spacing.XS))
+            BadgeDot(size = tab.dotSize)
+        } else if (!tab.badgeValue.isNullOrEmpty()) {
+            Spacer(modifier = Modifier.width(Spacing.XS))
+            Badge(label = tab.badgeValue, modifier = Modifier)
+        }
+    }
+}