@momo-kits/native-kits 0.164.1-beta.18-debug → 0.164.1-beta.18

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

@@ -1,378 +0,0 @@
-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/WidgetContainer.kt

@@ -1,56 +0,0 @@
-package vn.momo.kits.application
-
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.remember
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Theme
-import vn.momo.kits.navigation.LocalMaxApi
-import vn.momo.kits.platform.ProvideOsFontScale
-import vn.momo.maxapi.IMaxApi
-
-
-@Composable
-fun WidgetContainer(
-    theme: Theme? = null,
-    miniAppContext: MiniAppContext? = null,
-    maxApi: IMaxApi? = null,
-    localize: Localize? = null,
-    content: @Composable () -> Unit,
-) {
-    val parentContext = LocalContext.current
-    val mergedContext = remember(parentContext, miniAppContext) {
-        MiniAppContext.merge(parentContext, miniAppContext)
-    }
-    val resolvedTheme = theme ?: AppTheme.current
-    val resolvedLocalize = localize ?: LocalLocalize.current
-    val resolvedMaxApi = maxApi ?: LocalMaxApi.current
-
-    LaunchedEffect(resolvedMaxApi, localize) {
-        val api = resolvedMaxApi ?: return@LaunchedEffect
-        val target = localize ?: return@LaunchedEffect
-        runCatching {
-            api.getLanguage(callback = { data ->
-                if (parseLanguage(data) == Localize.EN) target.changeLanguage(Localize.EN)
-            })
-        }
-    }
-
-    ProvideOsFontScale {
-        CompositionLocalProvider(
-            AppTheme provides resolvedTheme,
-            LocalContext provides mergedContext,
-            LocalLocalize provides resolvedLocalize,
-            LocalMaxApi provides resolvedMaxApi,
-        ) {
-            content()
-        }
-    }
-}
-
-private fun parseLanguage(raw: Map<String, Any?>?): String? {
-    val code = (raw?.get("response") as? String)?.trim()?.lowercase()
-    if (code.isNullOrEmpty()) return null
-    return if (code.startsWith(Localize.EN)) Localize.EN else Localize.VI
-}

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

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

@@ -1,157 +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.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() }
-}