@momo-kits/native-kits 0.161.2-beta.4-debug → 0.161.2-beta.4

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

@@ -1,531 +0,0 @@
-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)
-            }
-        }
-    }
-}

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

@@ -1,92 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-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.Radius
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.const.Typography
-import vn.momo.kits.const.scaleSize
-import vn.momo.kits.modifier.conditional
-
-enum class TagSize(val height: Float) {
-    Large(24.toFloat()),
-    Medium(18.toFloat())
-}
-
-enum class TagColor(val backgroundColor: Color, val textColor: Color) {
-    Default(Colors.black_04, Colors.black_17),
-    Orange(Colors.orange_08, Colors.orange_03),
-    Green(Colors.green_08, Colors.green_03),
-    Red(Colors.red_08, Colors.red_03),
-    Blue(Colors.blue_08, Colors.blue_03),
-    Grey(Colors.black_04, Colors.black_12),
-}
-
-@Composable
-fun Tag(
-    label: String = "Label",
-    icon: String? = null,
-    color: TagColor = TagColor.Default,
-    size: TagSize = TagSize.Large,
-    customColor: Color? = null,
-) {
-    val primaryColors = listOf(
-        Color(0xFFF0F0F0),
-        Color(0xFFEB2F96),
-        Color(0xFF962AF0),
-        Color(0xFF4E4BFF),
-        Color(0xFF007AFF),
-        Color(0xFF13C2C2),
-        Color(0xFF34C759),
-        Color(0xFFA0D911),
-        Color(0xFFFFCC00),
-        Color(0xFFFA8C16),
-        Color(0xFFFA541C),
-        Color(0xFFF5222D)
-    )
-    var tagColor = color.backgroundColor
-    var labelColor = color.textColor
-
-    if (primaryColors.contains(customColor)) {
-        tagColor = color.backgroundColor
-        labelColor = color.textColor
-    }
-
-    Box(
-        modifier = Modifier
-            .height(scaleSize(size.height).dp)
-            .background(tagColor, shape = RoundedCornerShape(Radius.S))
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-            .padding(horizontal = Spacing.S),
-        contentAlignment = Alignment.Center
-    ) {
-        Row(verticalAlignment = Alignment.CenterVertically) {
-            if (icon != null) {
-                Icon(
-                    source = icon,
-                    size = 16.dp,
-                    color = labelColor
-                )
-            }
-            Text(
-                text = label,
-                color = labelColor,
-                style = Typography.labelSMedium
-            )
-        }
-    }
-}