@momo-kits/native-kits 0.163.1-beta.3-debug → 0.163.1-beta.3

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/bottomtab/BottomTabBar.kt

@@ -1,223 +0,0 @@
-package vn.momo.kits.navigation.bottomtab
-
-import androidx.compose.animation.core.FastOutSlowInEasing
-import androidx.compose.animation.core.animateDpAsState
-import androidx.compose.animation.core.tween
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.dp
-import androidx.navigation.NavController
-import androidx.navigation.compose.currentBackStackEntryAsState
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.components.*
-import vn.momo.kits.const.*
-import vn.momo.kits.modifier.conditional
-import vn.momo.kits.modifier.noFeedbackClickable
-import vn.momo.kits.platform.getScreenDimensions
-
-internal val floatingButtonWidth = 75.dp
-internal const val BOTTOM_TAB_BAR_HEIGHT = 64
-
-@Composable
-internal fun BottomTabBar(
-    items: List<BottomTabItem>,
-    floatingButton: BottomTabFloatingButton? = null,
-    navController: NavController,
-    onTabSelected: (Int) -> Unit,
-) {
-    val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
-    val selectedIndex = items.indexOfFirst { "option${items.indexOf(it)}" == currentRoute }
-
-    val screenWidth = getScreenDimensions().width.dp
-    val mid = items.size / 2
-
-    val tabWidth = if (floatingButton != null) {
-        (screenWidth - floatingButtonWidth) / items.size
-    } else {
-        screenWidth / items.size
-    }
-    val adjustSize = if(floatingButton != null && selectedIndex >= mid) floatingButtonWidth else 0.dp
-    val targetOffset = tabWidth * selectedIndex + tabWidth / 2 - screenWidth / 2 + adjustSize
-
-    val indicatorOffsetX by animateDpAsState(
-        targetValue = targetOffset,
-        animationSpec = tween(durationMillis = 250, easing = FastOutSlowInEasing),
-        label = "IndicatorX"
-    )
-
-    Box(
-        contentAlignment = Alignment.BottomCenter
-    ) {
-        Row(
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(BOTTOM_TAB_BAR_HEIGHT.dp)
-                .background(AppTheme.current.colors.background.surface)
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                },
-            horizontalArrangement = Arrangement.SpaceAround,
-        ) {
-            if (floatingButton == null) {
-                RenderTabBarItem(items, 0, items.size, selectedIndex, onTabSelected)
-            } else {
-                RenderTabBarItem(items, 0, mid, selectedIndex, onTabSelected)
-                Spacer(modifier = Modifier.width(floatingButtonWidth).padding(horizontal = Spacing.XXS))
-                RenderTabBarItem(items, mid, items.size, selectedIndex, onTabSelected)
-            }
-        }
-
-        Box(modifier = Modifier
-            .offset(x = indicatorOffsetX, y = (-BOTTOM_TAB_BAR_HEIGHT + 2).dp)
-            .height(2.dp)
-            .width(44.dp)
-            .background(
-                color = AppTheme.current.colors.primary ,
-                shape = RoundedCornerShape(bottomStart = 2.dp, bottomEnd = 2.dp)
-            )
-        )
-
-        Box(modifier = Modifier
-            .fillMaxWidth()
-            .height(6.dp)
-            .offset(x = 0.dp, y = (-BOTTOM_TAB_BAR_HEIGHT).dp)
-            .background(
-                brush = Brush.verticalGradient(
-                    colors = listOf(Color.Transparent, Color.Black.copy(alpha = 0.05f))
-                )
-            )
-        )
-        floatingButton?.let { FloatingButton(it) }
-    }
-}
-
-@Composable
-internal fun RowScope.RenderTabBarItem(
-    items: List<BottomTabItem>,
-    fromIndex: Int,
-    toIndex: Int,
-    selectedIndex: Int,
-    onTabSelected: (Int) -> Unit
-){
-    for (index in fromIndex until toIndex) {
-        Box(modifier = Modifier.weight(1f)) {
-            TabBarItem(
-                item = items[index],
-                selected = index == selectedIndex,
-                onClick = { onTabSelected(index) }
-            )
-        }
-    }
-}
-
-@Composable
-internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
-    fun isNumber(label: String): Boolean {
-        val numberRegex = "^\\d+$".toRegex()
-        return numberRegex.matches(label)
-    }
-    fun formatLabel(label: String): String? {
-        if (isNumber(label) && label.toInt() == 0) {
-            return null
-        }
-        return label
-    }
-    val badgeLabel = item.badgeLabel?.let { formatLabel(it) }
-
-    Box(modifier = Modifier
-        .fillMaxSize()
-        .padding(horizontal = Spacing.XXS)
-        .conditional(IsShowBaseLineDebug) {
-            border(1.dp, Colors.blue_03)
-        }
-        .noFeedbackClickable {
-            onClick()
-        },
-        contentAlignment = Alignment.BottomStart
-    ){
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(horizontal = Spacing.S, vertical = Spacing.S)
-                .noFeedbackClickable {
-                    onClick()
-                },
-            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.Center
-        ) {
-            Icon(
-                source = item.icon,
-                size = 28.dp,
-                modifier = Modifier.padding(Spacing.XS),
-                color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint)
-            Text(
-                text = item.label,
-                color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint,
-                style = if (selected) Typography.labelXsMedium else Typography.descriptionXsRegular,
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis
-            )
-        }
-        if (badgeLabel != null) {
-            if (badgeLabel.isEmpty())
-                BadgeDot(
-                    size = DotSize.Small,
-                    modifier = Modifier.offset(x = 50.dp, y = (-48).dp)
-                )
-            else
-                Badge(badgeLabel, modifier = Modifier.offset(x = 44.dp, y = (-42).dp))
-        }
-    }
-}
-
-@Composable
-internal fun FloatingButton(data: BottomTabFloatingButton) {
-    Column(
-        modifier = Modifier
-            .width(floatingButtonWidth)
-            .padding(horizontal = Spacing.XXS, vertical = Spacing.S)
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-            .noFeedbackClickable {
-                data.onPress()
-            },
-        verticalArrangement = Arrangement.Bottom,
-        horizontalAlignment = Alignment.CenterHorizontally
-
-    ){
-        CurvedContainer()
-        Box(
-            modifier = Modifier
-                .size(48.dp)
-                .clip(CircleShape)
-                .background(AppTheme.current.colors.primary),
-            contentAlignment = Alignment.Center
-        ) {
-            Icon(source = data.icon, color = Color.White, size = 28.dp)
-        }
-        Spacer(modifier = Modifier.height(4.dp))
-        Text(
-            text = data.label,
-            style = Typography.labelXsMedium,
-            color = Colors.black_01,
-            textAlign = TextAlign.Center,
-            modifier = Modifier
-                .height(14.dp)
-                .fillMaxWidth()
-                .background(AppTheme.current.colors.primary, shape = RoundedCornerShape(size = Radius.XL))
-        )
-    }
-}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/bottomtab/CurvedContainer.kt

@@ -1,86 +0,0 @@
-package vn.momo.kits.navigation.bottomtab
-
-import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.width
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Path
-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 androidx.compose.ui.zIndex
-import vn.momo.kits.const.AppTheme
-
-@Composable
-internal fun CurvedContainer(
-    circleSize: Dp = 48.dp,
-    tabBarItemIconSize: Dp = 28.dp,
-    circleOverSize: Dp = 2.dp,
-    width: Dp = 71.dp,
-    height: Dp = 16.dp
-) {
-    val theme = AppTheme.current
-    val density = LocalDensity.current
-    val widthPx = with(density) { width.toPx()}
-
-    val circleSizePx = with(density) { circleSize.toPx() }
-    val tabBarItemIconSizePx = with(density) { tabBarItemIconSize.toPx() }
-    val circleOverSizePx = with(density) { circleOverSize.toPx() }
-
-    val circlePositionTop = circleSizePx - tabBarItemIconSizePx - 10f
-    val circleOverTop = circlePositionTop + circleOverSizePx
-    val circleR = circleSizePx / 2
-    val circleOverR = circleR + circleOverSizePx
-
-    val centerX = widthPx / 2
-
-    val curvedPath = getPath(
-        circleOverTop = circleOverTop,
-        centerX = centerX,
-        circleOverR = circleOverR,
-        widthPx = widthPx
-    )
-
-    Box(
-        contentAlignment = Alignment.BottomCenter
-    ){
-        Canvas(
-            modifier = Modifier
-                .width(width)
-                .height(height)
-                .offset{ IntOffset(x = 0, y = 24) }
-                .zIndex(-1f)
-        ) {
-            drawPath(path = curvedPath, color = theme.colors.background.surface)
-        }
-    }
-}
-
-private fun getPath(circleOverTop: Float, centerX: Float, circleOverR: Float, widthPx: Float): Path{
-    return Path().apply {
-        moveTo(0f, circleOverTop)
-        lineTo(centerX - circleOverR - 40f, circleOverTop)
-
-        cubicTo(
-            centerX - circleOverR, circleOverTop,
-            centerX - circleOverR, 0f,
-            centerX, 0f
-        )
-
-        cubicTo(
-            centerX + circleOverR, 0f,
-            centerX + circleOverR, circleOverTop,
-            centerX + circleOverR + 40f, circleOverTop
-        )
-
-        lineTo(widthPx, circleOverTop)
-        lineTo(widthPx, 60f)
-        lineTo(0f, 60f)
-        close()
-    }
-}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/FloatingButton.kt

@@ -1,169 +0,0 @@
-package vn.momo.kits.navigation.component
-
-import androidx.compose.animation.*
-import androidx.compose.animation.core.CubicBezierEasing
-import androidx.compose.animation.core.LinearEasing
-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.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.*
-import androidx.compose.material3.AlertDialogDefaults
-import androidx.compose.material3.FloatingActionButton
-import androidx.compose.material3.FloatingActionButtonDefaults
-import androidx.compose.material3.FloatingActionButtonElevation
-import androidx.compose.runtime.*
-import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import kotlinx.coroutines.delay
-import kotlinx.coroutines.flow.MutableStateFlow
-import kotlinx.coroutines.flow.collectLatest
-import kotlinx.coroutines.launch
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.components.Icon
-import vn.momo.kits.components.Text
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Typography
-import vn.momo.kits.modifier.conditional
-import kotlin.time.Duration.Companion.milliseconds
-
-enum class FABSize { SMALL, DEFAULT }
-enum class FABPosition { END, CENTER }
-
-data class FloatingButtonProps(
-    val icon: String,
-    val iconColor: Color? = null,
-    val label: String? = null,
-    val onClick: () -> Unit,
-    val size: FABSize = FABSize.DEFAULT,
-    val bottom: Dp? = null,
-    val scrollState: ScrollState? = null,
-    val position: FABPosition? = FABPosition.END,
-)
-
-private val FabSmallSize = 36.dp
-private val FabDefaultSize = 48.dp
-private val FabExpandedWidth = 80.dp
-private val FabIconSizeSmall = 12.dp
-private val FabIconSizeDefault = 24.dp
-private val FabPaddingHorizontal = 12.dp
-
-@Composable
-internal fun FloatingButton(
-    scrollPosition: Int,
-    bottom: Dp,
-    onClick: () -> Unit,
-    containerColor: Color,
-    contentColor: Color = containerColor,
-    icon: String,
-    iconColor: Color? = null,
-    text: String? = null,
-    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(4.dp),
-    size: FABSize = FABSize.DEFAULT,
-    position: FABPosition = FABPosition.END,
-    keyboardSize: Dp = 0.dp,
-) {
-    val scrollStateFlow = remember { MutableStateFlow(scrollPosition) }
-    var lastScrollPosition by rememberSaveable { mutableStateOf(0) }
-    var isExpanded by rememberSaveable { mutableStateOf(false) }
-
-    val coroutineScope = rememberCoroutineScope()
-
-    // Animations
-    val baseSize = if (size == FABSize.SMALL) FabSmallSize else FabDefaultSize
-    val width by animateDpAsState(
-        targetValue = if (isExpanded && text != null) FabExpandedWidth else baseSize,
-        animationSpec = tween(100, easing = CubicBezierEasing(0.2f, 0.2f, 0.2f, 0.2f))
-    )
-
-    // Scroll listener
-    LaunchedEffect(text) {
-        if (text != null) {
-            coroutineScope.launch {
-                scrollStateFlow.collectLatest { newScroll ->
-                    isExpanded = newScroll <= lastScrollPosition
-                    delay(100.milliseconds)
-                    lastScrollPosition = newScroll
-                }
-            }
-        }
-    }
-
-    LaunchedEffect(scrollPosition) {
-        scrollStateFlow.value = scrollPosition
-    }
-
-    Box(
-        modifier = Modifier
-            .fillMaxSize()
-            .padding(end = 12.dp, bottom = bottom)
-            .offset(y = -keyboardSize)
-            .background(Color.Transparent),
-        contentAlignment = if (position == FABPosition.END) Alignment.BottomEnd else Alignment.BottomCenter,
-    ) {
-        FloatingActionButton(
-            onClick = onClick,
-            shape = AlertDialogDefaults.shape,
-            containerColor = containerColor,
-            contentColor = contentColor,
-            elevation = elevation,
-            interactionSource = remember { MutableInteractionSource() },
-            modifier = Modifier
-                .sizeIn(minWidth = width)
-                .height(baseSize)
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-        ) {
-            Row(
-                modifier = Modifier.padding(
-                    start = if (isExpanded) FabPaddingHorizontal else 0.dp,
-                    end = if (isExpanded) FabPaddingHorizontal else 0.dp,
-                ),
-                verticalAlignment = Alignment.CenterVertically,
-                horizontalArrangement = if (isExpanded) Arrangement.Start else Arrangement.Center
-            ) {
-                Icon(
-                    source = icon,
-                    size = if (size == FABSize.SMALL) FabIconSizeSmall else FabIconSizeDefault,
-                    color = iconColor ?: Color.White
-                )
-
-                AnimatedVisibility(
-                    visible = isExpanded,
-                    enter = fadeInExpandAnimation,
-                    exit = fadeOutShrinkAnimation,
-                ) {
-                    Row {
-                        Spacer(Modifier.width(12.dp))
-                        Text(
-                            text = text ?: "",
-                            color = Color.White,
-                            style = Typography.actionDefaultBold
-                        )
-                    }
-                }
-            }
-        }
-    }
-}
-
-private val fadeOutShrinkAnimation = fadeOut(
-    animationSpec = tween(100, easing = LinearEasing)
-) + shrinkHorizontally(
-    animationSpec = tween(100, easing = LinearEasing),
-    shrinkTowards = Alignment.Start
-)
-
-private val fadeInExpandAnimation = fadeIn(
-    animationSpec = tween(100, easing = LinearEasing)
-) + expandHorizontally(
-    animationSpec = tween(100, easing = LinearEasing),
-    expandFrom = Alignment.Start
-)