@momo-kits/native-kits 0.152.4-beta.6 → 0.152.4-maxapi

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

@@ -0,0 +1,214 @@
+package vn.momo.kits.application
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.unit.Dp
+import vn.momo.kits.components.TrustBannerData
+import vn.momo.kits.const.AppStatusBar
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Theme
+import vn.momo.kits.const.ThemeAssets
+import vn.momo.kits.const.defaultTheme
+import vn.momo.kits.platform.getStatusBarHeight
+
+@Deprecated("Use IMaxApi instead", ReplaceWith("IMaxApi"))
+interface ComposeApi {
+    fun request(funcName: String, params: Any?): String
+    fun request(funcName: String, params: Any?, onResponse: ((String) -> Unit)?): String
+    fun requestCallback(funcName: String, params: Any?, onResponse: ((String) -> Unit)?)
+    fun removeCallback(id: String)
+}
+
+class Navigator {
+    fun push(content: @Composable () -> Unit) {
+        //implement
+    }
+
+    fun present(content: @Composable () -> Unit) {
+        //implement
+    }
+
+    fun reset(content: @Composable () -> Unit) {
+        //implement
+    }
+
+    fun pop() {
+        //implement
+    }
+
+    fun replace(content: @Composable () -> Unit) {
+        //implement
+    }
+
+    fun popToTop() {
+        //implement
+    }
+
+    fun showModal(
+        onClose: () -> Unit = {},
+        canBackgroundClose: Boolean = true,
+        content: @Composable () -> Unit,
+    ) {
+        //implement
+    }
+
+    fun showBottomSheet(content: @Composable () -> Unit) {
+        //implement
+    }
+}
+
+@Immutable
+data class MiniAppContext(
+    val appIcon: String = "",
+    val appName: Any? = null,
+    val appId: String = "",
+    val appCode: String = "",
+    val description: Any? = null,
+    val support: Map<String, Any?> = emptyMap(),
+    val toolkitConfig: Map<String, Any?> = emptyMap(),
+    val providerId: String = "",
+    val permissions: List<Map<String, Any>>? = emptyList()
+) {
+    companion object {
+        private const val KEY_ICON        = "icon"
+        private const val KEY_NAME        = "name"
+        private const val KEY_APP_ID      = "appId"
+        private const val KEY_CODE        = "code"
+        private const val KEY_DESCRIPTION = "description"
+        private const val KEY_SUPPORT     = "support"
+        private const val KEY_TOOLKIT_CFG = "toolkitConfig"
+        private const val KEY_PERMISSIONS = "permissions"
+        private const val KEY_ORIGIN_APP  = "originAppId"
+
+        fun toMap(context: MiniAppContext?): Map<String, Any?> = mapOf(
+            "icon"          to (context?.appIcon ?: ""),
+            "name"          to context?.appName,
+            "appId"         to (context?.appId ?: ""),
+            "code"          to (context?.appCode ?: ""),
+            "description"   to (context?.description ?: ""),
+            "support"       to (context?.support ?: emptyMap<String, Any?>()),
+            "toolkitConfig" to (context?.toolkitConfig ?: emptyMap<String, Any?>()),
+            "providerId"    to (context?.providerId ?: ""),
+            "permissions"   to (context?.permissions ?: emptyList<Map<String, Any>>())
+        )
+
+        fun fromMap(data: Map<String, Any?>?): MiniAppContext = MiniAppContext(
+            appIcon       = data.string(KEY_ICON) ?: "",
+            appName       = data?.get(KEY_NAME),
+            appId         = data.string(KEY_APP_ID) ?: "",
+            appCode       = data.string(KEY_CODE) ?: "",
+            description   = data?.get(KEY_DESCRIPTION),
+            support       = data.mapStringAny(KEY_SUPPORT),
+            toolkitConfig = data.mapStringAny(KEY_TOOLKIT_CFG),
+            providerId    = computeProviderId(
+                originAppId = data.string(KEY_ORIGIN_APP),
+                appId       = data.string(KEY_APP_ID)
+            ),
+            permissions   = data.listOfMapStringAny(KEY_PERMISSIONS)
+        )
+
+        private fun computeProviderId(originAppId: String?, appId: String?): String {
+            val id = when {
+                !originAppId.isNullOrBlank() -> originAppId
+                !appId.isNullOrBlank()       -> appId
+                else                         -> null
+            } ?: return "unknown"
+
+            val parts = id.split('.')
+            return parts.getOrNull(1) ?: "unknown"
+        }
+    }
+}
+
+private fun Map<String, Any?>?.string(key: String): String? =
+    (this?.get(key) as? String)
+
+@Suppress("UNCHECKED_CAST")
+private fun Map<String, Any?>?.mapStringAny(key: String): Map<String, Any?> =
+    (this?.get(key) as? Map<String, Any?>) ?: emptyMap()
+
+@Suppress("UNCHECKED_CAST")
+private fun Map<String, Any?>?.listOfMapStringAny(key: String): List<Map<String, Any>> =
+    (this?.get(key) as? List<Map<String, Any>>) ?: emptyList()
+
+@Deprecated("Use LocalApi instead", ReplaceWith("LocalApi"))
+val PlatformApi = staticCompositionLocalOf<Any?> { null }
+
+@Deprecated("Use LocalNavigator instead", ReplaceWith("LocalNavigator"))
+val AppNavigator = staticCompositionLocalOf<Navigator?> {
+    null
+}
+
+val ApplicationContext = staticCompositionLocalOf<MiniAppContext?> {
+    null
+}
+
+val AppConfig = staticCompositionLocalOf<KitConfig?> {
+    null
+}
+
+val AppLanguage = staticCompositionLocalOf<String?> {
+    null
+}
+
+@Immutable
+data class KitConfig(
+    val trustBanner: TrustBannerData? = null,
+    val headerBar: String? = null,
+    val headerGradient: String? = null,
+)
+
+internal var DesignSystemWhiteList: Boolean? = null
+
+@Deprecated("Use NavigationContainer instead", ReplaceWith("NavigationContainer"))
+@Composable
+fun ApplicationContainer(
+    theme: Theme = defaultTheme,
+    composeApi: ComposeApi? = null,
+    statusBarHeight: Dp? = AppStatusBar.current,
+    applicationContext: MiniAppContext? = null,
+    config: KitConfig? = null,
+    language: String? = null,
+    isWhiteList: Boolean = false,
+    content: @Composable () -> Unit,
+) {
+    var appTheme by remember { mutableStateOf(theme) }
+
+    LaunchedEffect(Unit) {
+        DesignSystemWhiteList = isWhiteList
+        try {
+            val headerBar = config?.headerBar
+            if (headerBar != null && appTheme.assets.headerBackground == null) {
+                appTheme = appTheme.copy(
+                    assets = ThemeAssets(
+                        headerBackground = headerBar
+                    )
+                )
+            }
+        } catch (e: Exception) {
+            print("@@ == NavigationContainer get config error $e")
+        }
+    }
+
+    val appStatusBarHeight = statusBarHeight ?: getStatusBarHeight()
+
+    CompositionLocalProvider(
+        AppTheme provides appTheme,
+        PlatformApi provides composeApi,
+        AppNavigator provides Navigator(),
+        AppStatusBar provides appStatusBarHeight,
+        ApplicationContext provides applicationContext,
+        AppConfig provides config,
+        AppLanguage provides language,
+    ) {
+        content()
+    }
+
+}

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

@@ -0,0 +1,236 @@
+package vn.momo.kits.application
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.ime
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+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.dp
+import androidx.compose.ui.unit.min
+import androidx.compose.ui.zIndex
+import vn.momo.kits.components.InputSearchProps
+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.shadow
+import vn.momo.kits.platform.getAndroidBuildVersion
+import vn.momo.kits.utils.getAppStatusBarHeight
+
+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 = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
+    val bottomPadding = min(indicator, if (isKeyboardVisible) 0.dp else 21.dp)
+
+    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)
+            }
+        }
+
+    Box(
+        Modifier.fillMaxSize()
+            .background(backgroundColor ?: AppTheme.current.colors.background.default)
+            .conditional(useAvoidKeyboard && getAndroidBuildVersion() > 29) {
+                imePadding()
+            }
+    ) {
+
+        if (animatedHeader === null) {
+            HeaderBackground(
+                headerType = headerType,
+                scrollState = scrollState.value,
+                headerTransparent = headerTransparent
+            )
+        }
+
+        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
+        )
+
+        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 {
+                Footer(footer, bottomPadding)
+            }
+        }
+
+        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,
+            )
+        }
+    }
+}
+
+@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) {
+    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)
+    ) {
+        Box(
+            Modifier.fillMaxWidth()
+                .padding(bottom = bottom)
+                .padding(vertical = Spacing.S, horizontal = Spacing.M)
+        ) {
+            footer?.invoke()
+        }
+    }
+}
+
+
+
+
+
+
+
+

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
+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/Badge.kt

@@ -0,0 +1,77 @@
+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.unit.dp
+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.const.scaleSize
+
+
+@Composable
+fun Badge(label: String = "Label", backgroundColor: 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)
+    )
+
+    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
+    }
+
+    Box(
+        modifier = Modifier
+            .height(scaleSize(16.toFloat()).dp)
+            .widthIn(min = scaleSize(16.toFloat()).dp)
+            .background(color = badgeColor, shape = RoundedCornerShape(Radius.M))
+            .border(width = 1.dp, shape = RoundedCornerShape(Radius.M), color = Colors.black_01)
+            .padding(horizontal = Spacing.XS), contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = formatTitle(label),
+            color = Colors.black_01,
+            style = Typography.actionXxsBold
+        )
+    }
+}

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

@@ -0,0 +1,27 @@
+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.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Radius
+
+enum class DotSize(val size: Int) {
+    Small(10),
+    Large(16)
+}
+
+@Composable
+fun BadgeDot(size: DotSize = DotSize.Large, modifier: Modifier = Modifier) {
+    Box(
+        modifier = modifier
+            .size(size.size.dp)
+            .border(width = 1.dp, color = Colors.black_01, shape = RoundedCornerShape(Radius.S))
+            .background(color = Colors.red_03, shape = RoundedCornerShape(Radius.S))
+    )
+}