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

package/compose/src/commonMain/kotlin/vn/momo/kits/application/Screen.kt

@@ -0,0 +1,378 @@
+package vn.momo.kits.application
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.LayoutCoordinates
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import kotlinx.coroutines.*
+import vn.momo.kits.components.InputSearchProps
+import vn.momo.kits.const.AppNavigationBar
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.DeprecatedModifier
+import vn.momo.kits.modifier.shadow
+import vn.momo.kits.navigation.component.SnackBar
+import vn.momo.kits.platform.supportsImePadding
+import vn.momo.kits.utils.getAppStatusBarHeight
+import vn.momo.kits.utils.getNavigationBarHeight
+import kotlin.time.Duration.Companion.milliseconds
+
+enum class HeaderType {
+    DEFAULT,
+    EXTENDED,
+    NONE
+}
+
+const val HEADER_HEIGHT = 52
+
+@Deprecated("Use NavigationContainer(StackScreen) instead", ReplaceWith("NavigationContainer(StackScreen)"))
+@Composable
+fun Screen(
+    backgroundColor: Color? = null,
+    tintColor: Color? = null,
+    headerTransparent: Boolean = false,
+    fullScreenContent: Boolean = false,
+    isBack: Boolean = true,
+    headerType: HeaderType = HeaderType.DEFAULT,
+    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
+    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
+    title: String = "Stack",
+    titlePosition: TitlePosition = TitlePosition.LEFT,
+    goBack: (() -> Unit)? = null,
+    scrollable: Boolean = true,
+    scrollState: ScrollState = rememberScrollState(),
+    onContentLayout: ((LayoutCoordinates) -> Unit)? = null,
+    useAvoidKeyboard: Boolean = true,
+    footer: @Composable (() -> Unit)? = null,
+    headerRight: @Composable (() -> Unit)? = null,
+    fabProps: FabProps? = null,
+    animatedHeader: AnimatedHeader? = null,
+    layoutOffset: Dp = 56.dp,
+    inputSearchProps: InputSearchProps? = null,
+    useAnimationSearch: Boolean = false,
+    headerRightWidth: Dp = 0.dp,
+    content: @Composable () -> Unit,
+) {
+    val statusBarHeight = getAppStatusBarHeight()
+    val keyboardController = LocalSoftwareKeyboardController.current
+
+    val isKeyboardVisible = isKeyboardVisible()
+    val indicator = getNavigationBarHeight()
+    val bottomPadding = if (isKeyboardVisible) 0.dp else indicator
+
+    val headerHeight = if (animatedHeader !== null)
+        with(LocalDensity.current) { layoutOffset.roundToPx() }
+    else HEADER_HEIGHT
+    val opacity by animateFloatAsState(
+        targetValue = ((scrollState.value.toFloat() / headerHeight)).coerceIn(0f, 1f),
+    )
+
+    val headerAnimated =
+        @Composable {
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .aspectRatio(animatedHeader?.aspectRatio?.value ?: AnimatedHeaderRatio.RATIO_16_9.value)
+            ) {
+                animatedHeader?.composable?.invoke(scrollState.value)
+            }
+        }
+    val helper = remember { ScreenHelper() }
+
+    DisposableEffect(Unit) {
+        onDispose { helper.dispose() }
+    }
+
+    CompositionLocalProvider(
+        LocalScreenHelper provides helper
+    ) {
+        Box(
+            Modifier.fillMaxSize()
+                .background(backgroundColor ?: AppTheme.current.colors.background.default)
+                .conditional(useAvoidKeyboard && supportsImePadding()) {
+                    imePadding()
+                }.then(DeprecatedModifier())
+        ) {
+            val footerHeightPx = remember { mutableStateOf(0) }
+
+            Box(Modifier.zIndex(1f)) {
+                if (animatedHeader === null) {
+                    HeaderBackground(
+                        headerType = headerType,
+                        scrollState = scrollState.value,
+                        headerTransparent = headerTransparent
+                    )
+                }
+            }
+
+            Box(Modifier.zIndex(5f)) {
+                Header(
+                    headerType = headerType,
+                    title = title,
+                    titlePosition = titlePosition,
+                    headerRight = headerRight,
+                    headerRightWidth = headerRightWidth,
+                    goBack = goBack,
+                    opacity = opacity,
+                    animatedHeader = animatedHeader,
+                    inputSearchProps = inputSearchProps,
+                    scrollState = scrollState.value,
+                    useAnimationSearch = useAnimationSearch,
+                    tintColor = tintColor
+                )
+            }
+
+            Box(Modifier.zIndex(2f).fillMaxSize()){
+                Column(
+                    modifier = Modifier.fillMaxSize()
+                        .padding( top = when {
+                            animatedHeader != null -> 0.dp
+                            headerType == HeaderType.NONE -> 0.dp
+                            fullScreenContent -> 0.dp
+                            else -> statusBarHeight + HEADER_HEIGHT.dp
+                        })
+                        .pointerInput(Unit) {
+                            detectTapGestures(onTap = {
+                                keyboardController?.hide()
+                            })
+                        }
+                        .zIndex(1f),
+                ) {
+
+                    Column(
+                        modifier = Modifier
+                            .conditional(scrollable) { weight(1f) }
+                            .conditional(onContentLayout != null) {
+                                onGloballyPositioned(onContentLayout ?: {})
+                            }
+                            .conditional(scrollable) { verticalScroll(scrollState) },
+                        verticalArrangement = verticalArrangement,
+                        horizontalAlignment = horizontalAlignment
+                    ) {
+                        Box {
+                            if (animatedHeader !== null) headerAnimated()
+                            Column {
+                                if (animatedHeader !== null) {
+                                    Spacer(modifier = Modifier.padding(top = statusBarHeight + HEADER_HEIGHT.dp + layoutOffset))
+                                }
+
+                                if (useAnimationSearch && inputSearchProps != null && headerType == HeaderType.EXTENDED) {
+                                    Spacer(modifier = Modifier.padding(top = (HEADER_HEIGHT.dp + Spacing.S)))
+                                }
+                                content()
+                            }
+                        }
+                    }
+
+                    footer?.let {
+                        val footerHeight = with(LocalDensity.current) { footerHeightPx.value.toDp() }
+                        Spacer(Modifier.height(footerHeight))
+                    }
+                }
+            }
+
+            Box(Modifier.zIndex(4f).align(Alignment.BottomCenter)) {
+                footer?.let {
+                    Footer(
+                        footer = footer,
+                        bottom = bottomPadding,
+                        onFooterMeasured = { footerHeightPx.value = it }
+                    )
+                }
+            }
+
+            Column (Modifier.zIndex(6f)) {
+                if (fabProps != null) {
+                    FloatingButton(
+                        scrollPosition = fabProps.scrollState?.value ?: scrollState.value,
+                        onClick = fabProps.onClick,
+                        containerColor = AppTheme.current.colors.primary,
+                        bottom = fabProps.bottom
+                            ?: if (footer != null) bottomPadding + 76.dp else bottomPadding + 12.dp,
+                        icon = fabProps.icon,
+                        iconColor = fabProps.iconColor,
+                        text = fabProps.label,
+                        size = fabProps.size,
+                        position = fabProps.position ?: FABPosition.END,
+                    )
+                }
+            }
+
+            Box(
+                modifier = Modifier
+                    .align(Alignment.BottomCenter)
+                    .zIndex(3f)
+            ) {
+                ScreenSnackBarHost(if (footer == null) 0 else footerHeightPx.value)
+            }
+        }
+    }
+}
+
+@Composable
+internal fun isKeyboardVisible(): Boolean {
+    val ime = WindowInsets.ime
+    val density = LocalDensity.current
+    val bottom = ime.getBottom(density)
+    return bottom > 0
+}
+
+@Composable
+fun Footer(
+    footer: @Composable (() -> Unit)? = null,
+    bottom: Dp = 0.dp,
+    onFooterMeasured: ((Int) -> Unit)? = null
+) {
+    Box(
+        Modifier
+            .shadow(
+                color = Colors.black_20.copy(alpha = 0.05f),
+                blurRadius = 24f,
+                offsetX = 0.dp,
+                offsetY = (-4).dp
+            )
+            .background(AppTheme.current.colors.background.surface)
+            .onGloballyPositioned {
+                onFooterMeasured?.invoke(it.size.height)
+            }
+            
+    ) {
+        Box(
+            Modifier.fillMaxWidth()
+                .padding(bottom = bottom)
+                .padding(vertical = Spacing.S, horizontal = Spacing.M)
+        ) {
+            footer?.invoke()
+        }
+    }
+}
+
+
+class ScreenHelper {
+
+    private val scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+
+    internal var snackBarState by mutableStateOf<SnackBarData?>(null)
+
+    internal var requestHide by mutableStateOf(false)
+
+    fun showSnackBar(snackBar: SnackBar, onDismiss: (() -> Unit)? = null) {
+        scope.launch {
+            requestHide = false
+            snackBarState = SnackBarData(snackBar, onDismiss)
+        }
+    }
+
+    fun hideSnackBar() {
+        scope.launch {
+            requestHide = true
+        }
+    }
+
+    internal fun removeSnackBarNow() {
+        snackBarState = null
+        requestHide = false
+    }
+
+    fun dispose() {
+        scope.cancel()
+    }
+}
+data class SnackBarData(
+    val type: SnackBar,
+    val onDismiss: (() -> Unit)?
+)
+
+val LocalScreenHelper = staticCompositionLocalOf<ScreenHelper> {
+    error("No Screen helper provided")
+}
+
+@Composable
+internal fun ScreenSnackBarHost(footerHeightPx: Int) {
+    val helper = LocalScreenHelper.current
+    val snackBarData = helper.snackBarState ?: return
+    val density = LocalDensity.current
+    val navigationBar = AppNavigationBar.current
+
+    val footerHeight = if (footerHeightPx > 0) {
+            footerHeightPx
+    } else {
+        with(density) {
+            navigationBar.toPx()
+        }
+    }.toInt()
+
+    var startPosition by remember { mutableStateOf(Float.MAX_VALUE) }
+    val targetPosition = 0f
+
+    var offsetY by remember { mutableStateOf(Animatable(startPosition)) }
+
+    LaunchedEffect(startPosition) {
+        if (startPosition != Float.MAX_VALUE){
+            offsetY.snapTo(startPosition)
+            offsetY.animateTo(targetPosition, tween(350))
+        }
+    }
+
+    LaunchedEffect(helper.requestHide) {
+        if (helper.requestHide) {
+            offsetY.animateTo(startPosition, tween(200))
+            helper.removeSnackBarNow()
+            snackBarData.onDismiss?.invoke()
+        }
+    }
+
+    LaunchedEffect(snackBarData.type.duration) {
+        val duration = snackBarData.type.duration
+        if (duration != null) {
+            delay(duration.milliseconds)
+            helper.hideSnackBar()
+        }
+    }
+
+    DisposableEffect(Unit) {
+        onDispose { snackBarData.onDismiss?.invoke() }
+    }
+
+    Box(
+        modifier = Modifier
+            .offset { IntOffset(0, offsetY.value.toInt() - footerHeight) }
+            .onGloballyPositioned {
+                if (startPosition != it.size.height.toFloat()) {
+                    startPosition = it.size.height.toFloat()
+                    offsetY = Animatable(startPosition)
+                }
+            }
+            .fillMaxWidth()
+    ) {
+        when (val type = snackBarData.type) {
+            is SnackBar.Custom -> type.content()
+            is SnackBar.Toast -> {}
+        }
+    }
+}
+
+
+
+
+

package/compose/src/commonMain/kotlin/vn/momo/kits/application/useHeaderSearchAnimation.kt

@@ -0,0 +1,69 @@
+package vn.momo.kits.application
+
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.platform.getScreenDimensions
+
+data class HeaderAnimations(
+    val opacity: Float,
+    val backgroundSearch: Color,
+    val translateX: Float,
+    val width: Float,
+    val translateY: Float
+)
+
+private const val SCREEN_PADDING = 12
+private const val BACK_WIDTH = 28
+
+@Deprecated("Use vn.momo.kits.navigation.component.Header instead", ReplaceWith("vn.momo.kits.navigation.component.Header"))
+@Composable
+internal fun useHeaderSearchAnimation(
+    opacityAni: Float,
+    scrollState: Int,
+    headerRightWidth: Dp,
+    isBack: Boolean
+): HeaderAnimations {
+    val screenWidth = getScreenDimensions().width
+    val leftPosition = if (isBack) (BACK_WIDTH + 20).dp else 12.dp
+    val searchWidth = screenWidth - (SCREEN_PADDING * 2)
+
+    val backgroundSearch by animateColorAsState(
+        targetValue = animateColor(
+            Colors.black_01,
+            AppTheme.current.colors.background.default,
+            opacityAni
+        ),
+    )
+
+    val animatedTranslateX by animateFloatAsState(
+        targetValue = (scrollState / HEADER_HEIGHT * 1f).coerceIn(
+            0f,
+            1f
+        ) * (leftPosition.value - 12) + 12,
+    )
+
+    val animatedWidth by animateFloatAsState(
+        targetValue = (scrollState / HEADER_HEIGHT * 1f).coerceIn(
+            0f,
+            1f
+        ) * ((searchWidth - leftPosition.value - headerRightWidth.value + 12) - searchWidth) + searchWidth,
+    )
+
+    val animatedTranslateY by animateFloatAsState(
+        targetValue = (1 - (scrollState / HEADER_HEIGHT * 1f).coerceIn(0f, 1f)) * HEADER_HEIGHT
+    )
+    return HeaderAnimations(
+        opacity = opacityAni,
+        backgroundSearch = backgroundSearch,
+        translateX = animatedTranslateX,
+        width = animatedWidth,
+        translateY = animatedTranslateY
+    )
+}

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

@@ -0,0 +1,157 @@
+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.fillMaxSize
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.setAutomationId
+
+private const val LOGO_MOMO_URL =
+    "https://static.momocdn.net/app/img/kits/logo_momo_circle.png"
+private const val ICON_SUPPORT_DEFAULT_URL =
+    "https://static.momocdn.net/app/img/kits/_indicator.png"
+
+enum class AvatarSize(val sizeDp: Int, val iconSizeDp: Int) {
+    SIZE_24(24, 16),
+    SIZE_32(32, 16),
+    SIZE_40(40, 24),
+    SIZE_48(48, 32),
+    SIZE_56(56, 32),
+    SIZE_72(72, 40),
+}
+
+@Composable
+fun Avatar(
+    modifier: Modifier = Modifier,
+    size: AvatarSize = AvatarSize.SIZE_32,
+    rounded: Boolean = true,
+    name: String? = null,
+    image: String? = null,
+    showIconMomo: Boolean = false,
+    showIconSupport: Boolean = false,
+    iconSupport: String = ICON_SUPPORT_DEFAULT_URL,
+    accessibilityLabel: String? = null,
+) {
+    val theme = AppTheme.current
+
+    val cornerRadius = remember(rounded, size) {
+        if (rounded) (size.sizeDp / 2).dp else Spacing.XS
+    }
+    val shape = remember(cornerRadius) { RoundedCornerShape(cornerRadius) }
+
+    val badgeSizeDp = remember(size) { (size.iconSizeDp / 2).dp }
+    val badgeShape = remember(size) {
+        RoundedCornerShape((size.iconSizeDp / 4).dp)
+    }
+
+    val shouldShowIconTop = showIconMomo && rounded
+    val shouldShowIconBottom = showIconSupport && rounded
+
+    val initials = remember(name) {
+        name?.let { avatarInitials(it) }
+    }
+
+    val automationId = remember(accessibilityLabel, name) {
+        accessibilityLabel ?: "Avatar${if (name != null) "/$name" else ""}"
+    }
+
+    Box(
+        modifier = modifier
+            .size(size.sizeDp.dp)
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) }
+            .setAutomationId(automationId)
+            .semantics { contentDescription = automationId },
+    ) {
+        // Inner box with clip — holds avatar content
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .clip(shape)
+                .background(color = Colors.pink_09)
+                .border(width = 1.dp, color = theme.colors.border.default, shape = shape),
+            contentAlignment = Alignment.Center,
+        ) {
+            when {
+                image != null -> {
+                    Image(
+                        source = image,
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .clip(shape)
+                            .semantics { contentDescription = "$automationId|img" },
+                    )
+                }
+
+                name != null -> {
+                    Text(
+                        text = initials ?: "",
+                        style = Typography.descriptionXsRegular,
+                        color = Colors.pink_03,
+                        modifier = Modifier
+                            .semantics { contentDescription = "$automationId|text" },
+                    )
+                }
+
+                else -> {
+                    Icon(
+                        source = "basic_person",
+                        size = size.iconSizeDp.dp,
+                        color = Colors.pink_03,
+                        modifier = Modifier
+                            .semantics { contentDescription = "$automationId|icon" },
+                    )
+                }
+            }
+        }
+
+        // Badge icons — outside clip so they are not cut by border
+        if (shouldShowIconTop) {
+            Image(
+                source = LOGO_MOMO_URL,
+                modifier = Modifier
+                    .zIndex(1f)
+                    .align(Alignment.TopEnd)
+                    .offset(x = 1.dp, y = (-1).dp)
+                    .size(badgeSizeDp)
+                    .clip(badgeShape)
+                    .semantics { contentDescription = "$automationId|top-icon" },
+            )
+        }
+
+        if (shouldShowIconBottom) {
+            Image(
+                source = iconSupport,
+                modifier = Modifier
+                    .zIndex(1f)
+                    .align(Alignment.BottomEnd)
+                    .offset(x = 1.dp, y = 1.dp)
+                    .size(badgeSizeDp)
+                    .clip(badgeShape)
+                    .semantics { contentDescription = "$automationId|bottom-icon" },
+            )
+        }
+    }
+}
+
+private fun avatarInitials(name: String): String {
+    val words = name.trim().split(" ").filter { it.isNotEmpty() }
+    return words.takeLast(2).joinToString("") { it.first().uppercaseChar().toString() }
+}

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

@@ -0,0 +1,82 @@
+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.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
+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.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.*
+import vn.momo.kits.modifier.conditional
+
+
+@Composable
+fun Badge(label: String = "Label", backgroundColor: Color? = null, modifier: Modifier = Modifier) {
+    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)
+    )
+
+    fun isNumber(label: String): Boolean {
+        val numberRegex = "^\\d+$".toRegex()
+        return numberRegex.matches(label)
+    }
+
+    fun formatTitle(label: String): String {
+        if (isNumber(label) && label.toInt() > 99) {
+            return "99+"
+        }
+        return label
+    }
+
+    var badgeColor =
+        if (isNumber(label)) {
+            AppTheme.current.colors.error.primary
+        } else {
+            AppTheme.current.colors.warning.primary
+        }
+
+    if (backgroundColor != null && primaryColors.contains(backgroundColor)) {
+        badgeColor = backgroundColor
+    }
+    val scaleSize = scaleSize(16f)
+
+    Box(
+        modifier = modifier
+            .height(scaleSize.dp)
+            .widthIn(min = scaleSize.dp)
+            .background(color = badgeColor, shape = RoundedCornerShape(Radius.M))
+            .border(width = 1.dp, shape = RoundedCornerShape(Radius.M), color = Colors.black_01)
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+            .padding(horizontal = Spacing.XS),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = formatTitle(label),
+            color = Colors.black_01,
+            style = Typography.actionXxsBold,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis
+        )
+    }
+}