@momo-kits/native-kits 0.167.1-duo.20-debug → 0.167.1-duo.21-debug

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.167.1-duo.20-debug"
+        version = "0.167.1-duo.21-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"

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

@@ -20,6 +20,7 @@ import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.Stable
@@ -84,6 +85,7 @@ import vn.momo.kits.modifier.setAutomationId
 import vn.momo.kits.navigation.component.headerFontFamily
 import vn.momo.kits.navigation.component.HEADER_HEIGHT
 import vn.momo.kits.navigation.component.HeaderColor
+import vn.momo.kits.navigation.component.LocalHeaderColor
 import vn.momo.kits.navigation.component.HeaderRight
 import vn.momo.kits.navigation.component.SideBarButton
 import vn.momo.kits.navigation.component.TitlePosition
@@ -438,7 +440,9 @@ private fun LiteScreenLayout(
                         .then(animationOpacityModifier)
                 ) {
                     if (headerRight != null) {
-                        headerRight()
+                        CompositionLocalProvider(LocalHeaderColor provides headerColor) {
+                            headerRight()
+                        }
                     } else {
                         Toolkit(
                             headerRight = toolkit,

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

@@ -18,6 +18,8 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -233,7 +235,9 @@ internal fun Header(onBackHandler: (() -> Unit)? = null) {
                         headerColor = headerColor,
                         layout = ToolkitLayout.SideBarRow,
                     )
-                    else -> HeaderRight(headerRight, options.tintColor, headerColor)
+                    else -> CompositionLocalProvider(LocalHeaderColor provides headerColor) {
+                        HeaderRight(headerRight, options.tintColor, headerColor)
+                    }
                 }
             }
         }
@@ -415,6 +419,10 @@ data class HeaderBackProps(
 
 @InternalApi
 data class HeaderColor(val tintIconColor: Color, val backgroundButton: Color, val borderColor: Color)
+
+// The enclosing header's colors, so a custom header right follows the bar (SwiftUI `\.headerColor`).
+internal val LocalHeaderColor = compositionLocalOf<HeaderColor?> { null }
+
 internal fun getHeaderColor(headerType: HeaderType, opacity: Float, tintColor: Color?, defaultColor: Color): HeaderColor{
     return if(headerType is HeaderType.Animated) {
         if (opacity == 1f || !headerType.isSurface)

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

@@ -256,16 +256,36 @@ internal fun Toolkit(
 
 
 
+// Colors follow the enclosing header, so it fits a `HeaderRight.Custom` next to the toolkit.
+@Composable
+fun NavigationButton(
+    icon: String,
+    onClick: () -> Unit,
+    showBadge: Boolean = false,
+    disabled: Boolean = false,
+    modifier: Modifier = Modifier,
+) {
+    NavigationButton(
+        disabled = disabled,
+        icon = icon,
+        showBadge = showBadge,
+        onClick = onClick,
+        headerColor = LocalHeaderColor.current ?: getHeaderColor(HeaderType.Default(), 1f, null, Colors.black_17),
+        modifier = modifier,
+    )
+}
+
 @Composable
 internal fun NavigationButton(
     disabled: Boolean,
     icon: String,
     showBadge: Boolean? = false,
     onClick: () -> Unit,
-    headerColor: HeaderColor
+    headerColor: HeaderColor,
+    modifier: Modifier = Modifier,
 ) {
     Box(
-        modifier = Modifier
+        modifier = modifier
             .size(28.dp)
             .activeOpacityClickable(enabled = !disabled, onClick = onClick)
     ) {

package/ios/Navigation/Component/HeaderRight.swift

@@ -349,20 +349,39 @@ struct Toolkit: View {
 }
 
 /// Mirrors Compose's `NavigationButton`: the 28pt circular shortcut / more button.
-struct NavigationButton: View {
+public struct NavigationButton: View {
     var disabled: Bool
     var icon: String
     var showBadge: Bool
-    var headerColor: HeaderColor
+    var headerColor: HeaderColor?
     var onClick: () -> Void
 
-    var body: some View {
+    @Environment(\.headerColor) private var barColor
+
+    /// Colors follow the enclosing header, so it fits a custom header right next to the toolkit.
+    public init(icon: String, showBadge: Bool = false, disabled: Bool = false, onClick: @escaping () -> Void) {
+        self.init(disabled: disabled, icon: icon, showBadge: showBadge, headerColor: nil, onClick: onClick)
+    }
+
+    init(disabled: Bool, icon: String, showBadge: Bool, headerColor: HeaderColor?, onClick: @escaping () -> Void) {
+        self.disabled = disabled
+        self.icon = icon
+        self.showBadge = showBadge
+        self.headerColor = headerColor
+        self.onClick = onClick
+    }
+
+    private var colors: HeaderColor {
+        headerColor ?? barColor ?? getHeaderColor(isAnimated: false, isSurface: true, opacity: 1, tintColor: nil)
+    }
+
+    public var body: some View {
         SwiftUI.Button(action: onClick) {
             ZStack {
                 Circle()
-                    .fill(headerColor.backgroundButton)
-                    .overlay(Circle().stroke(headerColor.borderColor, lineWidth: 0.2))
-                Icon(source: icon, size: 20, color: headerColor.tintIconColor)
+                    .fill(colors.backgroundButton)
+                    .overlay(Circle().stroke(colors.borderColor, lineWidth: 0.2))
+                Icon(source: icon, size: 20, color: colors.tintIconColor)
             }
             .frame(width: 28, height: 28)
             .overlay(alignment: .topTrailing) {

package/package.json

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