@momo-kits/native-kits 0.162.44-debug → 0.162.45-debug

package/ios/Navigation/BottomTab/BottomTab.swift

@@ -0,0 +1,332 @@
+//
+//  BottomTab.swift
+//  MoMoUIKits
+//
+//  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
+import UIKit
+
+public struct BottomTab: View {
+    private let items: [BottomTabItem]
+    private let floatingButton: BottomTabFloatingButton?
+    private let compressionBehavior: DuoBarCompressionBehavior
+    private let onTabPress: ((_ index: Int, _ switchTab: @escaping () -> Void) -> Void)?
+    private let backToInitialTab: Bool
+
+    @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()
+    /// Compose's `startRoute`: picked once from `initialRouteName`.
+    @State private var startIndex: Int
+    @State private var selectedIndex: Int
+    @State private var toolbarHeight = DuoBarCompression.defaultToolbarHeight
+    @State private var expandedBar: DuoBar?
+    @State private var openedBar: DuoBar?
+
+    /// `compressionBehavior`: on iPhone Duo, when the side bar can't hold both bars, which one
+    /// starts compressed; tapping the compressed one swaps them.
+    /// `onTabPress` gets every tab press with the switch to perform, e.g. after a login gate.
+    /// `backToInitialTab`: back off another tab returns to the initial one before leaving the screen.
+    public init(
+        items: [BottomTabItem],
+        floatingButton: BottomTabFloatingButton? = nil,
+        compressionBehavior: DuoBarCompressionBehavior = .toolbar,
+        initialRouteName: String? = nil,
+        onTabPress: ((_ index: Int, _ switchTab: @escaping () -> Void) -> Void)? = nil,
+        backToInitialTab: Bool = true
+    ) {
+        self.items = items
+        self.floatingButton = floatingButton
+        self.compressionBehavior = compressionBehavior
+        self.onTabPress = onTabPress
+        self.backToInitialTab = backToInitialTab
+        let start = items.firstIndex { $0.name == initialRouteName } ?? 0
+        _startIndex = State(initialValue: start)
+        _selectedIndex = State(initialValue: start)
+    }
+
+    private var bottomInset: CGFloat { safeAreaBottomInset() }
+    // the Duo bars overlay the content or sit in the side strip, so only the home indicator is kept clear
+    private var reservedBottom: CGFloat {
+        layout.isIPhoneDuo ? layout.insets.bottom : BOTTOM_TAB_BAR_HEIGHT + bottomInset + Spacing.S
+    }
+
+    private var compression: DuoBarCompression {
+        DuoBarCompression.resolve(
+            layout: layout,
+            tabCount: items.count,
+            hasQr: floatingButton != nil,
+            toolbarHeight: toolbarHeight,
+            // 'toolbar' compression keeps the tab bar whole until the toolbar is tapped
+            expanded: Binding(
+                get: { expandedBar ?? (compressionBehavior == .toolbar ? .tabBar : .toolbar) },
+                set: { expandedBar = $0 }
+            ),
+            opened: $openedBar,
+            setToolbarHeight: { height in
+                if toolbarHeight != height { toolbarHeight = height }
+            }
+        )
+    }
+
+    private func duoInsets(_ compression: DuoBarCompression) -> DuoTabBarInsets {
+        layout.duoTabBarInsets(
+            itemCount: items.count,
+            hasFloatingButton: floatingButton != nil,
+            tabBarCompressed: compression.tabBarCompressed
+        )
+    }
+
+    public var body: some View {
+        let compression = compression
+        ZStack(alignment: .bottom) {
+            // Tab content area, inset above the bar.
+            TabHost(selectedIndex: selectedIndex, count: items.count) { index in AnyView(tabScreen(for: index)) }
+                // each tab hosts itself, so it needs the window's safe area to draw its header under the status bar
+                .ignoresSafeArea(.container, edges: [.top, .horizontal])
+                .padding(.bottom, reservedBottom)
+                .environment(\.duoTabBarInsets, duoInsets(compression))
+                .environment(\.duoBarCompression, compression)
+
+            if layout.isIPhoneDuo {
+                DuoTabBar(
+                    items: items,
+                    floatingButton: floatingButton,
+                    selectedIndex: selectedIndex,
+                    onTabSelected: selectTab,
+                    compression: compression
+                )
+            } else {
+                // Tab bar + home-indicator filler.
+                VStack(spacing: 0) {
+                    BottomTabBar(
+                        items: items,
+                        floatingButton: floatingButton,
+                        selectedIndex: selectedIndex,
+                        onTabSelected: selectTab
+                    )
+                    theme.colors.background.surface
+                        .frame(height: bottomInset + Spacing.S)
+                        .ignoresSafeArea(edges: .horizontal)
+                }
+            }
+        }
+        .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) {
+        let switchTab = { if index != selectedIndex { selectedIndex = index } }
+        if let onTabPress { onTabPress(index, switchTab) } else { switchTab() }
+    }
+
+    /// Back off the initial tab returns to it; the host shows its floating arrow there (RN parity).
+    private func updateTabBack() {
+        let isFirstTab = selectedIndex == startIndex || !backToInitialTab
+        HostBackGestureBridge.shared.shouldUseFloatingArrowBack = !isFirstTab
+        navigator.tabBackHandler = isFirstTab ? nil : (hostNavigation?.id ?? -1, { selectedIndex = startIndex })
+    }
+
+    private func tabScreen(for index: Int) -> some View {
+        let item = items[index]
+        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)
+    }
+}
+
+// MARK: - Tab host
+
+/// Compose's tab NavHost with `saveState` / `restoreState`. A tab gets its own UIHostingController
+/// on first selection and keeps it, so its state and scroll survive a switch; while hidden it is
+/// out of the window, so it gets onDisappear / onAppear (and re-runs screen tracking) like a NavHost
+/// destination or a UITabBarController tab. Same scheme as `StackController`.
+private struct TabHost: UIViewControllerRepresentable {
+    let selectedIndex: Int
+    let count: Int
+    let content: (Int) -> AnyView
+
+    func makeUIViewController(context: Context) -> TabController {
+        TabController()
+    }
+
+    func updateUIViewController(_ controller: TabController, context: Context) {
+        controller.update(selectedIndex: selectedIndex, count: count, environment: context.environment, content: content)
+    }
+}
+
+private final class TabController: UIViewController {
+    private final class Tab {
+        let motion = TabMotion()
+        var host: UIHostingController<AnyView>!
+    }
+
+    private static let switchDuration: TimeInterval = 0.2
+
+    private var tabs: [Int: Tab] = [:]
+    private var selectedIndex: Int?
+    private var environment = EnvironmentValues()
+    private var content: (Int) -> AnyView = { _ in AnyView(EmptyView()) }
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        view.backgroundColor = .clear
+    }
+
+    override func viewDidLayoutSubviews() {
+        super.viewDidLayoutSubviews()
+        for subview in view.subviews { subview.frame = view.bounds }
+    }
+
+    func update(
+        selectedIndex index: Int,
+        count: Int,
+        environment: EnvironmentValues,
+        content: @escaping (Int) -> AnyView
+    ) {
+        self.environment = environment
+        self.content = content
+        for (stale, removed) in tabs where stale >= count {
+            tabs[stale] = nil
+            tearDown(removed)
+        }
+        if let selectedIndex, tabs[selectedIndex] == nil { self.selectedIndex = nil }
+        // hidden tabs too, so a tab coming back already shows the latest items and environment
+        for (tabIndex, existing) in tabs { existing.host.rootView = rootView(tabIndex, existing) }
+        guard (0..<count).contains(index), index != selectedIndex else { return }
+
+        let previous = selectedIndex.flatMap { tabs[$0] }
+        selectedIndex = index
+        let selected = tabs[index] ?? makeTab(index)
+        attach(selected)
+
+        guard let previous, view.window != nil else {
+            selected.motion.visible = true
+            previous.map(leave)
+            return
+        }
+        previous.host.view.isUserInteractionEnabled = false
+        // a frame at the start values first, so a tab created just now fades in too
+        DispatchQueue.main.async {
+            selected.motion.visible = true
+            previous.motion.visible = false
+        }
+        DispatchQueue.main.asyncAfter(deadline: .now() + Self.switchDuration) { [weak self] in
+            self?.leave(previous)
+        }
+    }
+
+    private func makeTab(_ index: Int) -> Tab {
+        let tab = Tab()
+        let host = UIHostingController(rootView: rootView(index, tab))
+        host.view.backgroundColor = .clear
+        addChild(host)
+        host.didMove(toParent: self)
+        tab.host = host
+        tabs[index] = tab
+        return tab
+    }
+
+    private func rootView(_ index: Int, _ tab: Tab) -> AnyView {
+        AnyView(TabCard(motion: tab.motion, content: content(index)).environment(\.self, environment))
+    }
+
+    private func attach(_ tab: Tab) {
+        let hostView: UIView = tab.host.view
+        hostView.isUserInteractionEnabled = true
+        hostView.frame = view.bounds
+        if hostView.superview === view {
+            view.bringSubviewToFront(hostView)
+        } else {
+            view.addSubview(hostView)
+        }
+    }
+
+    /// Off the window once hidden; a tab selected again in the meantime stays.
+    private func leave(_ tab: Tab) {
+        guard selectedIndex.flatMap({ tabs[$0] }) !== tab else { return }
+        tab.host.view.removeFromSuperview()
+    }
+
+    private func tearDown(_ tab: Tab) {
+        tab.host.willMove(toParent: nil)
+        tab.host.view.removeFromSuperview()
+        tab.host.removeFromParent()
+    }
+}
+
+private final class TabMotion: ObservableObject {
+    @Published var visible = false
+}
+
+/// The tab switch: 0.97 scale + fade over 200ms, both ways (Compose's tab enter / exit transitions).
+private struct TabCard: View {
+    @ObservedObject var motion: TabMotion
+    let content: AnyView
+
+    var body: some View {
+        content
+            .opacity(motion.visible ? 1 : 0)
+            .scaleEffect(motion.visible ? 1 : 0.97)
+            .animation(.easeInOut(duration: 0.2), value: motion.visible)
+    }
+}
+
+/// Bottom safe-area inset (home indicator).
+private func safeAreaBottomInset() -> CGFloat {
+    let bottomInset = UIApplication.shared.connectedScenes
+        .compactMap { ($0 as? UIWindowScene)?.keyWindow?.safeAreaInsets.bottom }
+        .first ?? 0
+    return min(bottomInset, 21)
+}

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).
 //
@@ -20,6 +20,7 @@ public struct BottomTabItem: Identifiable {
     public let showDot: Bool
     public let badgeLabel: String?
     public let options: NavigationOptions?
+    public let initialParams: Any?
     public let screen: () -> AnyView
 
     public init(
@@ -29,6 +30,7 @@ public struct BottomTabItem: Identifiable {
         showDot: Bool = false,
         badgeLabel: String? = nil,
         options: NavigationOptions? = nil,
+        initialParams: Any? = nil,
         @ViewBuilder screen: @escaping () -> some View
     ) {
         self.name = name
@@ -37,6 +39,7 @@ public struct BottomTabItem: Identifiable {
         self.showDot = showDot
         self.badgeLabel = badgeLabel
         self.options = options
+        self.initialParams = initialParams
         self.screen = { AnyView(screen()) }
     }
 }
@@ -65,7 +68,11 @@ struct BottomTabBar: View {
     let selectedIndex: Int
     let onTabSelected: (Int) -> Void
 
-    private var screenWidth: CGFloat { UIScreen.main.bounds.width }
+    @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 }
     private var mid: Int { items.count / 2 }
 
     private var tabWidth: CGFloat {
@@ -95,11 +102,11 @@ struct BottomTabBar: View {
             }
             .frame(maxWidth: .infinity)
             .frame(height: BOTTOM_TAB_BAR_HEIGHT)
-            .background(Colors.black01)
+            .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)
@@ -140,7 +147,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? {
@@ -192,18 +201,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/Navigation/BottomTab/DuoBarCompression.swift

@@ -0,0 +1,104 @@
+//
+//  DuoBarCompression.swift
+//  MoMoUIKits
+//
+//  Port of RN `BottomTab/DuoBarCompression.tsx` (HIG, Designing for iPhone Duo: Vertical controls):
+//  keeps the side bar's toolbar and tab bar clear of each other.
+//
+
+import SwiftUI
+
+/// iPhone Duo: which side bar bar starts compressed when the strip cannot hold both whole.
+public enum DuoBarCompressionBehavior {
+    case toolbar, tabBar
+}
+
+enum DuoBar {
+    case toolbar, tabBar
+}
+
+struct DuoBarCompression {
+    var toolbarCompressed = false
+    var tabBarCompressed = false
+    /// The open rail needs the toolbar button slot too: only Back stays.
+    var toolbarHidden = false
+    var expandToolbar: () -> Void = {}
+    var expandTabBar: () -> Void = {}
+    /// A rail opened from the compressed state closes once a tab is picked.
+    var onTabSelected: () -> Void = {}
+    /// Side bar toolkits report their full height so the tab bar knows what is left.
+    var setToolbarHeight: (CGFloat) -> Void = { _ in }
+
+    /// Space kept between the top and the bottom groups (HIG Vertical controls).
+    static let groupGap = Spacing.M
+    /// Back, then the right toolkit: help + home capsule.
+    static let defaultToolbarHeight = DuoMetrics.controlSize + Spacing.M + 2 * DuoMetrics.itemPitch
+    /// Back, then the single button the toolbar folds into.
+    private static let compressedToolbarHeight = 2 * DuoMetrics.controlSize + Spacing.M
+
+    /// - both fit: both stay whole
+    /// - one fits whole beside the other compressed: one is compressed, tapping it swaps them
+    /// - otherwise both rest compressed; tapping one opens it for a moment (the rail closes
+    ///   again once a tab is picked)
+    static func resolve(
+        layout: ScreenLayout,
+        tabCount: Int,
+        hasQr: Bool,
+        toolbarHeight: CGFloat,
+        expanded: Binding<DuoBar>,
+        opened: Binding<DuoBar?>,
+        setToolbarHeight: @escaping (CGFloat) -> Void
+    ) -> DuoBarCompression {
+        guard let sideBar = layout.sideBar else { return DuoBarCompression() }
+        let room = layout.height - sideBar.bottom - sideBar.top - groupGap
+        let tabBar = duoRailHeight(itemCount: tabCount, hasQr: hasQr)
+        let compressedTabBar = duoRailHeight(itemCount: 1, hasQr: hasQr, compressed: true)
+        func fits(_ toolbar: CGFloat, _ tabs: CGFloat) -> Bool { toolbar + tabs <= room }
+
+        if fits(toolbarHeight, tabBar) {
+            return DuoBarCompression(setToolbarHeight: setToolbarHeight)
+        }
+        if fits(compressedToolbarHeight, tabBar) && fits(toolbarHeight, compressedTabBar) {
+            return DuoBarCompression(
+                toolbarCompressed: expanded.wrappedValue == .tabBar,
+                tabBarCompressed: expanded.wrappedValue == .toolbar,
+                expandToolbar: { expanded.wrappedValue = .toolbar },
+                expandTabBar: { expanded.wrappedValue = .tabBar },
+                setToolbarHeight: setToolbarHeight
+            )
+        }
+
+        let expandToolbar = { opened.wrappedValue = .toolbar }
+        let expandTabBar = { opened.wrappedValue = .tabBar }
+        // an opened rail always shows, even when only the group gap is short: it closes once a tab is picked
+        if opened.wrappedValue == .tabBar {
+            return DuoBarCompression(
+                toolbarCompressed: true,
+                tabBarCompressed: false,
+                toolbarHidden: true,
+                expandToolbar: expandToolbar,
+                expandTabBar: expandTabBar,
+                onTabSelected: { opened.wrappedValue = nil },
+                setToolbarHeight: setToolbarHeight
+            )
+        }
+        return DuoBarCompression(
+            toolbarCompressed: opened.wrappedValue != .toolbar,
+            tabBarCompressed: true,
+            expandToolbar: expandToolbar,
+            expandTabBar: expandTabBar,
+            setToolbarHeight: setToolbarHeight
+        )
+    }
+}
+
+private struct DuoBarCompressionKey: EnvironmentKey {
+    static let defaultValue = DuoBarCompression()
+}
+
+extension EnvironmentValues {
+    var duoBarCompression: DuoBarCompression {
+        get { self[DuoBarCompressionKey.self] }
+        set { self[DuoBarCompressionKey.self] = newValue }
+    }
+}