@momo-kits/native-kits 0.152.4-beta.2 → 0.152.4-beta.3

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

@@ -0,0 +1,169 @@
+package vn.momo.kits.navigation.bottomtab
+
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.min
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import vn.momo.kits.const.AppNavigationBar
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.navigation.LocalNavigation
+import vn.momo.kits.navigation.LocalNavigator
+import vn.momo.kits.navigation.NavigationOptions
+import vn.momo.kits.navigation.StackScreen
+import vn.momo.kits.navigation.component.HeaderType
+import vn.momo.kits.platform.getScreenHeight
+
+private var bottomTabOptionItems : MutableList<NavigationOptions?> = mutableListOf()
+fun setBottomTabOption(index: Int, options: NavigationOptions){
+    if (index in bottomTabOptionItems.indices) {
+        bottomTabOptionItems[index] = options
+    }
+}
+fun getBottomTabOption(index: Int): NavigationOptions? {
+    return if (index in bottomTabOptionItems.indices) {
+        bottomTabOptionItems[index]
+    } else null
+}
+
+@Composable
+fun BottomTab(
+    items: List<BottomTabItem>,
+    floatingButton: BottomTabFloatingButton? = null
+) {
+    val navigation = LocalNavigation.current
+    val navigator = LocalNavigator.current
+    val navController = rememberNavController()
+
+    bottomTabOptionItems = items.mapIndexed { index, item ->
+        val options = item.options ?: NavigationOptions()
+        options.copy(
+            onBackHandler = {
+                if (index != 0) {
+                    navController.popBackStack()
+                } else {
+                    navigator.pop()
+                }
+            }
+        )
+    }.toMutableList()
+
+
+    LaunchedEffect(Unit){
+        navigation.setOptions(
+            headerType = HeaderType.None
+        )
+    }
+
+    Box(modifier = Modifier.fillMaxWidth().height(getScreenHeight()), contentAlignment = Alignment.BottomCenter) {
+        Box(modifier = Modifier
+            .fillMaxSize()
+            .padding(bottom = BOTTOM_TAB_BAR_HEIGHT.dp + AppNavigationBar.current)
+        ) {
+            NavHost(
+                navController = navController,
+                startDestination = "option0"
+            ) {
+                items.forEachIndexed { index, item ->
+                    composable(
+                        route = "option$index",
+                        enterTransition = {
+                            fadeIn(animationSpec = tween(200)) +
+                                    scaleIn(
+                                        initialScale = 0.97f,
+                                        animationSpec = tween(200)
+                                    )
+                        },
+                        exitTransition = {
+                            fadeOut(animationSpec = tween(200)) +
+                                    scaleOut(
+                                        targetScale = 0.97f,
+                                        animationSpec = tween(200)
+                                    )
+                        },
+                        popEnterTransition = {
+                            fadeIn(animationSpec = tween(200)) +
+                                    scaleIn(
+                                        initialScale = 0.97f,
+                                        animationSpec = tween(200)
+                                    )
+                        },
+                        popExitTransition = {
+                            fadeOut(animationSpec = tween(200)) +
+                                    scaleOut(
+                                        targetScale = 0.97f,
+                                        animationSpec = tween(200)
+                                    )
+                        }
+                    ) {
+                        val option = getBottomTabOption(index)?.copy(
+                            onBackHandler = {
+                                if (index != 0) {
+                                    navController.popBackStack()
+                                } else {
+                                    navigator.pop()
+                                }
+                            }
+                        )
+
+                        StackScreen(
+                            content = item.screen,
+                            navigationOptions = option,
+                            bottomTabIndex = index
+                        )
+                    }
+                }
+            }
+        }
+        Column {
+            BottomTabBar(
+                items = items,
+                floatingButton = floatingButton,
+                navController = navController,
+                onTabSelected = {
+                    val currentRoute = navController.currentBackStackEntry?.destination?.route
+                    val targetRoute = "option$it"
+                    if (currentRoute != targetRoute){
+                        navController.navigate(targetRoute)
+                    }
+                }
+            )
+            Spacer(modifier = Modifier.fillMaxWidth().height(min(AppNavigationBar.current, 21.dp) + Spacing.S).background(AppTheme.current.colors.background.surface))
+        }
+    }
+}
+
+data class BottomTabItem(
+    val name: String,
+    val label: String,
+    val icon: String,
+    val showDot: Boolean = false,
+    val badgeLabel: String? = null,
+    val screen: @Composable () -> Unit,
+    val options: NavigationOptions? = null,
+    val initialParams: Any? = null
+)
+
+data class BottomTabFloatingButton(
+    val icon: String,
+    val label: String,
+    val onPress: () -> Unit,
+)

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

@@ -0,0 +1,216 @@
+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.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.RowScope
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+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.size
+import androidx.compose.foundation.layout.width
+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.components.Badge
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Text
+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.noFeedbackClickable
+import vn.momo.kits.platform.getScreenDimensions
+
+val floatingButtonWidth = 75.dp
+const val BOTTOM_TAB_BAR_HEIGHT = 56
+
+@Composable
+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),
+            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
+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
+fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
+    Box(modifier = Modifier
+        .fillMaxSize()
+        .padding(horizontal = Spacing.XXS)
+        .noFeedbackClickable {
+            onClick()
+        },
+        contentAlignment = Alignment.BottomStart
+    ){
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(horizontal = Spacing.XXS)
+                .noFeedbackClickable {
+                    onClick()
+                },
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Bottom
+        ) {
+            Icon(
+                source = item.icon,
+                color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint)
+            Spacer(modifier = Modifier.height(6.dp))
+            Box(modifier = Modifier.height(14.dp), contentAlignment = Alignment.Center){
+                Text(
+                    text = item.label,
+                    color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint,
+                    style = Typography.labelXsMedium,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis
+                )
+            }
+        }
+        if(item.badgeLabel != null){
+            Box(modifier = Modifier
+                .offset(x = 44.dp, y = (-32).dp)
+            ){
+                Badge(item.badgeLabel)
+            }
+        }
+    }
+}
+
+@Composable
+fun FloatingButton(data: BottomTabFloatingButton) {
+    Column(
+        modifier = Modifier
+            .width(floatingButtonWidth)
+            .padding(horizontal = Spacing.XXS)
+            .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

@@ -0,0 +1,86 @@
+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
+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

@@ -0,0 +1,180 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.animation.AnimatedVisibility
+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.animation.expandHorizontally
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkHorizontally
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.sizeIn
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.AlertDialogDefaults
+import androidx.compose.material3.FloatingActionButton
+import androidx.compose.material3.FloatingActionButtonDefaults
+import androidx.compose.material3.FloatingActionButtonElevation
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+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.components.Icon
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.Typography
+
+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
+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)
+                    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)
+        ) {
+            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
+)