@momo-kits/native-kits 0.167.1-duo.1-debug → 0.167.1-duo.2-debug

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

@@ -33,12 +33,12 @@ import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Icon
 import vn.momo.kits.components.Image
 import vn.momo.kits.components.InputSearchProps
-import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.components.PopupNotifyProps
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Spacing
+import vn.momo.kits.layout.getScreenLayout
 import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
@@ -47,6 +47,7 @@ import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.LocalOptions
 import vn.momo.kits.navigation.LocalScrollState
 import vn.momo.kits.navigation.getInputSearchType
+import vn.momo.kits.platform.getScreenDimensions
 import vn.momo.kits.utils.horizontalSafeAreaPadding
 
 @InternalApi
@@ -54,27 +55,44 @@ const val HEADER_HEIGHT = 52
 internal enum class InputSearchType { None, Header, Animated }
 enum class TitlePosition { LEFT, CENTER }
 
+private val HEADER_ACTIONS_WIDTH = 172.dp
+
 @Suppress("FrequentlyChangingValue")
 @Composable
-internal fun Header(onBackHandler: (() -> Unit)? = null) {
+internal fun headerOpacity(): Float {
     val options = LocalOptions.current
-    val navigator = LocalNavigator.current
     val scrollState = LocalScrollState.current
-    val headerRightWidthPx = LocalHeaderRightWidthPx.current
-    val inputSearchType = getInputSearchType(options)
-
     val opacityHeight = when (val header = options.headerType) {
         is HeaderType.Animated -> with(LocalDensity.current) { header.layoutOffSet.roundToPx() }
         else -> HEADER_HEIGHT
     }
     val opacity by animateFloatAsState(
-        targetValue = if (options.headerType is HeaderType.Transparent) {
-            0f
-        } else {
-            (scrollState.value / opacityHeight.toFloat())
-                .coerceIn(0f, 1f)
+        targetValue = when {
+            options.headerType is HeaderType.Transparent -> 0f
+            opacityHeight <= 0 -> if (scrollState.value > 0) 1f else 0f
+            else -> (scrollState.value / opacityHeight.toFloat()).coerceIn(0f, 1f)
         }
     )
+    return opacity
+}
+
+// Back button and toolkit share the bar with the title unless the iPhone Duo side bar holds them.
+@Composable
+internal fun headerTitleMaxWidth(): Dp {
+    val layout = getScreenLayout()
+    if (layout.sideBar != null) return layout.contentWidth - Spacing.M * 2
+    return getScreenDimensions().width.dp - HEADER_ACTIONS_WIDTH
+}
+
+@Composable
+internal fun Header(onBackHandler: (() -> Unit)? = null) {
+    val options = LocalOptions.current
+    val navigator = LocalNavigator.current
+    val headerRightWidthPx = LocalHeaderRightWidthPx.current
+    val inputSearchType = getInputSearchType(options)
+    val layout = getScreenLayout()
+    val useSideBar = layout.sideBar != null
+    val opacity = headerOpacity()
 
     val headerColor = getHeaderColor(options.headerType, opacity, options.tintColor, Colors.black_17)
 
@@ -97,7 +115,7 @@ internal fun Header(onBackHandler: (() -> Unit)? = null) {
         .takeUnless { options.headerType is HeaderType.Transparent }
 
     Box(
-        Modifier.height(AppStatusBar.current + HEADER_HEIGHT.dp)
+        Modifier.height(layout.headerHeight)
             .fillMaxWidth()
             .conditional(headerImage.isNullOrEmpty()) {
                 background(background.copy(alpha = animatedAlpha))
@@ -126,14 +144,14 @@ internal fun Header(onBackHandler: (() -> Unit)? = null) {
             }
         }
         Row(
-            modifier = Modifier.height(HEADER_HEIGHT.dp)
+            modifier = Modifier.height(layout.headerBarHeight)
                 .fillMaxWidth()
                 .horizontalSafeAreaPadding()
                 .padding(horizontal = Spacing.M),
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.SpaceBetween
         ) {
-            if(!options.hiddenBack) {
+            if (!options.hiddenBack && !useSideBar) {
                 BackButton(
                     borderColor = headerColor.borderColor,
                     backgroundButton = headerColor.backgroundButton,
@@ -158,13 +176,16 @@ internal fun Header(onBackHandler: (() -> Unit)? = null) {
             Box(Modifier.onGloballyPositioned {
                 if(headerRightWidthPx.intValue != it.size.width) headerRightWidthPx.intValue = it.size.width
             }){
-                HeaderRight(options.headerRight, options.tintColor, headerColor)
+                if (!(useSideBar && options.headerRight is HeaderRight.Toolkit)) {
+                    HeaderRight(options.headerRight, options.tintColor, headerColor)
+                }
             }
         }
         if (centerTitle) {
             Box(
-                modifier = Modifier.height(HEADER_HEIGHT.dp)
+                modifier = Modifier.height(layout.headerBarHeight)
                     .fillMaxWidth()
+                    .horizontalSafeAreaPadding()
                     .padding(horizontal = Spacing.M),
                 contentAlignment = Alignment.Center
             ) {

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

@@ -15,8 +15,8 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Image
-import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
+import vn.momo.kits.layout.getScreenLayout
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.navigation.LocalOptions
 import vn.momo.kits.navigation.LocalScrollState
@@ -38,7 +38,7 @@ internal fun HeaderBackground() {
     val scrollState = LocalScrollState.current
     val backgroundColor = options.backgroundColor ?: AppTheme.current.colors.background.default
 
-    val minHeight = AppStatusBar.current + HEADER_HEIGHT.dp
+    val minHeight = getScreenLayout().headerHeight
     val maxHeight = HEADER_BACKGROUND_HEIGHT
     val opacity by animateFloatAsState(
         targetValue = (1 - (scrollState.value * 1f / HEADER_HEIGHT * 1f)).coerceIn(0f, 1f),

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

@@ -23,7 +23,6 @@ import vn.momo.kits.components.Text
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.activeOpacityClickable
-import vn.momo.kits.platform.getScreenDimensions
 
 @Composable
 internal fun HeaderJourney(
@@ -33,7 +32,7 @@ internal fun HeaderJourney(
     if (data !is HeaderTitle.Journey) return
     if (data.isLoading) return TitleJourneyShimmer()
 
-    val maxWidth = getScreenDimensions().width.dp - 172.dp
+    val maxWidth = headerTitleMaxWidth()
     val tint = parseHeaderTint(data.tintColor) ?: tintIconColor
     val iconTint = parseHeaderTint(data.iconColor) ?: tint
 

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

@@ -22,7 +22,6 @@ import vn.momo.kits.components.Text
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.activeOpacityClickable
-import vn.momo.kits.platform.getScreenDimensions
 
 @Composable
 internal fun HeaderLocation(
@@ -32,7 +31,7 @@ internal fun HeaderLocation(
     if (data !is HeaderTitle.Location) return
     if (data.isLoading) return TitleLocationShimmer()
 
-    val maxWidth = getScreenDimensions().width.dp - 172.dp
+    val maxWidth = headerTitleMaxWidth()
     val tint = parseHeaderTint(data.tintColor) ?: tintIconColor
 
     Column(

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

@@ -6,6 +6,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 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.height
 import androidx.compose.foundation.layout.offset
@@ -63,7 +64,8 @@ fun HeaderRight(
 internal fun Toolkit(
     headerRight: HeaderRight.Toolkit,
     tintColor: Color? = null,
-    headerColor: HeaderColor
+    headerColor: HeaderColor,
+    vertical: Boolean = false,
 ) {
     val api = LocalMaxApi.current
     val context = LocalContext.current
@@ -103,6 +105,23 @@ internal fun Toolkit(
         }
     }
 
+    fun onPressHelpCenter() {
+        if (context == null) return
+        api?.showHelpCenter(
+            mapOf(
+                "appId" to context.appId,
+                "code" to context.appCode,
+                "name" to context.appName,
+                "icon" to context.appIcon,
+                "description" to context.description
+            )
+        ) {}
+    }
+
+    fun onPressHome() {
+        api?.dismissAll {  }
+    }
+
     val navButtonConfig = getNavigationButtonConfig(
         headerRight,
         ::onPressShortcut,
@@ -127,6 +146,37 @@ internal fun Toolkit(
         }
     }
 
+    if (vertical) {
+        Column(verticalArrangement = Arrangement.spacedBy(Spacing.M)) {
+            if (isShowShortcut) {
+                SideBarButton(
+                    icon = icon,
+                    headerColor = headerColor,
+                    enabled = !isLoading,
+                    showBadge = showBadge,
+                    onClick = navButtonConfig.onPress,
+                )
+            }
+            SideBarGroup(headerColor = headerColor, itemCount = if (context != null) 2 else 1) {
+                if (context != null) {
+                    SideBarGroupItem(
+                        icon = "help_center",
+                        headerColor = headerColor,
+                        automationId = "btn_navigation_help_center",
+                        onClick = ::onPressHelpCenter,
+                    )
+                }
+                SideBarGroupItem(
+                    icon = "16_basic_home",
+                    headerColor = headerColor,
+                    automationId = "btn_navigation_close",
+                    onClick = ::onPressHome,
+                )
+            }
+        }
+        return
+    }
+
     Row(
         verticalAlignment = Alignment.CenterVertically
     ) {
@@ -155,17 +205,7 @@ internal fun Toolkit(
                     source = "help_center",
                     size = 20.dp,
                     color = headerColor.tintIconColor,
-                    modifier = Modifier.padding(4.dp).activeOpacityClickable {
-                        api?.showHelpCenter(
-                            mapOf(
-                                "appId" to context.appId,
-                                "code" to context.appCode,
-                                "name" to context.appName,
-                                "icon" to context.appIcon,
-                                "description" to context.description
-                            )
-                        ) {}
-                    }
+                    modifier = Modifier.padding(4.dp).activeOpacityClickable(onClick = ::onPressHelpCenter)
                 )
                 Box(
                     modifier = Modifier
@@ -178,9 +218,7 @@ internal fun Toolkit(
                 source = "16_basic_home",
                 size = 20.dp,
                 color = headerColor.tintIconColor,
-                modifier = Modifier.padding(4.dp).activeOpacityClickable {
-                    api?.dismissAll {  }
-                }
+                modifier = Modifier.padding(4.dp).activeOpacityClickable(onClick = ::onPressHome)
             )
         }
     }

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

@@ -32,7 +32,6 @@ import vn.momo.kits.const.Typography
 import vn.momo.kits.const.getFontFamily
 import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.navigation.component.HeaderTitle.User
-import vn.momo.kits.platform.getScreenDimensions
 
 @Composable
 internal fun HeaderUser(
@@ -44,7 +43,7 @@ internal fun HeaderUser(
         return TitleUserShimmer()
     }
 
-    val maxWidth = getScreenDimensions().width.dp - 172.dp
+    val maxWidth = headerTitleMaxWidth()
 
     Row(
         modifier = Modifier

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

@@ -0,0 +1,169 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.absolutePadding
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+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.ui.AbsoluteAlignment
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.layout.layout
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.constrainHeight
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.BadgeDot
+import vn.momo.kits.components.DotSize
+import vn.momo.kits.components.Icon
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.layout.DuoMetrics
+import vn.momo.kits.layout.SideBarEdge
+import vn.momo.kits.layout.getScreenLayout
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.setAutomationId
+import vn.momo.kits.navigation.LocalNavigator
+import vn.momo.kits.navigation.LocalOptions
+
+private val SIDE_BAR_ICON_SIZE = 24.dp
+
+// iPhone Duo: back and toolkit leave the bar for a column in the side safe area, as the system bars do.
+// bottomInset is what footer / tab bar / home indicator take from the bottom; the column stays above it.
+@Composable
+internal fun BoxScope.HeaderSideBar(bottomInset: Dp, modifier: Modifier = Modifier) {
+    val options = LocalOptions.current
+    val navigator = LocalNavigator.current
+    val sideBar = getScreenLayout().sideBar ?: return
+    val toolkit = options.headerRight as? HeaderRight.Toolkit
+    if (options.headerType == HeaderType.None || (options.hiddenBack && toolkit == null)) return
+
+    val headerColor = getHeaderColor(options.headerType, headerOpacity(), options.tintColor, Colors.black_17)
+    val isRight = sideBar.edge == SideBarEdge.RIGHT
+
+    Column(
+        modifier = modifier
+            .align(if (isRight) AbsoluteAlignment.TopRight else AbsoluteAlignment.TopLeft)
+            .width(sideBar.width)
+            .layout { measurable, constraints ->
+                val placeable = measurable.measure(constraints.copy(minHeight = 0))
+                val maxY = constraints.maxHeight - (bottomInset + Spacing.XL).roundToPx() - placeable.height
+                val y = minOf(sideBar.top.roundToPx(), maxY).coerceAtLeast(0)
+                layout(placeable.width, constraints.constrainHeight(y + placeable.height)) {
+                    placeable.place(0, y)
+                }
+            }
+            .absolutePadding(left = if (isRight) Spacing.M else 0.dp, right = if (isRight) 0.dp else Spacing.M),
+        horizontalAlignment = if (isRight) AbsoluteAlignment.Left else AbsoluteAlignment.Right,
+        verticalArrangement = Arrangement.spacedBy(Spacing.M),
+    ) {
+        if (options.hiddenBack) {
+            // keep the slot so the toolkit does not jump between root and pushed screens
+            Spacer(Modifier.size(DuoMetrics.controlSize))
+        } else {
+            SideBarButton(
+                icon = "arrow-back",
+                headerColor = headerColor,
+                automationId = "btn_navigation_back",
+                onClick = { navigator.onBackSafe { } },
+            )
+        }
+        if (toolkit != null) {
+            Toolkit(headerRight = toolkit, tintColor = options.tintColor, headerColor = headerColor, vertical = true)
+        }
+    }
+}
+
+@Composable
+internal fun SideBarButton(
+    icon: String,
+    headerColor: HeaderColor,
+    onClick: () -> Unit,
+    enabled: Boolean = true,
+    showBadge: Boolean = false,
+    automationId: String? = null,
+) {
+    Box {
+        Box(
+            modifier = Modifier
+                .size(DuoMetrics.controlSize)
+                .sideBarGlass(headerColor, CircleShape)
+                .activeOpacityClickable(enabled = enabled, onClick = onClick)
+                .conditional(automationId != null) { setAutomationId(automationId.orEmpty()) },
+            contentAlignment = Alignment.Center,
+        ) {
+            Icon(source = icon, size = SIDE_BAR_ICON_SIZE, color = headerColor.tintIconColor)
+        }
+        if (showBadge) {
+            BadgeDot(
+                size = DotSize.Small,
+                modifier = Modifier.align(Alignment.TopEnd).offset(x = -Spacing.XXS, y = Spacing.XXS),
+            )
+        }
+    }
+}
+
+// Capsule grouping related controls, one item per 50pt.
+@Composable
+internal fun SideBarGroup(
+    headerColor: HeaderColor,
+    itemCount: Int,
+    content: @Composable ColumnScope.() -> Unit,
+) {
+    val height = if (itemCount > 1) DuoMetrics.itemPitch * itemCount else DuoMetrics.controlSize
+    Column(
+        modifier = Modifier
+            .width(DuoMetrics.controlSize)
+            .height(height)
+            .sideBarGlass(headerColor, RoundedCornerShape(Radius.XL)),
+        content = content,
+    )
+}
+
+@Composable
+internal fun ColumnScope.SideBarGroupItem(
+    icon: String,
+    headerColor: HeaderColor,
+    automationId: String,
+    onClick: () -> Unit,
+) {
+    Box(
+        modifier = Modifier
+            .weight(1f)
+            .fillMaxWidth()
+            .activeOpacityClickable(onClick = onClick)
+            .setAutomationId(automationId),
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(source = icon, size = SIDE_BAR_ICON_SIZE, color = headerColor.tintIconColor)
+    }
+}
+
+// Dark glass under light icons (banner headers), light glass otherwise. The light one is opaque:
+// Compose has no backdrop blur and a translucent fill shows its own shadow through (RN uses 85% white).
+private fun Modifier.sideBarGlass(headerColor: HeaderColor, shape: Shape): Modifier =
+    if (headerColor.tintIconColor == Colors.black_01) {
+        clip(shape)
+            .background(Colors.black_20.copy(alpha = 0.5f))
+            .border(0.5.dp, Colors.black_01.copy(alpha = 0.2f), shape)
+    } else {
+        shadow(3.dp, shape)
+            .background(Colors.black_01)
+            .border(0.5.dp, Colors.black_20.copy(alpha = 0.08f), shape)
+    }

package/compose/src/commonMain/kotlin/vn/momo/kits/utils/Utils.kt

@@ -95,9 +95,12 @@ fun getAppStatusBarHeight(): Dp {
     }
 }
 
+internal val horizontalSafeAreaInsets: WindowInsets
+    @Composable get() = WindowInsets.systemBars.union(WindowInsets.displayCutout).only(WindowInsetsSides.Horizontal)
+
 // Left/right safe area like SwiftUI (landscape camera/notch); consumed, so nested StackScreens don't pad twice.
 internal fun Modifier.horizontalSafeAreaPadding(): Modifier = composed {
-    windowInsetsPadding(WindowInsets.systemBars.union(WindowInsets.displayCutout).only(WindowInsetsSides.Horizontal))
+    windowInsetsPadding(horizontalSafeAreaInsets)
 }
 
 @Composable

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.167.1-duo.1
+version=0.167.1-beta.4
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.167.1-duo.1'
+  s.version          = '0.167.1-beta.4'
   s.summary          = 'MoMoUIKits for iOS'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/ios-demo/MoMoUIKitsDemo.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKitsDemo'
-  s.version          = '0.167.1-duo.1'
+  s.version          = '0.167.1-beta.4'
   s.summary          = 'Demo browser for MoMoUIKits SwiftUI components'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.167.1-duo.1-debug",
+  "version": "0.167.1-duo.2-debug",
   "private": false,
   "dependeNavigationncies": {},
   "devDependencies": {},