@momo-kits/native-kits 0.300.3-debug → 0.300.4-debug

package/ios/Navigation/StackTransition.swift

@@ -0,0 +1,400 @@
+//
+//  StackTransition.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `navigation/StackTransition.kt` (a 1:1 port of the RN kit's
+//  `forStackTransitionWithOverlay`) and of the NavHost it decorates. Every stack entry lives in
+//  its own UIHostingController, kept while the entry is on the stack and taken out of the window
+//  while covered, as UINavigationController does: a covered screen keeps its state, stops
+//  rendering and gets onDisappear / onAppear. The motion itself is drawn in SwiftUI, because an
+//  `offset` never moves the safe area the way a UIKit transform would.
+//
+
+import SwiftUI
+import UIKit
+
+let STACK_TRANSITION_DURATION: TimeInterval = 0.3
+
+private let PARALLAX_RATIO: CGFloat = 0.3
+private let SCRIM_MAX_ALPHA: CGFloat = 0.6
+private let EDGE_SHADOW_MAX_ALPHA: CGFloat = 0.3
+private let EDGE_SHADOW_WIDTH: CGFloat = 8
+
+// MARK: - Host
+
+/// The stack view behind `NavigationContainer`. `screen` builds an entry's content once;
+/// `decorate` re-applies the kit environment on every update.
+struct StackHost: UIViewControllerRepresentable {
+    let navigator: Navigator
+    let entries: [StackEntry]
+    let screen: (StackEntry) -> AnyView
+    let decorate: (AnyView) -> AnyView
+
+    func makeUIViewController(context: Context) -> StackController {
+        let controller = StackController()
+        navigator.stackController = controller
+        return controller
+    }
+
+    func updateUIViewController(_ controller: StackController, context: Context) {
+        controller.update(
+            entries: entries,
+            environment: context.environment,
+            screen: screen,
+            decorate: decorate
+        )
+    }
+}
+
+// MARK: - Controller
+
+final class StackController: UIViewController {
+    private final class Card {
+        let entry: StackEntry
+        let motion = CardMotion()
+        var host: UIHostingController<AnyView>!
+
+        init(entry: StackEntry) {
+            self.entry = entry
+        }
+    }
+
+    /// One push or pop between two cards. `coverage` is how far `top` covers `under`: 1 in place,
+    /// 0 gone. Push plays 0 → 1, pop 1 → 0; a host gesture sets it straight from the finger.
+    private final class Transition {
+        enum Kind { case slide, rise }
+
+        let kind: Kind
+        let top: Card
+        let under: Card
+        let isSeek: Bool
+        var coverage: CGFloat
+        var from: CGFloat = 0
+        var target: CGFloat = 0
+        var duration: TimeInterval = 0
+        var startTime: CFTimeInterval?
+        var isAnimating = false
+
+        init(kind: Kind, top: Card, under: Card, isSeek: Bool = false, coverage: CGFloat) {
+            self.kind = kind
+            self.top = top
+            self.under = under
+            self.isSeek = isSeek
+            self.coverage = coverage
+        }
+    }
+
+    private var entries: [StackEntry] = []
+    private var cards: [Int: Card] = [:]
+    private var transition: Transition?
+    private var displayLink: CADisplayLink?
+    private var environment = EnvironmentValues()
+    private var screen: (StackEntry) -> AnyView = { _ in AnyView(EmptyView()) }
+    private var decorate: (AnyView) -> AnyView = { $0 }
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        view.backgroundColor = .clear
+        view.clipsToBounds = true
+    }
+
+    override func viewDidLayoutSubviews() {
+        super.viewDidLayoutSubviews()
+        for subview in view.subviews { subview.frame = view.bounds }
+    }
+
+    override func viewDidDisappear(_ animated: Bool) {
+        super.viewDidDisappear(animated)
+        settle()
+    }
+
+    func update(
+        entries new: [StackEntry],
+        environment: EnvironmentValues,
+        screen: @escaping (StackEntry) -> AnyView,
+        decorate: @escaping (AnyView) -> AnyView
+    ) {
+        self.environment = environment
+        self.screen = screen
+        self.decorate = decorate
+        for card in cards.values { card.host.rootView = rootView(for: card) }
+        guard new != entries else { return }
+
+        settle()
+        let old = entries
+        let oldTop = old.last.flatMap { cards[$0.id] }
+        entries = new
+
+        let live = Set(new.map(\.id))
+        for (id, card) in cards where !live.contains(id) {
+            cards[id] = nil
+            // the old top may still have to animate out
+            if card !== oldTop { tearDown(card) }
+        }
+        for entry in new where cards[entry.id] == nil {
+            cards[entry.id] = makeCard(entry)
+        }
+        guard let newTop = new.last.flatMap({ cards[$0.id] }) else { return }
+        guard let oldTop, oldTop !== newTop else {
+            if oldTop == nil { attach(newTop) }
+            return
+        }
+
+        let isPush = !old.contains(newTop.entry)
+        guard view.window != nil, isPush || !live.contains(oldTop.entry.id) else {
+            attach(newTop)
+            leave(oldTop)
+            return
+        }
+        if isPush {
+            let kind: Transition.Kind = newTop.entry.isDialog ? .rise : .slide
+            play(Transition(kind: kind, top: newTop, under: oldTop, coverage: 0), to: 1)
+        } else {
+            // closing a presented flow slides it down whole, whatever was pushed inside it
+            let closesPresented = old.drop(while: { $0 != newTop.entry }).dropFirst().contains(where: \.isDialog)
+            play(Transition(kind: closesPresented ? .rise : .slide, top: oldTop, under: newTop, coverage: 1), to: 0)
+        }
+    }
+
+    // MARK: Host back gesture
+
+    func beginBackSeek() -> Bool {
+        settle()
+        guard view.window != nil, entries.count > 1,
+              let top = cards[entries[entries.count - 1].id], !top.entry.isDialog,
+              let under = cards[entries[entries.count - 2].id] else { return false }
+        let transition = Transition(kind: .slide, top: top, under: under, isSeek: true, coverage: 1)
+        self.transition = transition
+        view.isUserInteractionEnabled = false
+        attach(under, below: top)
+        apply(transition)
+        return true
+    }
+
+    func seekBack(to progress: CGFloat) {
+        guard let transition, transition.isSeek, !transition.isAnimating else { return }
+        transition.coverage = 1 - progress
+        apply(transition)
+    }
+
+    /// Commits the pop here; the navigator drops the same entry right after.
+    func finishBackSeek() -> Bool {
+        guard let transition, transition.isSeek, !transition.isAnimating else { return false }
+        entries.removeLast()
+        cards[transition.top.entry.id] = nil
+        animate(transition, to: 0)
+        return true
+    }
+
+    func cancelBackSeek() {
+        guard let transition, transition.isSeek, !transition.isAnimating else { return }
+        animate(transition, to: 1)
+    }
+
+    // MARK: Transitions
+
+    private func play(_ transition: Transition, to target: CGFloat) {
+        self.transition = transition
+        view.isUserInteractionEnabled = false
+        if transition.top.host.view.superview !== view { attach(transition.top) }
+        attach(transition.under, below: transition.top)
+        apply(transition)
+        animate(transition, to: target)
+    }
+
+    /// The rest of the way plays at full-transition pace, so a released drag keeps its speed.
+    private func animate(_ transition: Transition, to target: CGFloat) {
+        transition.from = transition.coverage
+        transition.target = target
+        transition.duration = STACK_TRANSITION_DURATION * Double(abs(target - transition.coverage))
+        transition.startTime = nil
+        transition.isAnimating = true
+        guard transition.duration > 0 else {
+            finish(transition)
+            return
+        }
+        startDisplayLink()
+    }
+
+    @objc private func tick(_ link: CADisplayLink) {
+        guard let transition, transition.isAnimating else {
+            stopDisplayLink()
+            return
+        }
+        // the clock starts on the first frame, so a heavy first layout doesn't eat the motion
+        let start = transition.startTime ?? link.targetTimestamp
+        transition.startTime = start
+        let fraction = min(max((link.targetTimestamp - start) / transition.duration, 0), 1)
+        // linear for the stack: the gesture maps the finger straight onto this timeline
+        let eased = transition.kind == .rise ? fastOutSlowIn(CGFloat(fraction)) : CGFloat(fraction)
+        transition.coverage = fraction >= 1
+            ? transition.target
+            : transition.from + (transition.target - transition.from) * eased
+        apply(transition)
+        if fraction >= 1 { finish(transition) }
+    }
+
+    /// Jumps a running transition to its end; an unreleased drag snaps back.
+    private func settle() {
+        guard let transition else { return }
+        if transition.isSeek, !transition.isAnimating { transition.target = 1 }
+        transition.coverage = transition.target
+        apply(transition)
+        finish(transition)
+    }
+
+    private func finish(_ transition: Transition) {
+        transition.isAnimating = false
+        if self.transition === transition { self.transition = nil }
+        stopDisplayLink()
+        view.isUserInteractionEnabled = true
+        transition.top.motion.state = CardMotion.State()
+        transition.under.motion.state = CardMotion.State()
+        leave(transition.target >= 1 ? transition.under : transition.top)
+    }
+
+    private func apply(_ transition: Transition) {
+        let size = view.bounds.size
+        let coverage = transition.coverage
+        switch transition.kind {
+        case .slide:
+            transition.top.motion.state = CardMotion.State(
+                offset: CGSize(width: (1 - coverage) * size.width, height: 0),
+                shadow: EDGE_SHADOW_MAX_ALPHA * coverage
+            )
+            transition.under.motion.state = CardMotion.State(
+                offset: CGSize(width: -PARALLAX_RATIO * size.width * coverage, height: 0),
+                scrim: SCRIM_MAX_ALPHA * coverage
+            )
+        case .rise:
+            transition.top.motion.state = CardMotion.State(offset: CGSize(width: 0, height: (1 - coverage) * size.height))
+        }
+    }
+
+    private func startDisplayLink() {
+        guard displayLink == nil else { return }
+        let link = CADisplayLink(target: self, selector: #selector(tick))
+        link.preferredFrameRateRange = CAFrameRateRange(minimum: 60, maximum: 120, preferred: 120)
+        link.add(to: .main, forMode: .common)
+        displayLink = link
+    }
+
+    private func stopDisplayLink() {
+        displayLink?.invalidate()
+        displayLink = nil
+    }
+
+    // MARK: Cards
+
+    private func makeCard(_ entry: StackEntry) -> Card {
+        let card = Card(entry: entry)
+        let host = UIHostingController(rootView: rootView(for: card))
+        host.view.backgroundColor = .clear
+        addChild(host)
+        host.didMove(toParent: self)
+        card.host = host
+        return card
+    }
+
+    /// The card's own environment is the container's (host environment objects included), with
+    /// the kit's re-applied on top; the screen itself is built once and never re-run from here.
+    private func rootView(for card: Card) -> AnyView {
+        let entry = card.entry
+        let screen = screen
+        let content = StackCard(motion: card.motion) {
+            StackCardContent(id: entry.id) { screen(entry) }.equatable()
+        }
+        return AnyView(decorate(AnyView(content)).environment(\.self, environment))
+    }
+
+    private func attach(_ card: Card, below other: Card? = nil) {
+        let hostView: UIView = card.host.view
+        hostView.frame = view.bounds
+        if let other, other.host.view.superview === view {
+            view.insertSubview(hostView, belowSubview: other.host.view)
+        } else {
+            view.addSubview(hostView)
+        }
+    }
+
+    /// Off the window while covered, released once off the stack.
+    private func leave(_ card: Card) {
+        if cards[card.entry.id] === card {
+            card.host.view.removeFromSuperview()
+        } else {
+            tearDown(card)
+        }
+    }
+
+    private func tearDown(_ card: Card) {
+        card.host.willMove(toParent: nil)
+        card.host.view.removeFromSuperview()
+        card.host.removeFromParent()
+    }
+}
+
+// MARK: - Card
+
+final class CardMotion: ObservableObject {
+    struct State: Equatable {
+        var offset: CGSize = .zero
+        var scrim: CGFloat = 0
+        var shadow: CGFloat = 0
+    }
+
+    @Published var state = State()
+}
+
+/// Compose's `StackTransitionDecor`: the covered-screen scrim and the top card's left-edge shadow.
+private struct StackCard<Content: View>: View {
+    @ObservedObject var motion: CardMotion
+    let content: Content
+
+    init(motion: CardMotion, @ViewBuilder content: () -> Content) {
+        self.motion = motion
+        self.content = content()
+    }
+
+    var body: some View {
+        let state = motion.state
+        content
+            .overlay {
+                Colors.pink09.opacity(state.scrim)
+                    .ignoresSafeArea()
+                    .allowsHitTesting(false)
+            }
+            .background(alignment: .leading) {
+                LinearGradient(colors: [.clear, Colors.black20], startPoint: .leading, endPoint: .trailing)
+                    .frame(width: EDGE_SHADOW_WIDTH)
+                    .offset(x: -EDGE_SHADOW_WIDTH)
+                    .opacity(state.shadow)
+                    .ignoresSafeArea()
+                    .allowsHitTesting(false)
+            }
+            .offset(state.offset)
+    }
+}
+
+/// Equal by entry, so a motion frame or a root refresh never re-runs the screen body.
+private struct StackCardContent: View, Equatable {
+    let id: Int
+    let build: () -> AnyView
+
+    static func == (lhs: Self, rhs: Self) -> Bool { lhs.id == rhs.id }
+
+    var body: some View { build() }
+}
+
+/// Compose's `FastOutSlowInEasing`, cubic-bezier(0.4, 0, 0.2, 1).
+private func fastOutSlowIn(_ t: CGFloat) -> CGFloat {
+    func bezier(_ s: CGFloat, _ p1: CGFloat, _ p2: CGFloat) -> CGFloat {
+        3 * (1 - s) * (1 - s) * s * p1 + 3 * (1 - s) * s * s * p2 + s * s * s
+    }
+    var low: CGFloat = 0
+    var high: CGFloat = 1
+    for _ in 0..<20 {
+        let mid = (low + high) / 2
+        if bezier(mid, 0.4, 0.2) < t { low = mid } else { high = mid }
+    }
+    return bezier((low + high) / 2, 0, 1)
+}

package/ios/Navigation/SwipeBackHaptic.swift

@@ -0,0 +1,33 @@
+//
+//  SwipeBackHaptic.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `navigation/SwipeBackHaptic.kt`: one light tick when the host back
+//  gesture has dragged the screen 50pt, re-armed once it goes back under.
+//
+
+import UIKit
+
+struct SwipeBackHaptic {
+    // Unscaled, so the tick lands at the same physical distance on every device.
+    private static let threshold: CGFloat = 50
+
+    private var fired = false
+
+    mutating func update(travelled: CGFloat, maxApi: MaxApi?) {
+        if travelled >= Self.threshold, !fired {
+            fired = true
+            if let maxApi {
+                maxApi.triggerEventVibration("light")
+            } else {
+                UIImpactFeedbackGenerator(style: .light).impactOccurred()
+            }
+        } else if travelled < Self.threshold {
+            fired = false
+        }
+    }
+
+    mutating func reset() {
+        fired = false
+    }
+}

package/ios/{Application/Navigation → Navigation}/Tracking/ScreenTracker.swift

@@ -9,7 +9,7 @@
 import Foundation
 
 public final class ScreenTrackingState {
-    public var time: Double = Date().timeIntervalSince1970 * 1000
+    public var time: Double = ScreenTracker.now()
     public var releaseNavigated: Bool = false
     public var releaseLoad: Bool = false
     public var releaseInteraction: Bool = false
@@ -22,6 +22,12 @@ public final class ScreenTrackingState {
 public enum ScreenTracker {
     private static var lastScreenName: String?
 
+    /// Epoch milliseconds, the clock Compose tracks with.
+    public static func now() -> Double { Date().timeIntervalSince1970 * 1000 }
+
+    /// Compose sends whole milliseconds (`Long`).
+    private static func millis(_ value: Double) -> Int64 { Int64(value.rounded()) }
+
     public static func trackScreenNavigated(
         maxApi: MaxApi?,
         context: MiniAppContext?,
@@ -35,7 +41,8 @@ public enum ScreenTracker {
         lastScreenName = screenName
 
         var params = buildBaseParams(context: context, screenName: screenName)
-        params["pre_screen_name"] = previousScreen
+        // keeps the key with a null value; a subscript assignment of nil would drop it
+        params.updateValue(previousScreen, forKey: "pre_screen_name")
         params["state"] = "navigated"
         params["action"] = action
         maxApi?.track(eventName: "auto_screen_navigated", params: params)
@@ -55,7 +62,7 @@ public enum ScreenTracker {
 
         var params = buildBaseParams(context: context, screenName: screenName)
         params["state"] = "load"
-        params["duration"] = duration
+        params["duration"] = millis(duration)
         maxApi?.track(eventName: "auto_screen_displayed", params: params)
 
         state.releaseLoad = true
@@ -73,8 +80,8 @@ public enum ScreenTracker {
 
         var params = buildBaseParams(context: context, screenName: screenName)
         params["state"] = "interaction"
-        params["duration"] = duration
-        params["total_duration"] = totalDuration
+        params["duration"] = millis(duration)
+        params["total_duration"] = millis(totalDuration)
         maxApi?.track(eventName: "auto_screen_interacted", params: params)
 
         state.releaseInteraction = true

package/ios/OTPKeyboard/OTPKeyboard.swift

@@ -65,21 +65,18 @@ public struct OTPKeyboard: View {
             HStack {
                 KeyboardButton("", action: self.onPressKey).disabled(true).opacity(0)
                 KeyboardButton("0", action: self.onPressKey)
+                // Frame inside the label so the whole key is tappable, not just the glyph.
                 SwiftUI.Button(action: onPressBack) {
-                    HStack {
-                        Image(
-                            systemName: "delete.backward"
-                        ).foregroundColor(Colors.text)
-                    }
-                }.frame(maxWidth: .infinity, minHeight: 48)
-                    .clipShape(RoundedRectangle(cornerRadius: 8))
+                    Image(systemName: "delete.backward")
+                        .foregroundColor(Colors.text)
+                        .frame(maxWidth: .infinity, minHeight: 48)
+                        .contentShape(Rectangle())
+                }
             }
         }
         .background(Colors.background)
         .valueChanged(value: value) { otp in
-            if onChange != nil {
-                self.onChange!(otp)
-            }
+            onChange?(otp)
         }
     }
 
@@ -128,7 +125,7 @@ private struct ValueView: View {
 
     public var body: some View {
         return HStack {
-            ForEach(0 ..< valueLength, id: \.self) { i in
+            ForEach(0 ..< max(valueLength, 0), id: \.self) { i in
                 if i < value.count {
                     Circle().foregroundColor(Colors.text).frame(width: 8, height: 8)
                 } else {

package/ios/Pagination/PaginationScroll.swift

@@ -14,10 +14,10 @@ import SwiftUI
 private let INDICATOR_WIDTH: CGFloat = 24
 private let PROGRESS_WIDTH: CGFloat = 72
 
-/// Memoized offset calculation, mirroring Compose's `calculateOffset`.
+/// Mirrors Compose's `calculateOffset`; clamped because UIKit bounce overshoots the scroll range.
 private func calculateOffset(currentPosition: CGFloat, maxBound: CGFloat) -> CGFloat {
     guard maxBound > 0 else { return 0 }
-    return (PROGRESS_WIDTH - INDICATOR_WIDTH) * (currentPosition / maxBound)
+    return (PROGRESS_WIDTH - INDICATOR_WIDTH) * min(max(currentPosition / maxBound, 0), 1)
 }
 
 // MARK: - PaginationScroll