@momo-kits/native-kits 0.167.1-duo.8 → 0.167.1-duo.9-debug

package/ios/{Application/Navigation/Overplay → Navigation}/BottomSheet.swift

@@ -2,7 +2,7 @@
 //  BottomSheet.swift
 //  MoMoUIKits
 //
-//  SwiftUI mirror of Compose's `BottomSheet` (navigation/BottomSheet.kt).
+//  SwiftUI mirror of Compose's `navigation/BottomSheet.kt`.
 //  A sheet that slides up from the bottom over a dimmed scrim, with a drag
 //  handle, a header (title or custom), a divider and the content body.
 //  Dragging down past a threshold (or tapping the scrim) dismisses it.
@@ -40,6 +40,10 @@ struct BottomSheetView<Content: View>: View {
     let header: BottomSheetHeader
     let isSurface: Bool
     let barrierDismissible: Bool
+    var draggable: Bool = true
+    /// Keeps the content above the home indicator (Compose `AppNavigationBar` padding).
+    var useBottomInset: Bool = true
+    var footer: (() -> AnyView)? = nil
     let content: () -> Content
 
     @EnvironmentObject private var navigator: Navigator
@@ -93,11 +97,10 @@ struct BottomSheetView<Content: View>: View {
     }
 
     /// The keyboard filler is part of the sheet, so capping the sheet shrinks the content by it.
-    private var duoMaxHeight: CGFloat? {
-        guard isDuo else { return nil }
-        return layout.height - max(layout.duoTopInset, Spacing.XL)
+    private var maxHeight: CGFloat {
+        isDuo ? layout.height - max(layout.duoTopInset, Spacing.XL) : screenHeight - 90
     }
-    private var bottomInset: CGFloat { safeAreaBottomInset() }
+    private var bottomInset: CGFloat { useBottomInset ? safeAreaBottomInset() : 0 }
     /// While the keyboard is up, it already covers the home-indicator area, so it
     /// replaces (rather than adds to) the usual bottom-inset filler.
     private var effectiveBottomInset: CGFloat { keyboardHeight > 0 ? keyboardHeight : bottomInset }
@@ -174,7 +177,7 @@ struct BottomSheetView<Content: View>: View {
             .frame(maxWidth: .infinity)
             .frame(height: 72)
             .contentShape(Rectangle())
-            .gesture(dragGesture)
+            .gesture(dragGesture, including: draggable ? .all : .subviews)
 
             Rectangle()
                 .fill(theme.colors.border.default)
@@ -183,14 +186,18 @@ struct BottomSheetView<Content: View>: View {
             content()
                 .padding(.leading, sideInsetLeading)
                 .padding(.trailing, sideInsetTrailing)
-                // a tall sheet on iPhone Duo keeps its header and gives the content what is left
+                // a tall sheet keeps its header (and footer) and gives the content what is left
                 .layoutPriority(-1)
 
-            backgroundColor
+            if let footer {
+                BottomSheetFooter(content: footer)
+            }
+
+            (footer != nil ? theme.colors.background.surface : backgroundColor)
                 .frame(height: effectiveBottomInset)
         }
         .frame(maxWidth: isDuoCentered ? duoCenteredWidth : .infinity)
-        .frame(maxHeight: duoMaxHeight, alignment: .bottom)
+        .modifier(CapHeight(maxHeight: maxHeight))
         .clipped()
         .background(
             GeometryReader { geo in
@@ -284,6 +291,51 @@ struct BottomSheetView<Content: View>: View {
     }
 }
 
+/// Compose's `heightIn(max:)`: caps the sheet but keeps it hugging its content, which
+/// `.frame(maxHeight:)` would not — a flexible frame grows to the cap.
+@available(iOS 16.0, *)
+private struct CapHeight: ViewModifier {
+    let maxHeight: CGFloat
+
+    func body(content: Content) -> some View {
+        CapHeightLayout(maxHeight: maxHeight) { content }
+    }
+}
+
+@available(iOS 16.0, *)
+private struct CapHeightLayout: Layout {
+    let maxHeight: CGFloat
+
+    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
+        let height = min(proposal.height ?? .infinity, maxHeight)
+        return subviews.first?.sizeThatFits(ProposedViewSize(width: proposal.width, height: height)) ?? .zero
+    }
+
+    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
+        subviews.first?.place(at: bounds.origin, proposal: ProposedViewSize(bounds.size))
+    }
+}
+
+/// Mirrors Compose's `BottomSheetFooter`: a surface band with a soft shadow cast on the content.
+private struct BottomSheetFooter: View {
+    let content: () -> AnyView
+
+    @Environment(\.appTheme) private var theme
+
+    var body: some View {
+        content()
+            .frame(maxWidth: .infinity)
+            .padding(.vertical, Spacing.S)
+            .background(theme.colors.background.surface)
+            .overlay(alignment: .top) {
+                LinearGradient(colors: [.clear, Color.black.opacity(0.05)], startPoint: .top, endPoint: .bottom)
+                    .frame(height: 6)
+                    .offset(y: -6)
+                    .allowsHitTesting(false)
+            }
+    }
+}
+
 @available(iOS 16.0, *)
 private func safeAreaBottomInset() -> CGFloat {
     let bottomInset = UIApplication.shared.connectedScenes

package/ios/{Application/Navigation → Navigation}/BottomTab/BottomTab.swift

@@ -2,10 +2,9 @@
 //  BottomTab.swift
 //  MoMoUIKits
 //
-//  SwiftUI mirror of Compose's `BottomTab` (navigation/bottomtab/BottomTab.kt).
-//  Hosts a set of tabbed screens, each wrapped in `StackScreen` chrome built
-//  from that tab's `NavigationOptions`, with a `BottomTabBar` pinned to the
-//  bottom. Switching tabs cross-fades + scales the content (parity with Compose).
+//  SwiftUI mirror of Compose's `navigation/bottomtab/BottomTab.kt`: tabbed screens, each in
+//  `StackScreen` chrome built from its own `Navigation`, over a `BottomTabBar` (or the iPhone Duo
+//  rail / floating bar). Switching tabs cross-fades + scales the content.
 //
 
 import SwiftUI
@@ -17,7 +16,11 @@ public struct BottomTab: View {
     private let compressionBehavior: DuoBarCompressionBehavior
 
     @EnvironmentObject private var navigator: Navigator
+    /// The screen hosting the tabs (Compose's `LocalNavigation` in BottomTab).
+    @OptionalEnvironmentObject private var hostNavigation: Navigation?
     @Environment(\.screenLayout) private var layout
+    @Environment(\.appTheme) private var theme
+    @StateObject private var tabNavigations = TabNavigations()
     @State private var selectedIndex: Int = 0
     @State private var toolbarHeight = DuoBarCompression.defaultToolbarHeight
     @State private var expandedBar: DuoBar?
@@ -101,7 +104,7 @@ public struct BottomTab: View {
                         selectedIndex: selectedIndex,
                         onTabSelected: selectTab
                     )
-                    Colors.black01
+                    theme.colors.background.surface
                         .frame(height: bottomInset + Spacing.S)
                         .ignoresSafeArea(edges: .horizontal)
                 }
@@ -110,44 +113,67 @@ public struct BottomTab: View {
         .frame(maxWidth: .infinity, maxHeight: .infinity)
         .ignoresSafeArea(edges: .bottom)
         .preference(key: IsBottomTabRootKey.self, value: true)
+        .onAppear {
+            hostNavigation?.setOptions {
+                $0.headerType = .none
+                $0.useAvoidKeyboard = false
+            }
+            updateTabBack()
+        }
+        .onChange(of: selectedIndex) { _ in updateTabBack() }
+        .onDisappear {
+            // both live outside this view
+            navigator.tabBackHandler = nil
+            HostBackGestureBridge.shared.shouldUseFloatingArrowBack = false
+        }
     }
 
     private func selectTab(_ index: Int) {
         if index != selectedIndex { selectedIndex = index }
     }
 
-    @ViewBuilder
+    /// Back off the first tab returns to it; the host shows its floating arrow there (RN parity).
+    private func updateTabBack() {
+        let isFirstTab = selectedIndex == 0
+        HostBackGestureBridge.shared.shouldUseFloatingArrowBack = !isFirstTab
+        navigator.tabBackHandler = isFirstTab ? nil : (hostNavigation?.id ?? -1, { selectedIndex = 0 })
+    }
+
     private func tabScreen(for index: Int) -> some View {
         let item = items[index]
-        let options = item.options ?? NavigationOptions()
-        StackScreen(
-            backgroundColor: options.backgroundColor,
-            headerTransparent: options.headerTransparent,
-            fullScreenContent: options.fullScreenContent,
-            tintColor: options.tintColor ?? Colors.black17,
-            isBack: !options.hiddenBack,
-            headerType: options.headerType,
-            useAnimated: options.useAnimated,
-            title: options.title,
-            headerTitle: options.headerTitle,
-            titlePosition: options.titlePosition,
-            // Tab back: non-first tab returns to the first tab, first tab
-            // delegates to the navigator (mirrors Compose's onBackHandler).
-            goBack: options.hiddenBack ? nil : {
-                if index != 0 { selectedIndex = 0 } else { navigator.onBackSafe() }
-            },
-            scrollable: options.scrollable,
-            scrollToTopCallback: options.scrollToTopCallback,
-            useAvoidKeyboard: options.useAvoidKeyboard,
-            keyboardShouldPersistTaps: options.keyboardShouldPersistTaps,
-            footer: options.footer,
-            headerRight: options.resolvedHeaderRight,
-            animatedHeader: options.animatedHeader,
-            layoutOffset: options.layoutOffset,
-            inputSearchProps: options.inputSearchProps,
-            fabProps: options.fabProps,
-            content: { item.screen() }
+        return TabScreenHost(
+            navigation: tabNavigations.navigation(for: index, options: item.options),
+            screen: item.screen,
+            goBack: { navigator.onBackSafe() }
+        )
+    }
+}
+
+/// Keeps each tab's `Navigation`, so options a tab set at runtime survive switching away.
+private final class TabNavigations: ObservableObject {
+    private var navigations: [Int: Navigation] = [:]
+
+    func navigation(for index: Int, options: NavigationOptions?) -> Navigation {
+        if let navigation = navigations[index] { return navigation }
+        let navigation = Navigation(bottomTabIndex: index, options: options)
+        navigations[index] = navigation
+        return navigation
+    }
+}
+
+private struct TabScreenHost: View {
+    @ObservedObject var navigation: Navigation
+    let screen: () -> AnyView
+    let goBack: () -> Void
+
+    var body: some View {
+        OptionsStackScreen(
+            options: navigation.options,
+            screenName: navigation.options.screenName ?? "",
+            goBack: goBack,
+            content: screen
         )
+        .environmentObject(navigation)
     }
 }
 

package/ios/{Application/Navigation → Navigation}/BottomTab/BottomTabBar.swift

@@ -2,7 +2,7 @@
 //  BottomTabBar.swift
 //  MoMoUIKits
 //
-//  SwiftUI mirror of Compose's `BottomTabBar` (navigation/bottomtab/BottomTabBar.kt).
+//  SwiftUI mirror of Compose's `navigation/bottomtab/BottomTabBar.kt`.
 //  Renders the row of tab items, an animated selection indicator, a top shadow,
 //  badges/dots, and an optional center floating button (with the curved notch).
 //
@@ -66,6 +66,7 @@ struct BottomTabBar: View {
     let onTabSelected: (Int) -> Void
 
     @Environment(\.screenLayout) private var layout
+    @Environment(\.appTheme) private var theme
 
     // the bar sits between the side safe areas
     private var screenWidth: CGFloat { layout.width - layout.insets.leading - layout.insets.trailing }
@@ -98,11 +99,11 @@ struct BottomTabBar: View {
             }
             .frame(maxWidth: .infinity)
             .frame(height: BOTTOM_TAB_BAR_HEIGHT)
-            .background(Colors.black01.ignoresSafeArea(edges: .horizontal))
+            .background(theme.colors.background.surface.ignoresSafeArea(edges: .horizontal))
 
             // Animated selection indicator.
             RoundedRectangle(cornerRadius: 2)
-                .fill(Colors.primary)
+                .fill(theme.colors.primary)
                 .frame(width: 44, height: 2)
                 .offset(x: indicatorOffset, y: -BOTTOM_TAB_BAR_HEIGHT + 2)
                 .animation(.easeInOut(duration: 0.25), value: selectedIndex)
@@ -143,7 +144,9 @@ private struct TabBarItem: View {
     let selected: Bool
     let onClick: () -> Void
 
-    private var tintColor: Color { selected ? Colors.primary : Colors.black10 }
+    @Environment(\.appTheme) private var theme
+
+    private var tintColor: Color { selected ? theme.colors.primary : theme.colors.text.hint }
 
     /// Mirrors Compose's `formatLabel`: hide a badge that is the number "0".
     private var badgeLabel: String? {
@@ -195,18 +198,20 @@ private struct TabBarItem: View {
 private struct CenterFloatingButton: View {
     let data: BottomTabFloatingButton
 
+    @Environment(\.appTheme) private var theme
+
     var body: some View {
         VStack(spacing: 0) {
             CurvedContainer()
             Circle()
-                .fill(Colors.primary)
+                .fill(theme.colors.primary)
                 .frame(width: 48, height: 48)
                 .overlay(Icon(source: data.icon, size: 28, color: .white))
             Spacer().frame(height: 4)
             MomoText(data.label, typography: .labelXsMedium, color: Colors.black01, textAlign: .center, maxLines: 1)
                 .frame(maxWidth: .infinity)
                 .frame(height: 14)
-                .background(Colors.primary)
+                .background(theme.colors.primary)
                 .clipShape(RoundedRectangle(cornerRadius: Radius.XL))
         }
         .frame(width: bottomTabFloatingButtonWidth)

package/ios/{Application → Navigation/Component}/FloatingButton.swift

@@ -1,3 +1,11 @@
+//
+//  FloatingButton.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `navigation/component/FloatingButton.kt`: the screen FAB, whose
+//  label collapses while the content scrolls down.
+//
+
 import SwiftUI
 import Combine
 
@@ -111,13 +119,16 @@ public struct FloatingButton: View {
                 content
             }
         }
-        .onTapGesture {
-            onClick?()
-        }
         .padding(Spacing.M)
         .frame(height: height + (Spacing.M * 2))
         .background(containerColor)
         .cornerRadius(100)
+        // Compose FloatingActionButton elevation 4dp
+        .shadow(color: Color.black.opacity(0.2), radius: 4, x: 0, y: 2)
+        .contentShape(Capsule())
+        .onTapGesture {
+            onClick?()
+        }
         .padding(.bottom, bottomPadding)
         .frame(alignment: position == .center ? .center : .trailing)
         .onAppear {