@momo-kits/native-kits 0.163.1-beta.3 → 0.163.1-beta.5-debug

package/ios/Application/HeaderRight.swift

@@ -101,69 +101,98 @@ struct ToolkitHeaderRight: View {
     var tintColor: Color?
     @State private var isFavorite: Bool = false
     @State private var isLoading: Bool = false
-    @EnvironmentObject private var environment: ApplicationEnvironment
+    @Environment(\.applicationEnvironment) private var environment
+
+    private func apiValue(_ value: Any?) -> Any {
+        value ?? NSNull()
+    }
+
+    private var contextMap: [String: Any] {
+        let context = environment.applicationContext
+        return [
+            "appId": apiValue(context?.appId),
+            "code": apiValue(context?.appCode),
+            "name": apiValue(context?.appName),
+            "icon": apiValue(context?.appIcon),
+            "description": apiValue(context?.description),
+            "support": apiValue(context?.support),
+            "toolkitConfig": apiValue(context?.toolkitConfig),
+            "providerId": apiValue(context?.providerId),
+            "permissions": apiValue(context?.permissions)
+        ]
+    }
+
+    private var shouldShowShortcut: Bool {
+        headerRight?.useShortcut == true && !(headerRight?.useMore == true && environment.applicationContext == nil)
+    }
+
+    private func parseResponse(_ response: String) -> Any? {
+        guard let jsonData = response.data(using: .utf8),
+              let json = try? JSONSerialization.jsonObject(with: jsonData) as? [String: Any] else {
+            return nil
+        }
+        return json["response"]
+    }
     
     // MARK: - Actions
+    private func loadFavoriteState() {
+        environment.composeApi?.request(
+            funcName: "isFavoriteApp",
+            params: ["code": apiValue(environment.applicationContext?.appCode)]
+        ) { response in
+            if let isFavorite = parseResponse(response) as? Bool {
+                self.isFavorite = isFavorite
+            }
+        }
+    }
+
     private func onPressShortcut() {
         environment.composeApi?.request(
             funcName: "onToolAction",
-            params: ["item": ["key": "onFavorite"]]
-        ) { _ in
-            isFavorite.toggle()
+            params: [
+                "item": ["key": "onFavorite"],
+                "context": contextMap
+            ]
+        ) { response in
+            if let result = parseResponse(response) as? [String: Any],
+               result["success"] as? Bool == true {
+                isFavorite.toggle()
+            }
         }
     }
     
     private func onPressHelpCenter() {
-        let context = environment.applicationContext
-        let paramMap: [String: Any] = [
-            "appId": context?.appId,
-            "code": context?.appCode,
-            "name": context?.appName,
-            "icon": context?.appIcon,
-            "description": context?.description
-        ]
         environment.composeApi?.request(
             funcName: "showHelpCenter",
-            params: paramMap
+            params: [
+                "appId": apiValue(environment.applicationContext?.appId),
+                "code": apiValue(environment.applicationContext?.appCode),
+                "name": apiValue(environment.applicationContext?.appName),
+                "icon": apiValue(environment.applicationContext?.appIcon),
+                "description": apiValue(environment.applicationContext?.description)
+            ]
         ) { _ in }
     }
     
     private func onPressClose() {
         environment.composeApi?.request(
             funcName: "dismissAll",
-            params: ""
+            params: nil
         ) { _ in }
     }
     
     private func onPressMore() {
-        let context = environment.applicationContext
         let params: [String: Any] = [
-            "useSystemTools": headerRight?.useSystemTools,
+            "useSystemTools": headerRight?.useSystemTools ?? true,
             "tools": headerRight?.tools.map { $0.toMap() } ?? [],
-            "context": [
-                "appId": context?.appId,
-                "code": context?.appCode,
-                "name": context?.appName,
-                "icon": context?.appIcon,
-                "description": context?.description,
-                "support": context?.support,
-                "toolkitConfig": context?.toolkitConfig,
-                "providerId": context?.providerId,
-                "permissions": context?.permissions
-            ]
+            "context": contextMap
         ]
         environment.composeApi?.request(
             funcName: "showTools",
             params: params
         ) { response in
-            do {
-                if let jsonData = response.data(using: .utf8),
-                   let json = try JSONSerialization.jsonObject(with: jsonData) as? [String: Any],
-                   let toolResponse = json["response"] as? String {
-                    headerRight?.toolCallback?(toolResponse)
-                }
-            } catch {
-                print("Error parsing response:", error)
+            if let toolResponse = parseResponse(response) as? String {
+                headerRight?.toolCallback?(toolResponse)
             }
         }
     }
@@ -195,7 +224,7 @@ struct ToolkitHeaderRight: View {
         } ?? false
         
         HStack(alignment: .center, spacing: 0) {
-            if headerRight?.useShortcut == true {
+            if shouldShowShortcut {
                 NavigationButton(
                     disabled: isLoading,
                     icon: navButtonConfig.icon,
@@ -206,15 +235,17 @@ struct ToolkitHeaderRight: View {
             }
             
             HStack(alignment: .center, spacing: 0) {
-                Icon(source: "help_center", size: 20, color: tintColor ?? Colors.black17)
-                    .padding(4)
-                    .onTapGesture {
-                        onPressHelpCenter()
-                    }
-                
-                Rectangle()
-                    .fill(tintColor ?? Colors.black20)
-                    .frame(width: 0.5, height: 12)
+                if environment.applicationContext != nil {
+                    Icon(source: "help_center", size: 20, color: tintColor ?? Colors.black17)
+                        .padding(4)
+                        .onTapGesture {
+                            onPressHelpCenter()
+                        }
+                    
+                    Rectangle()
+                        .fill(tintColor ?? Colors.black20)
+                        .frame(width: 0.5, height: 12)
+                }
                 
                 Icon(source: "16_basic_home", size: 20, color: tintColor ?? Colors.black17)
                     .padding(4)
@@ -231,6 +262,9 @@ struct ToolkitHeaderRight: View {
             )
             .padding(.leading, Spacing.S)
         }
+        .onAppear {
+            loadFavoriteState()
+        }
     }
 }
 

package/ios/Application/Navigation/BottomTab/BottomTab.swift

@@ -0,0 +1,103 @@
+//
+//  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).
+//
+
+import SwiftUI
+
+@available(iOS 16.0, *)
+public struct BottomTab: View {
+    private let items: [BottomTabItem]
+    private let floatingButton: BottomTabFloatingButton?
+
+    @EnvironmentObject private var navigator: Navigator
+    @State private var selectedIndex: Int = 0
+
+    public init(items: [BottomTabItem], floatingButton: BottomTabFloatingButton? = nil) {
+        self.items = items
+        self.floatingButton = floatingButton
+    }
+
+    private var bottomInset: CGFloat { safeAreaBottomInset() }
+    private var reservedBottom: CGFloat { BOTTOM_TAB_BAR_HEIGHT + bottomInset + Spacing.S }
+
+    public var body: some View {
+        ZStack(alignment: .bottom) {
+            // Tab content area, inset above the bar.
+            ZStack {
+                ForEach(items.indices, id: \.self) { index in
+                    if index == selectedIndex {
+                        tabScreen(for: index)
+                            .transition(.scale(scale: 0.97).combined(with: .opacity))
+                    }
+                }
+            }
+            .padding(.bottom, reservedBottom)
+            .animation(.easeInOut(duration: 0.2), value: selectedIndex)
+
+            // Tab bar + home-indicator filler.
+            VStack(spacing: 0) {
+                BottomTabBar(
+                    items: items,
+                    floatingButton: floatingButton,
+                    selectedIndex: selectedIndex,
+                    onTabSelected: { index in
+                        if index != selectedIndex { selectedIndex = index }
+                    }
+                )
+                Colors.black01
+                    .frame(height: bottomInset + Spacing.S)
+            }
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .ignoresSafeArea(edges: .bottom)
+    }
+
+    @ViewBuilder
+    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() }
+        )
+    }
+}
+
+/// Bottom safe-area inset (home indicator).
+@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)
+}

package/ios/Application/Navigation/BottomTab/BottomTabBar.swift

@@ -0,0 +1,215 @@
+//
+//  BottomTabBar.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `BottomTabBar` (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).
+//
+
+import SwiftUI
+
+// MARK: - Models
+
+/// Mirrors Compose's `BottomTabItem`.
+public struct BottomTabItem: Identifiable {
+    public let id = UUID()
+    public let name: String
+    public let label: String
+    public let icon: String
+    public let showDot: Bool
+    public let badgeLabel: String?
+    public let options: NavigationOptions?
+    public let screen: () -> AnyView
+
+    public init(
+        name: String,
+        label: String,
+        icon: String,
+        showDot: Bool = false,
+        badgeLabel: String? = nil,
+        options: NavigationOptions? = nil,
+        @ViewBuilder screen: @escaping () -> some View
+    ) {
+        self.name = name
+        self.label = label
+        self.icon = icon
+        self.showDot = showDot
+        self.badgeLabel = badgeLabel
+        self.options = options
+        self.screen = { AnyView(screen()) }
+    }
+}
+
+/// Mirrors Compose's `BottomTabFloatingButton`.
+public struct BottomTabFloatingButton {
+    public let icon: String
+    public let label: String
+    public let onPress: () -> Void
+
+    public init(icon: String, label: String, onPress: @escaping () -> Void) {
+        self.icon = icon
+        self.label = label
+        self.onPress = onPress
+    }
+}
+
+let bottomTabFloatingButtonWidth: CGFloat = 75
+let BOTTOM_TAB_BAR_HEIGHT: CGFloat = 64
+
+// MARK: - Tab bar
+
+struct BottomTabBar: View {
+    let items: [BottomTabItem]
+    let floatingButton: BottomTabFloatingButton?
+    let selectedIndex: Int
+    let onTabSelected: (Int) -> Void
+
+    private var screenWidth: CGFloat { UIScreen.main.bounds.width }
+    private var mid: Int { items.count / 2 }
+
+    private var tabWidth: CGFloat {
+        if floatingButton != nil {
+            return (screenWidth - bottomTabFloatingButtonWidth) / CGFloat(items.count)
+        }
+        return screenWidth / CGFloat(items.count)
+    }
+
+    private var indicatorOffset: CGFloat {
+        let adjust: CGFloat = (floatingButton != nil && selectedIndex >= mid) ? bottomTabFloatingButtonWidth : 0
+        return tabWidth * CGFloat(selectedIndex) + tabWidth / 2 - screenWidth / 2 + adjust
+    }
+
+    var body: some View {
+        ZStack(alignment: .bottom) {
+            HStack(spacing: 0) {
+                if floatingButton == nil {
+                    tabItems(from: 0, to: items.count)
+                } else {
+                    tabItems(from: 0, to: mid)
+                    Spacer()
+                        .frame(width: bottomTabFloatingButtonWidth)
+                        .padding(.horizontal, Spacing.XXS)
+                    tabItems(from: mid, to: items.count)
+                }
+            }
+            .frame(maxWidth: .infinity)
+            .frame(height: BOTTOM_TAB_BAR_HEIGHT)
+            .background(Colors.black01)
+
+            // Animated selection indicator.
+            RoundedRectangle(cornerRadius: 2)
+                .fill(Colors.primary)
+                .frame(width: 44, height: 2)
+                .offset(x: indicatorOffset, y: -BOTTOM_TAB_BAR_HEIGHT + 2)
+                .animation(.easeInOut(duration: 0.25), value: selectedIndex)
+
+            // Top shadow.
+            LinearGradient(
+                colors: [Color.black.opacity(0.05), .clear],
+                startPoint: .bottom,
+                endPoint: .top
+            )
+            .frame(height: 6)
+            .frame(maxWidth: .infinity)
+            .offset(y: -BOTTOM_TAB_BAR_HEIGHT)
+
+            if let floatingButton {
+                CenterFloatingButton(data: floatingButton)
+            }
+        }
+    }
+
+    @ViewBuilder
+    private func tabItems(from: Int, to: Int) -> some View {
+        ForEach(from..<to, id: \.self) { index in
+            TabBarItem(
+                item: items[index],
+                selected: index == selectedIndex,
+                onClick: { onTabSelected(index) }
+            )
+            .frame(maxWidth: .infinity)
+        }
+    }
+}
+
+// MARK: - Tab item
+
+private struct TabBarItem: View {
+    let item: BottomTabItem
+    let selected: Bool
+    let onClick: () -> Void
+
+    private var tintColor: Color { selected ? Colors.primary : Colors.black10 }
+
+    /// Mirrors Compose's `formatLabel`: hide a badge that is the number "0".
+    private var badgeLabel: String? {
+        guard let label = item.badgeLabel else { return nil }
+        if let n = Int(label), n == 0 { return nil }
+        return label
+    }
+
+    var body: some View {
+        ZStack(alignment: .topTrailing) {
+            VStack(spacing: 0) {
+                Icon(source: item.icon, size: 28, color: tintColor)
+                    .padding(Spacing.XS)
+                MomoText(
+                    item.label,
+                    typography: selected ? .labelXsMedium : .descriptionXsRegular,
+                    color: tintColor,
+                    textAlign: .center,
+                    maxLines: 1
+                )
+                    .truncationMode(.tail)
+            }
+            .frame(maxWidth: .infinity, maxHeight: .infinity)
+            .padding(.horizontal, Spacing.S)
+            .padding(.vertical, Spacing.S)
+
+            if let badgeLabel {
+                if badgeLabel.isEmpty {
+                    BadgeDot(size: .small)
+                        .offset(x: -Spacing.S, y: Spacing.XS)
+                } else {
+                    Badge(label: badgeLabel)
+                        .offset(x: -Spacing.XS, y: 0)
+                }
+            } else if item.showDot {
+                BadgeDot(size: .small)
+                    .offset(x: -Spacing.S, y: Spacing.XS)
+            }
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .padding(.horizontal, Spacing.XXS)
+        .contentShape(Rectangle())
+        .onTapGesture { onClick() }
+    }
+}
+
+// MARK: - Center floating button
+
+private struct CenterFloatingButton: View {
+    let data: BottomTabFloatingButton
+
+    var body: some View {
+        VStack(spacing: 0) {
+            CurvedContainer()
+            Circle()
+                .fill(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)
+                .clipShape(RoundedRectangle(cornerRadius: Radius.XL))
+        }
+        .frame(width: bottomTabFloatingButtonWidth)
+        .padding(.horizontal, Spacing.XXS)
+        .padding(.vertical, Spacing.S)
+        .contentShape(Rectangle())
+        .onTapGesture { data.onPress() }
+    }
+}

package/ios/Application/Navigation/BottomTab/CurvedContainer.swift

@@ -0,0 +1,65 @@
+//
+//  CurvedContainer.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `CurvedContainer` (navigation/bottomtab/CurvedContainer.kt).
+//  Draws the surface-colored notch that sits behind the center floating button,
+//  carving a circular cut-out into the tab bar's top edge.
+//
+
+import SwiftUI
+
+struct CurvedContainer: View {
+    var circleSize: CGFloat = 48
+    var tabBarItemIconSize: CGFloat = 28
+    var circleOverSize: CGFloat = 2
+    var width: CGFloat = 71
+    var height: CGFloat = 16
+    var color: Color = Colors.black01
+
+    var body: some View {
+        let circlePositionTop = circleSize - tabBarItemIconSize - 10
+        let circleOverTop = circlePositionTop + circleOverSize
+        let circleR = circleSize / 2
+        let circleOverR = circleR + circleOverSize
+        let centerX = width / 2
+
+        CurvedShape(circleOverTop: circleOverTop, centerX: centerX, circleOverR: circleOverR, width: width)
+            .fill(color)
+            .frame(width: width, height: height)
+            .offset(y: 24)
+            .zIndex(-1)
+    }
+}
+
+/// Mirrors Compose's `getPath`: a flat bar with a smooth circular dip in the
+/// middle, sized to cradle the floating button.
+private struct CurvedShape: Shape {
+    let circleOverTop: CGFloat
+    let centerX: CGFloat
+    let circleOverR: CGFloat
+    let width: CGFloat
+
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+        path.move(to: CGPoint(x: 0, y: circleOverTop))
+        path.addLine(to: CGPoint(x: centerX - circleOverR - 40, y: circleOverTop))
+
+        path.addCurve(
+            to: CGPoint(x: centerX, y: 0),
+            control1: CGPoint(x: centerX - circleOverR, y: circleOverTop),
+            control2: CGPoint(x: centerX - circleOverR, y: 0)
+        )
+        path.addCurve(
+            to: CGPoint(x: centerX + circleOverR + 40, y: circleOverTop),
+            control1: CGPoint(x: centerX + circleOverR, y: 0),
+            control2: CGPoint(x: centerX + circleOverR, y: circleOverTop)
+        )
+
+        path.addLine(to: CGPoint(x: width, y: circleOverTop))
+        path.addLine(to: CGPoint(x: width, y: 60))
+        path.addLine(to: CGPoint(x: 0, y: 60))
+        path.closeSubpath()
+        return path
+    }
+}

package/ios/Application/Navigation/HeaderBackProps.swift

@@ -0,0 +1,66 @@
+//
+//  HeaderBackProps.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `HeaderBackProps` + `PopupNotifyProps`/`PopupAction`.
+//  When `preventBack` is set, `Navigator.onBackSafe` shows a confirm popup
+//  before actually leaving the screen — same behavior as Compose.
+//
+
+import SwiftUI
+
+/// Mirrors Compose's `PopupAction` (a titled button with an optional handler).
+public struct PopupAction {
+    public let title: String
+    public let onPress: (() -> Void)?
+
+    public init(title: String, onPress: (() -> Void)? = nil) {
+        self.title = title
+        self.onPress = onPress
+    }
+}
+
+/// Mirrors Compose's `PopupNotifyProps` as consumed by `headerBackProps.preventBack`.
+public struct PreventBackProps {
+    public var image: String
+    public var title: String
+    public var description: String
+    public var error: String
+    public var primary: PopupAction?
+    public var secondary: PopupAction?
+    public var buttonDirection: PopupButtonDirection
+    public var isShowCloseIcon: Bool
+    public var onIconClose: (() -> Void)?
+
+    public init(
+        image: String = "",
+        title: String = "",
+        description: String = "",
+        error: String = "",
+        primary: PopupAction? = nil,
+        secondary: PopupAction? = nil,
+        buttonDirection: PopupButtonDirection = .row,
+        isShowCloseIcon: Bool = true,
+        onIconClose: (() -> Void)? = nil
+    ) {
+        self.image = image
+        self.title = title
+        self.description = description
+        self.error = error
+        self.primary = primary
+        self.secondary = secondary
+        self.buttonDirection = buttonDirection
+        self.isShowCloseIcon = isShowCloseIcon
+        self.onIconClose = onIconClose
+    }
+}
+
+/// Mirrors Compose's `HeaderBackProps`.
+public struct HeaderBackProps {
+    /// When non-nil, a confirm popup is shown before the back navigation runs.
+    public var preventBack: PreventBackProps?
+
+    public init(preventBack: PreventBackProps? = nil) {
+        self.preventBack = preventBack
+    }
+}

package/ios/Application/Navigation/HeaderTitle.swift

@@ -0,0 +1,57 @@
+//
+//  HeaderTitle.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `sealed class HeaderTitle` (navigation/component/Header.kt).
+//  The header can show either a plain title (`.default`) or a rich "user" title
+//  with an avatar group, subtitle, inline icons and a status dot (`.user`).
+//  (Compose's `Location`/`Journey` variants are not rendered yet, so they are
+//  omitted here for parity with the implemented `HeaderUser`.)
+//
+
+import SwiftUI
+
+/// Data backing a `.user` header title (mirrors `HeaderTitle.User`).
+public struct HeaderUserData {
+    public var title: String
+    public var subTitle: String?
+    public var image: [String]?
+    public var dotColor: Color?
+    public var tintColor: Color?
+    public var onPress: (() -> Void)?
+    public var icons: [String]
+    public var isLoading: Bool
+
+    public init(
+        title: String,
+        subTitle: String? = nil,
+        image: [String]? = nil,
+        dotColor: Color? = nil,
+        tintColor: Color? = nil,
+        onPress: (() -> Void)? = nil,
+        icons: [String] = [],
+        isLoading: Bool = false
+    ) {
+        self.title = title
+        self.subTitle = subTitle
+        self.image = image
+        self.dotColor = dotColor
+        self.tintColor = tintColor
+        self.onPress = onPress
+        self.icons = icons
+        self.isLoading = isLoading
+    }
+}
+
+/// Mirrors Compose's `HeaderTitle` sealed class.
+public enum HeaderTitle {
+    case `default`(String)
+    case user(HeaderUserData)
+
+    /// Plain title text, when this is a `.default` title (used by the legacy
+    /// string-based `Header`/`NavigationOptions` paths).
+    public var defaultTitle: String? {
+        if case let .default(text) = self { return text }
+        return nil
+    }
+}