@momo-kits/native-kits 0.163.1-beta.8-debug → 0.163.1-beta.9-debug

package/ios/Application/Navigation/Navigator.swift

@@ -0,0 +1,385 @@
+//
+//  Navigator.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's Navigator + DynamicScreenRegistry.
+//  Screens are registered by Int id; the NavigationStack path stores routes
+//  by id and looks up content from the registry on render.
+//
+
+import SwiftUI
+import Combine
+
+// MARK: - Routes
+
+public struct DynamicScreenRoute: Hashable, Identifiable {
+    public let id: Int
+}
+
+public struct DynamicDialogRoute: Hashable, Identifiable {
+    public let id: Int
+}
+
+// MARK: - Registry
+
+public struct DynamicScreen {
+    public let id: Int
+    public let name: String
+    public let content: () -> AnyView
+    public var options: NavigationOptions?
+}
+
+public final class DynamicScreenRegistry {
+    private var screens: [Int: DynamicScreen] = [:]
+    private var idCounter: Int = 1
+
+    public init() {}
+
+    @discardableResult
+    public func register(
+        screenName: String = "",
+        content: @escaping () -> AnyView,
+        options: NavigationOptions? = nil
+    ) -> DynamicScreenRoute {
+        let id = idCounter
+        idCounter += 1
+        screens[id] = DynamicScreen(id: id, name: screenName, content: content, options: options)
+        return DynamicScreenRoute(id: id)
+    }
+
+    public func unregister(id: Int) {
+        screens.removeValue(forKey: id)
+    }
+
+    public func unregisterAll() {
+        screens.removeAll()
+    }
+
+    public func getScreen(id: Int) -> DynamicScreen? { screens[id] }
+
+    public func latest() -> DynamicScreen? {
+        screens.max(by: { $0.key < $1.key })?.value
+    }
+
+    public func setOptions(id: Int, options: NavigationOptions) {
+        screens[id]?.options = options
+    }
+}
+
+// MARK: - Overplay
+
+public enum OverplayType {
+    case modal, bottomSheet, snackBar
+}
+
+public struct OverplayItem: Identifiable {
+    public let id = UUID()
+    public let type: OverplayType
+    public let content: () -> AnyView
+    public let barrierDismissible: Bool
+    public let onDismiss: (() -> Void)?
+    // Bottom-sheet params (mirrors Compose's OverplayComponentParams.BottomSheet).
+    public var isSurface: Bool = false
+    public var header: BottomSheetHeader? = nil
+    // Snack-bar payload (mirrors Compose's SnackBar value).
+    public var snackBar: SnackBar? = nil
+}
+
+// MARK: - Navigator
+
+@available(iOS 16.0, *)
+public final class Navigator: ObservableObject {
+    @Published public var path: [DynamicScreenRoute] = []
+    @Published public var presented: DynamicDialogRoute?
+    @Published public var overplay: OverplayItem?
+
+    /// Owned per-Navigator (mirrors Compose's `remember { DynamicScreenRegistry() }` +
+    /// disposal): screens registered by this navigator are released via ARC when the
+    /// navigator itself deallocates, instead of accumulating in a process-wide singleton.
+    public let registry = DynamicScreenRegistry()
+
+    /// Animated-close handler registered by the active overplay component
+    /// (mirrors Compose's `OverplayComponentRegistry.bindClose`). When set, a
+    /// dismiss request runs the component's exit animation before the item is
+    /// actually removed via `finishOverplayDismiss`.
+    private var overplayDismissHandler: (() -> Void)?
+
+    public private(set) var rootRoute: DynamicScreenRoute
+    public var composeApi: KitComposeApi?
+
+    public init(
+        initialScreenName: String = "",
+        initialContent: @escaping () -> AnyView,
+        options: NavigationOptions? = nil,
+        composeApi: KitComposeApi? = nil
+    ) {
+        self.composeApi = composeApi
+        self.rootRoute = registry.register(
+            screenName: initialScreenName,
+            content: initialContent,
+            options: options
+        )
+    }
+
+    // MARK: Stack
+
+    public func push<V: View>(@ViewBuilder _ content: @escaping () -> V, options: NavigationOptions? = nil) {
+        let route = registry.register(
+            screenName: options?.screenName ?? "",
+            content: { AnyView(content()) },
+            options: options
+        )
+        path.append(route)
+    }
+
+    public func push<V: View>(
+        screenName: String,
+        @ViewBuilder _ content: @escaping () -> V,
+        options: NavigationOptions? = nil
+    ) {
+        let route = registry.register(
+            screenName: screenName,
+            content: { AnyView(content()) },
+            options: options
+        )
+        path.append(route)
+    }
+
+    public func replace<V: View>(@ViewBuilder _ content: @escaping () -> V, options: NavigationOptions? = nil) {
+        guard !path.isEmpty else { return }
+        let removed = path.removeLast()
+        registry.unregister(id: removed.id)
+        push(content, options: options)
+    }
+
+    public func replace<V: View>(
+        screenName: String,
+        @ViewBuilder _ content: @escaping () -> V,
+        options: NavigationOptions? = nil
+    ) {
+        guard !path.isEmpty else { return }
+        let removed = path.removeLast()
+        registry.unregister(id: removed.id)
+        push(screenName: screenName, content, options: options)
+    }
+
+    public func reset<V: View>(@ViewBuilder _ content: @escaping () -> V, options: NavigationOptions? = nil) {
+        for route in path { registry.unregister(id: route.id) }
+        registry.unregister(id: rootRoute.id)
+        path.removeAll()
+        let route = registry.register(
+            screenName: options?.screenName ?? "",
+            content: { AnyView(content()) },
+            options: options
+        )
+        rootRoute = route
+    }
+
+    public func reset<V: View>(
+        screenName: String,
+        @ViewBuilder _ content: @escaping () -> V,
+        options: NavigationOptions? = nil
+    ) {
+        for route in path { registry.unregister(id: route.id) }
+        registry.unregister(id: rootRoute.id)
+        path.removeAll()
+        let route = registry.register(
+            screenName: screenName,
+            content: { AnyView(content()) },
+            options: options
+        )
+        rootRoute = route
+    }
+
+    public func pop(_ count: Int = 1, callback: (() -> Void)? = nil) {
+        var remaining = count
+        while remaining > 0 {
+            if overplay?.type == .snackBar {
+                // Mirrors Kotlin: a snackbar doesn't block back-navigation, so popping
+                // while one is showing pops the screen underneath and clears the
+                // snackbar immediately, without playing its dismiss animation.
+                overplayDismissHandler = nil
+                overplay = nil
+                if !popScreen() { break }
+            } else if overplay != nil {
+                hideOverplay()
+            } else if !popScreen() {
+                break
+            }
+            remaining -= 1
+        }
+        callback?()
+    }
+
+    /// Pops the topmost presented screen or stack entry. Returns `false` (and requests
+    /// a host dismiss) when there is nothing left to pop.
+    @discardableResult
+    private func popScreen() -> Bool {
+        if presented != nil {
+            let dismissedId = presented?.id
+            presented = nil
+            if let id = dismissedId { registry.unregister(id: id) }
+            return true
+        } else if !path.isEmpty {
+            let removed = path.removeLast()
+            registry.unregister(id: removed.id)
+            return true
+        } else {
+            composeApi?.requestCallback(funcName: "dismiss", params: nil, onResponse: nil)
+            return false
+        }
+    }
+
+    public func popToRoot() {
+        for route in path { registry.unregister(id: route.id) }
+        path.removeAll()
+    }
+
+    public func onBackSafe(callback: (() -> Void)? = nil) {
+        let latest = registry.latest()
+        if let onBack = latest?.options?.onBackHandler {
+            onBack()
+            return
+        }
+        if let preventBack = latest?.options?.headerBackProps?.preventBack {
+            showModal {
+                PopupDisplay(
+                    isPresented: .constant(true),
+                    title: preventBack.title,
+                    description: preventBack.description,
+                    url: preventBack.image,
+                    buttonDirection: preventBack.buttonDirection,
+                    buttonType: .button,
+                    actionButtonTitle: preventBack.primary?.title ?? "",
+                    closeButtonTitle: preventBack.secondary?.title ?? "",
+                    onPressAction: { [weak self] in
+                        preventBack.primary?.onPress?()
+                        // Close the popup, then leave the screen (matches Compose's pop(2)).
+                        self?.pop(2, callback: callback)
+                    },
+                    onPressCloseButton: { [weak self] in
+                        preventBack.secondary?.onPress?()
+                        self?.hideOverplay()
+                    },
+                    onClose: { [weak self] in
+                        preventBack.onIconClose?()
+                        self?.hideOverplay()
+                    },
+                    errorCode: preventBack.error,
+                    isShowCloseIcon: preventBack.isShowCloseIcon
+                )
+            }
+            return
+        }
+        pop(1, callback: callback)
+    }
+
+    // MARK: Modal-style screen (vertical slide)
+
+    public func present<V: View>(@ViewBuilder _ content: @escaping () -> V, options: NavigationOptions? = nil) {
+        let route = registry.register(
+            screenName: options?.screenName ?? "",
+            content: { AnyView(content()) },
+            options: options
+        )
+        presented = DynamicDialogRoute(id: route.id)
+    }
+
+    public func present<V: View>(
+        screenName: String,
+        @ViewBuilder _ content: @escaping () -> V,
+        options: NavigationOptions? = nil
+    ) {
+        let route = registry.register(
+            screenName: screenName,
+            content: { AnyView(content()) },
+            options: options
+        )
+        presented = DynamicDialogRoute(id: route.id)
+    }
+
+    public func dismiss() {
+        if let id = presented?.id {
+            registry.unregister(id: id)
+        }
+        presented = nil
+    }
+
+    // MARK: Overplay
+
+    public func showModal<V: View>(
+        @ViewBuilder _ content: @escaping () -> V,
+        barrierDismissible: Bool = true,
+        onDismiss: (() -> Void)? = nil
+    ) {
+        overplayDismissHandler = nil
+        overplay = OverplayItem(
+            type: .modal,
+            content: { AnyView(content()) },
+            barrierDismissible: barrierDismissible,
+            onDismiss: onDismiss
+        )
+    }
+
+    public func showBottomSheet<V: View>(
+        @ViewBuilder _ content: @escaping () -> V,
+        isSurface: Bool = false,
+        barrierDismissible: Bool = true,
+        header: BottomSheetHeader? = nil,
+        onDismiss: (() -> Void)? = nil
+    ) {
+        overplayDismissHandler = nil
+        overplay = OverplayItem(
+            type: .bottomSheet,
+            content: { AnyView(content()) },
+            barrierDismissible: barrierDismissible,
+            onDismiss: onDismiss,
+            isSurface: isSurface,
+            header: header
+        )
+    }
+
+    /// Mirrors Compose's `showSnackBar(snackBar:)`.
+    public func showSnackBar(_ snackBar: SnackBar, onDismiss: (() -> Void)? = nil) {
+        overplayDismissHandler = nil
+        overplay = OverplayItem(
+            type: .snackBar,
+            content: { AnyView(EmptyView()) },
+            barrierDismissible: false,
+            onDismiss: onDismiss,
+            snackBar: snackBar
+        )
+    }
+
+    // MARK: Overplay dismissal
+
+    /// Registered by the active overplay component so external dismiss requests
+    /// run its exit animation (mirrors Compose's `bindClose`).
+    public func registerOverplayDismiss(_ handler: @escaping () -> Void) {
+        overplayDismissHandler = handler
+    }
+
+    /// Removes the overplay and fires its `onDismiss` (mirrors Compose's
+    /// `hardClearAfterDismiss`). Called by a component once its exit animation
+    /// has completed.
+    public func finishOverplayDismiss() {
+        let dismissCallback = overplay?.onDismiss
+        overplayDismissHandler = nil
+        overplay = nil
+        dismissCallback?()
+    }
+
+    public func hideOverplay() {
+        if let close = overplayDismissHandler {
+            // Component runs its exit animation, then calls finishOverplayDismiss.
+            overplayDismissHandler = nil
+            close()
+        } else {
+            finishOverplayDismiss()
+        }
+    }
+
+    public func hideSnackBar() {
+        if overplay?.type == .snackBar { hideOverplay() }
+    }
+}

package/ios/Application/Navigation/Overplay/BottomSheet.swift

@@ -0,0 +1,256 @@
+//
+//  BottomSheet.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `BottomSheet` (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.
+//  Driven by `Navigator.showBottomSheet`.
+//
+
+import SwiftUI
+
+// MARK: - Header model
+
+/// Mirrors Compose's `sealed class BottomHeader` (Title / Custom).
+public struct BottomSheetHeader {
+    enum Style {
+        case title(String)
+        case custom(() -> AnyView)
+    }
+
+    let style: Style
+
+    /// Mirrors `BottomHeader.Title`.
+    public static func title(_ text: String = "Bottom Sheet Title") -> BottomSheetHeader {
+        BottomSheetHeader(style: .title(text))
+    }
+
+    /// Mirrors `BottomHeader.Custom`.
+    public static func custom<V: View>(@ViewBuilder _ content: @escaping () -> V) -> BottomSheetHeader {
+        BottomSheetHeader(style: .custom({ AnyView(content()) }))
+    }
+}
+
+// MARK: - Bottom sheet view
+
+@available(iOS 16.0, *)
+struct BottomSheetView<Content: View>: View {
+    let header: BottomSheetHeader
+    let isSurface: Bool
+    let barrierDismissible: Bool
+    let content: () -> Content
+
+    @EnvironmentObject private var navigator: Navigator
+    @Environment(\.appTheme) private var theme
+    @Environment(\.applicationEnvironment) private var appEnv
+
+    /// Vertical translation of the sheet; starts off-screen and animates to 0.
+    @State private var sheetOffset: CGFloat = UIScreen.main.bounds.height
+    /// Mirrors Compose's `backgroundAlpha`: only touched by open()/close(), never by drag.
+    @State private var backgroundAlpha: CGFloat = 0
+    @State private var sheetHeight: CGFloat = 0
+    @State private var didAppear = false
+    @State private var keyboardHeight: CGFloat = 0
+    /// Live drag offset, isolated from `sheetOffset` so a touch-move only invalidates
+    /// this gesture-scoped value instead of forcing the whole body (including
+    /// `content()`) to reconstruct every frame — mirrors the pattern already used in
+    /// `ios/PopupView/PopupView.swift` for smooth drag-to-dismiss.
+    @GestureState private var dragTranslation: CGFloat = 0
+
+    /// Mirrors Compose's `sheetCloseOffset` (100dp drag threshold to dismiss).
+    private let closeThreshold: CGFloat = 100
+
+    /// Mirrors Compose's per-term peak (0.3f). Combined with `backgroundAlpha` the
+    /// steady-state (fully open) scrim peaks at 0.6, matching ModalScreen's peak.
+    private let maxDynamicAlpha: CGFloat = 0.3
+
+    private var screenHeight: CGFloat { UIScreen.main.bounds.height }
+    private var bottomInset: CGFloat { safeAreaBottomInset() }
+    /// 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 }
+
+    private var backgroundColor: Color {
+        isSurface ? theme.colors.background.surface : theme.colors.background.default
+    }
+
+    private var effectiveOffset: CGFloat { sheetOffset + dragTranslation }
+
+    /// Mirrors Compose's `dynamicAlpha`: a plain derived value (not itself animated)
+    /// that tracks the current offset live, shrinking toward 0 as the sheet is
+    /// dragged down.
+    private var dynamicAlpha: CGFloat {
+        let denom = sheetHeight > 0 ? sheetHeight : screenHeight
+        guard denom > 0 else { return maxDynamicAlpha }
+        let progress = min(max(1 - effectiveOffset / denom, 0), 1)
+        return progress * maxDynamicAlpha
+    }
+
+    /// Mirrors Compose's `alpha = backgroundAlpha + dynamicAlpha`: additive, so the
+    /// scrim peaks at 0.6 at rest and only fades to a 0.3 floor while dragging
+    /// (backgroundAlpha holds steady until an explicit close()).
+    private var totalScrimAlpha: CGFloat { backgroundAlpha + dynamicAlpha }
+
+    var body: some View {
+        ZStack(alignment: .bottom) {
+            // Dimmed scrim — additive backgroundAlpha + dynamicAlpha (see above).
+            Color.black.opacity(totalScrimAlpha)
+                .contentShape(Rectangle())
+                .onTapGesture {
+                    if barrierDismissible { close() }
+                }
+
+            sheet
+                .offset(y: effectiveOffset)
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .ignoresSafeArea()
+        .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillChangeFrameNotification)) { notification in
+            guard let endFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
+            withAnimation(.easeOut(duration: 0.25)) {
+                keyboardHeight = UIScreen.main.bounds.height - endFrame.origin.y
+            }
+        }
+        .onAppear {
+            guard !didAppear else { return }
+            didAppear = true
+            ScreenTracker.trackPopupDisplayed(
+                maxApi: appEnv.maxApi,
+                context: appEnv.applicationContext,
+                parentScreenName: ScreenTracker.getLastScreenName()
+            )
+            navigator.registerOverplayDismiss { close() }
+            open()
+        }
+    }
+
+    private var sheet: some View {
+        VStack(spacing: 0) {
+            // Drag handle + header (the draggable region).
+            VStack(spacing: 0) {
+                Spacer().frame(height: 8)
+                Capsule()
+                    .fill(Colors.black06)
+                    .frame(width: 40, height: 4)
+                Spacer().frame(height: 4)
+                headerView
+                    .frame(height: 56)
+                    .padding(.horizontal, Spacing.M)
+            }
+            .frame(maxWidth: .infinity)
+            .frame(height: 72)
+            .contentShape(Rectangle())
+            .gesture(dragGesture)
+
+            Rectangle()
+                .fill(theme.colors.border.default)
+                .frame(height: 1)
+
+            content()
+
+            backgroundColor
+                .frame(height: effectiveBottomInset)
+        }
+        .frame(maxWidth: .infinity)
+        .frame(alignment: .bottom)
+        .background(
+            GeometryReader { geo in
+                Color.clear.onAppear { sheetHeight = geo.size.height }
+            }
+        )
+        .background(backgroundColor)
+        .clipShape(RoundedCorner(radius: Radius.M, corners: [.topLeft, .topRight]))
+    }
+
+    @ViewBuilder
+    private var headerView: some View {
+        switch header.style {
+        case .title(let text):
+            HStack(spacing: 0) {
+                Color.clear.frame(width: 24, height: 24)
+                MomoText(text, typography: .headerDefaultBold, color: Colors.black17)
+                    .frame(maxWidth: .infinity, alignment: .center)
+                Icon(source: "navigation_close", size: 24, color: Colors.black17)
+                    .frame(width: 24, height: 24)
+                    .contentShape(Rectangle())
+                    .onTapGesture { close() }
+            }
+        case .custom(let builder):
+            builder()
+        }
+    }
+
+    // MARK: - Drag handling (mirrors Compose's detectDragGestures)
+
+    private var dragGesture: some Gesture {
+        // `.global` (not the default `.local`) so the gesture tracks against the
+        // window rather than the handle's own view, which is itself repositioned
+        // every frame by this same gesture's output (`sheet.offset(y: effectiveOffset)`
+        // in `body`) — the local coordinate space chasing its own moving reference
+        // frame is a plausible source of a continuous drag-time jitter.
+        DragGesture(coordinateSpace: .global)
+            .onChanged { _ in
+                // Touching the handle should immediately settle `sheetOffset` to its
+                // resting value (0) with no animation, so a drag that starts while the
+                // open animation — or the keyboard-driven resize, which shifts this
+                // same bottom-anchored top edge — is still in flight doesn't fight a
+                // moving target. Without this, the live drag value chases an animated
+                // one, producing a couple of corrective jumps before it settles.
+                if sheetOffset != 0 {
+                    sheetOffset = 0
+                }
+            }
+            .updating($dragTranslation) { value, state, _ in
+                state = max(value.translation.height, 0)
+            }
+            .onEnded { value in
+                let finalOffset = max(value.translation.height, 0)
+                // Capture into persisted state BEFORE @GestureState resets to 0,
+                // avoiding a one-frame snap back to rest before close()'s own
+                // slide-out animation starts (mirrors PopupView's `lastDragPosition`).
+                sheetOffset = finalOffset
+                if finalOffset > closeThreshold {
+                    close()
+                } else {
+                    withAnimation(.spring(response: 0.3, dampingFraction: 0.9)) {
+                        sheetOffset = 0
+                    }
+                }
+            }
+    }
+
+    // MARK: - Open / close animations
+
+    private func open() {
+        DispatchQueue.main.async {
+            withAnimation(.timingCurve(0.05, 0.7, 0.1, 1, duration: 0.1)) { backgroundAlpha = maxDynamicAlpha }
+            withAnimation(.timingCurve(0.05, 0.7, 0.1, 1, duration: 0.35)) { sheetOffset = 0 }
+        }
+    }
+
+    /// Mirrors Compose's `closeEvent`: slide out over 200ms, then fade the scrim
+    /// out over 100ms only after the slide finishes, then dismiss.
+    private func close() {
+        withAnimation(.timingCurve(0.3, 0, 0.8, 0.15, duration: 0.2)) {
+            sheetOffset = max(sheetHeight, screenHeight)
+        }
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
+            withAnimation(.timingCurve(0.3, 0, 0.8, 0.15, duration: 0.1)) {
+                backgroundAlpha = 0
+            }
+        }
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
+            navigator.finishOverplayDismiss()
+        }
+    }
+}
+
+@available(iOS 16.0, *)
+private func safeAreaBottomInset() -> CGFloat {
+    let bottomInset = UIApplication.shared.connectedScenes
+        .compactMap { ($0 as? UIWindowScene)?.keyWindow?.safeAreaInsets.bottom }
+        .first ?? 0
+    return min(bottomInset, 21)
+}