@momo-kits/native-kits 0.157.5-debug → 0.157.6-debug

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

@@ -0,0 +1,531 @@
+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.Arrangement
+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 renderIcon: (@Composable (active: Boolean) -> Unit)? = null,
+    val showDot: Boolean = false,
+    val dotSize: DotSize = DotSize.Small,
+    val badgeValue: String? = null,
+    val accessibilityLabel: String? = null,
+    val content: @Composable () -> Unit = {},
+)
+
+enum class TabViewType { DEFAULT, CARD }
+
+enum class TabViewDirection { ROW, COLUMN }
+
+// ---------------------------------------------------------------------------
+// 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,
+    direction: TabViewDirection = TabViewDirection.ROW,
+    userScrollEnabled: Boolean = true,
+    onPressTabItem: (Int) -> Unit = {},
+    onPageSelected: (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
+                onPageSelected(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) }
+        }
+        if (fitContent) {
+            onPageSelected(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,
+                direction = direction,
+                onPressTabItem = onTabPressed,
+            )
+
+            scrollable -> ScrollableTabBar(
+                tabs = tabs,
+                selectedIndex = selectedIndex,
+                selectedColor = resolvedSelectedColor,
+                unselectedColor = resolvedUnselectedColor,
+                direction = direction,
+                onPressTabItem = onTabPressed,
+            )
+
+            else -> DefaultTabBar(
+                tabs = tabs,
+                selectedIndex = selectedIndex,
+                selectedColor = resolvedSelectedColor,
+                unselectedColor = resolvedUnselectedColor,
+                direction = direction,
+                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 = userScrollEnabled,
+            ) { 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,
+    direction: TabViewDirection,
+    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,
+                    direction = direction,
+                    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,
+    direction: TabViewDirection,
+    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) }
+    }
+
+    val scrollOffsetDp = with(density) { scrollState.value.toDp() }
+
+    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
+                .fillMaxWidth()
+                .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,
+                        direction = direction,
+                        scrollable = true,
+                        onPress = { onPressTabItem(index) },
+                    )
+                }
+            }
+        }
+
+        // Animated underline indicator aligned to bottom of the bar
+        Box(
+            modifier = Modifier
+                .align(Alignment.BottomStart)
+                .offset(x = animatedX - scrollOffsetDp + 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,
+    direction: TabViewDirection,
+    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
+            val iconColor = if (isActive) selectedColor else unselectedColor
+
+            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.renderIcon != null) {
+                        tab.renderIcon.invoke(isActive)
+                        Spacer(modifier = Modifier.width(Spacing.XS))
+                    } else if (tab.icon != null) {
+                        Icon(
+                            source = tab.icon,
+                            size = 18.dp,
+                            color = iconColor,
+                        )
+                        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,
+    direction: TabViewDirection,
+    scrollable: Boolean = false,
+    onPress: () -> Unit,
+) {
+    val textColor = if (active) selectedColor else unselectedColor
+    val textStyle = if (active) Typography.headerSSemibold else Typography.bodyDefaultRegular
+
+    if (direction == TabViewDirection.COLUMN) {
+        Column(
+            modifier = modifier
+                .height(68.dp)
+                .activeOpacityClickable { onPress() }
+                .padding(horizontal = Spacing.S),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center,
+        ) {
+            // Icon area with badge/dot overlay
+            Box(contentAlignment = Alignment.TopEnd) {
+                if (tab.renderIcon != null) {
+                    tab.renderIcon.invoke(active)
+                } else if (tab.icon != null) {
+                    Icon(
+                        source = tab.icon,
+                        size = 24.dp,
+                        color = textColor,
+                    )
+                }
+                if (tab.showDot) {
+                    BadgeDot(
+                        size = tab.dotSize,
+                        modifier = Modifier
+                            .align(Alignment.TopEnd)
+                            .offset(x = 4.dp, y = (-4).dp),
+                    )
+                } else if (!tab.badgeValue.isNullOrEmpty()) {
+                    Badge(
+                        label = tab.badgeValue,
+                        modifier = Modifier
+                            .align(Alignment.TopEnd)
+                            .offset(x = 4.dp, y = (-4).dp),
+                    )
+                }
+            }
+            if (tab.icon != null || tab.renderIcon != null) {
+                Spacer(modifier = Modifier.height(Spacing.XXS))
+            }
+            Text(
+                text = tab.title,
+                style = textStyle,
+                color = textColor,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+    } else {
+        Row(
+            modifier = modifier
+                .height(48.dp)
+                .activeOpacityClickable { onPress() }
+                .padding(horizontal = Spacing.M),
+            horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            if (tab.renderIcon != null) {
+                tab.renderIcon.invoke(active)
+                Spacer(modifier = Modifier.width(Spacing.XS))
+            } else 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 = if (scrollable) Modifier else 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)
+            }
+        }
+    }
+}