@momo-kits/native-kits 0.152.4-beta.2 → 0.152.4-beta.3

package/ios/Application/HeaderRight.swift

@@ -0,0 +1,271 @@
+import SwiftUI
+import Foundation
+
+public struct HeaderRightData {
+    var useShortcut: Bool
+    var useMore: Bool
+    var tools: [ToolGroup]
+    var toolCallback: ((String) -> Void)?
+    var useSystemTools: Bool
+    
+    public init(
+        useShortcut: Bool = false,
+        useMore: Bool = false,
+        tools: [ToolGroup] = [],
+        toolCallback: ((String) -> Void)? = nil,
+        useSystemTools: Bool = true
+    ) {
+        self.useShortcut = useShortcut
+        self.useMore = useMore
+        self.tools = tools
+        self.toolCallback = toolCallback
+        self.useSystemTools = useSystemTools
+    }
+}
+
+public struct Tool {
+    var key: String
+    var icon: String
+    var showBadge: Bool
+    var name: [String: String]
+    var showRightIcon: Bool
+    
+    public init(
+        key: String,
+        icon: String,
+        name: [String: String] = [:],
+        showBadge: Bool = false,
+        showRightIcon: Bool = true
+    ) {
+        self.key = key
+        self.icon = icon
+        self.showBadge = showBadge
+        self.name = name
+        self.showRightIcon = showRightIcon
+    }
+    
+    func toMap() -> [String: Any] {
+        return [
+            "key": key,
+            "icon": icon,
+            "showBadge": showBadge,
+            "name": name,
+            "showRightIcon": showRightIcon
+        ]
+    }
+}
+
+public struct ToolGroup {
+    var title: [String: String]
+    var items: [Tool]
+    
+    public init(
+        title: [String: String] = [:],
+        items: [Tool]
+    ) {
+        self.title = title
+        self.items = items
+    }
+    
+    func toMap() -> [String: Any] {
+        return [
+            "title": title,
+            "items": items.map { $0.toMap() }
+        ]
+    }
+}
+
+struct NavigationButtonConfig {
+    let icon: String
+    let onPress: () -> Void
+}
+
+// MARK: - Components
+public struct HeaderRight: View {
+    public init(headerRight: HeaderRightData? = nil, tintColor: Color? = nil) {
+        self.headerRight = headerRight
+        self.tintColor = tintColor
+    }
+    var headerRight: HeaderRightData?
+    var tintColor: Color? = nil
+    
+    public var body: some View {
+        HStack(alignment: .center) {
+            ToolkitHeaderRight(headerRight: headerRight, tintColor: tintColor)
+        }
+    }
+}
+
+struct ToolkitHeaderRight: View {
+    var headerRight: HeaderRightData?
+    var tintColor: Color?
+    @State private var isFavorite: Bool = false
+    @State private var isLoading: Bool = false
+    @EnvironmentObject private var environment: ApplicationEnvironment
+    
+    // MARK: - Actions
+    private func onPressShortcut() {
+        environment.composeApi?.request(
+            funcName: "onToolAction",
+            params: ["item": ["key": "onFavorite"]]
+        ) { _ in
+            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
+        ) { _ in }
+    }
+    
+    private func onPressClose() {
+        environment.composeApi?.request(
+            funcName: "dismissAll",
+            params: ""
+        ) { _ in }
+    }
+    
+    private func onPressMore() {
+        let context = environment.applicationContext
+        let params: [String: Any] = [
+            "useSystemTools": headerRight?.useSystemTools,
+            "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
+            ]
+        ]
+        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)
+            }
+        }
+    }
+    
+    private func getNavigationButtonConfig() -> NavigationButtonConfig {
+        let totalTools = headerRight?.tools.reduce(0) { $0 + $1.items.count } ?? 0
+        var icon = isFavorite ? "pin_star_checked" : "pin_star"
+        var onClickHandler: () -> Void = onPressShortcut
+        
+        if totalTools > 1 || headerRight?.useMore == true {
+            icon = "navigation_more_icon"
+            onClickHandler = onPressMore
+        } else if totalTools == 1, let singleTool = headerRight?.tools.first?.items.first {
+            icon = singleTool.icon
+            onClickHandler = {
+                headerRight?.toolCallback?(singleTool.key)
+            }
+        }
+        
+        return NavigationButtonConfig(icon: icon, onPress: onClickHandler)
+    }
+    
+    var body: some View {
+        let backgroundButtonColor: Color = tintColor == Colors.black01 ? Colors.black20.opacity(0.6) : Colors.black01.opacity(0.6)
+        let borderColor: Color = tintColor == Colors.black01 ? Colors.black01.opacity(0.2) : Colors.black20.opacity(0.2)
+        let navButtonConfig = getNavigationButtonConfig()
+        let showBadge = headerRight?.tools.contains { group in
+            group.items.contains { $0.showBadge }
+        } ?? false
+        
+        HStack(alignment: .center, spacing: 0) {
+            if headerRight?.useShortcut == true {
+                NavigationButton(
+                    disabled: isLoading,
+                    icon: navButtonConfig.icon,
+                    showBadge: showBadge,
+                    onClick: navButtonConfig.onPress,
+                    tintColor: tintColor
+                )
+            }
+            
+            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)
+                
+                Icon(source: "16_basic_home", size: 20, color: tintColor ?? Colors.black17)
+                    .padding(4)
+                    .onTapGesture {
+                        onPressClose()
+                    }
+            }
+            .frame(width: 65, height: 28)
+            .background(backgroundButtonColor)
+            .cornerRadius(14)
+            .overlay(
+                RoundedRectangle(cornerRadius: 14)
+                    .stroke(borderColor, lineWidth: 0.2)
+            )
+            .padding(.leading, Spacing.S)
+        }
+    }
+}
+
+struct NavigationButton: View {
+    var disabled: Bool
+    var icon: String
+    var showBadge: Bool
+    var onClick: () -> Void
+    var tintColor: Color?
+    
+    var body: some View {
+        let backgroundButtonColor: Color = tintColor == Colors.black01 ? Colors.black20.opacity(0.6) : Colors.black01.opacity(0.6)
+        let borderColor: Color = tintColor == Colors.black01 ? Colors.black01.opacity(0.2) : Colors.black20.opacity(0.2)
+        
+        ZStack {
+            Circle()
+                .fill(backgroundButtonColor)
+                .overlay(
+                    Circle()
+                        .stroke(borderColor, lineWidth: 0.2)
+                )
+            
+            Icon(source: icon, size: 16, color: tintColor)
+            
+            if showBadge {
+                BadgeDot(size: .small)
+                    .offset(x: -2, y: -2)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
+            }
+        }
+        .frame(width: 28, height: 28)
+        .onTapGesture {
+            if !disabled {
+                onClick()
+            }
+        }
+    }
+}

package/ios/Application/Screen.swift

@@ -0,0 +1,249 @@
+//
+//  Screen.swift
+//  Pods
+//
+//  Created by sophia on 5/2/25.
+//
+
+import SwiftUI
+
+public struct Screen<Content: View>: View {
+    // MARK: - Properties
+    
+    var backgroundColor: Color?
+    var headerTransparent: Bool = false
+    var fullScreenContent: Bool = false
+    var tintColor: Color? = Colors.black17
+    var isBack: Bool
+    var headerType: HeaderType
+    var verticalAlignment: VerticalAlignment
+    var horizontalAlignment: HorizontalAlignment
+    var title: String
+    var titlePosition: TitlePosition
+    var goBack: (() -> Void)?
+    var scrollable: Bool
+    var onContentLayout: ((CGRect) -> Void)?
+    var useAvoidKeyboard: Bool
+    var footer: (() -> AnyView)?
+    var headerRight: (()->any View)? = {HeaderRight()}
+    var animatedHeader: AnimatedHeader? = nil
+    var layoutOffset: CGFloat
+    var inputSearchProps: InputSearchProps?
+    var fabProps: FabProps?
+    var content: () -> Content
+    
+    public init(
+        backgroundColor: Color? = nil,
+        headerTransparent: Bool = false,
+        fullScreenContent: Bool = false,
+        tintColor: Color = Colors.black17,
+        isBack: Bool = true,
+        headerType: HeaderType = .default,
+        verticalAlignment: VerticalAlignment = .top,
+        horizontalAlignment: HorizontalAlignment = .leading,
+        title: String = "Stack",
+        titlePosition: TitlePosition = .left,
+        goBack: (() -> Void)? = nil,
+        scrollable: Bool = true,
+        onContentLayout: ((CGRect) -> Void)? = nil,
+        useAvoidKeyboard: Bool = true,
+        footer: (() -> AnyView)? = nil,
+        headerRight:  (()->any View)? = {HeaderRight()},
+        animatedHeader: AnimatedHeader? = nil,
+        layoutOffset: CGFloat = 56,
+        inputSearchProps: InputSearchProps? = nil,
+        fabProps: FabProps? = nil,
+        @ViewBuilder content: @escaping () -> Content
+    ) {
+        self.backgroundColor = backgroundColor
+        self.headerTransparent = headerTransparent
+        self.fullScreenContent = fullScreenContent
+        self.tintColor = tintColor
+        self.isBack = isBack
+        self.headerType = headerType
+        self.verticalAlignment = verticalAlignment
+        self.horizontalAlignment = horizontalAlignment
+        self.title = title
+        self.titlePosition = titlePosition
+        self.goBack = goBack
+        self.scrollable = scrollable
+        self.onContentLayout = onContentLayout
+        self.useAvoidKeyboard = useAvoidKeyboard
+        self.footer = footer
+        self.headerRight = headerRight
+        self.animatedHeader = animatedHeader
+        self.layoutOffset = layoutOffset
+        self.inputSearchProps = inputSearchProps
+        self.fabProps = fabProps
+        self.content = content
+    }
+    
+    @State private var scrollOffset: CGFloat = 0
+    @State private var keyboardHeight: CGFloat = 0
+    
+    // MARK: - Body
+    
+    public var body: some View {
+        GeometryReader { geometry in
+            let topInset = geometry.safeAreaInsets.top
+            let keyboardSize: CGFloat = useAvoidKeyboard ? max(keyboardHeight, 0) : 0
+            let height = geometry.size.height
+            let bottomInset = geometry.safeAreaInsets.bottom
+            let screenHeight = height + topInset + bottomInset
+            
+            ZStack(alignment: .top) {
+                // Background color
+                (backgroundColor ?? Color.white)
+                    .edgesIgnoringSafeArea(.all)
+                
+                VStack(spacing: 0) {
+                    ZStack(alignment: fabProps?.position == .center ? .bottom : .bottomTrailing) {
+                        VStack(alignment: horizontalAlignment, spacing: 0) {
+                            if animatedHeader != nil || (headerTransparent && fullScreenContent) {
+                                ZStack(alignment: .top) {
+                                    // MARK: - Header
+                                    Header(
+                                        headerType: headerType,
+                                        titlePosition: titlePosition,
+                                        title: title,
+                                        headerRight: headerRight,
+                                        goBack: goBack,
+                                        opacity: min(scrollOffset / 114, 1),
+                                        animatedHeader: animatedHeader,
+                                        scrollState: scrollOffset,
+                                        inputSearchProps: inputSearchProps,
+                                        tintColor: tintColor
+                                    )
+                                    
+                                    .background(
+                                        HeaderBackground(
+                                            headerType: headerType,
+                                            scrollState: scrollOffset,
+                                            headerTransparent: headerTransparent,
+                                            fullScreenContent: fullScreenContent
+                                            
+                                        )
+                                        .overlay(animatedHeader?.composable(scrollOffset)
+                                            .frame(maxWidth: .infinity)
+                                            .aspectRatio(animatedHeader?.aspectRatio.value, contentMode: .fill)
+                                        )
+                                    ).zIndex(100)
+                                    
+                                    VStack {
+                                        if scrollable {
+                                            ScrollView(.vertical, showsIndicators: false) {
+                                                VStack {
+                                                    content()
+                                                }
+                                                .background(GeometryReader { geo -> Color in
+                                                    DispatchQueue.main.async {
+                                                        self.scrollOffset = -geo.frame(in: .global).origin.y
+                                                    }
+                                                    return Color.clear
+                                                })
+                                            }
+                                        } else {
+                                            content()
+                                        }
+                                    }
+                                    .edgesIgnoringSafeArea(.all)
+                                }
+                            } else {
+                                // MARK: - Header
+                                Header(
+                                    headerType: headerType,
+                                    titlePosition: titlePosition,
+                                    title: title,
+                                    headerRight: headerRight,
+                                    goBack: goBack,
+                                    opacity: min(scrollOffset / 114, 1),
+                                    animatedHeader: animatedHeader,
+                                    scrollState: scrollOffset,
+                                    inputSearchProps: inputSearchProps,
+                                    tintColor: tintColor
+                                )
+                                .background(
+                                    HeaderBackground(
+                                        headerType: headerType,
+                                        scrollState: scrollOffset,
+                                        headerTransparent: headerTransparent,
+                                        fullScreenContent: fullScreenContent
+                                    )
+                                    .edgesIgnoringSafeArea(.top)
+                                )
+                                
+                                if scrollable {
+                                    ScrollView(.vertical, showsIndicators: false) {
+                                        VStack {
+                                            content()
+                                        }
+                                        .background(GeometryReader { geo -> Color in
+                                            DispatchQueue.main.async {
+                                                self.scrollOffset = -geo.frame(in: .global).origin.y
+                                            }
+                                            return Color.clear
+                                        })
+                                    }
+                                } else {
+                                    content()
+                                }
+                            }
+                        }
+                        
+                        if let fabProps = fabProps {
+                            FloatingButton(
+                                props: fabProps,
+                                keyboardOffset: useAvoidKeyboard ? keyboardSize : 0,
+                                scrollOffset: scrollOffset
+                            )
+                            .padding(.horizontal, Spacing.M)
+                        }
+                    }
+                    
+                    
+                    // MARK: - Footer
+                    if let footerView = footer?() {
+                        Footer(footerView: footerView, keyboardSize: keyboardSize)
+                    }
+                }
+            }
+        }
+    }
+    
+    // MARK: - Keyboard Handling
+    
+    private func observeKeyboard() {
+        NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillChangeFrameNotification, object: nil, queue: .main) { notification in
+            if useAvoidKeyboard,
+               let endFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect {
+                withAnimation(.easeOut(duration: 0.25)) {
+                    keyboardHeight = UIScreen.main.bounds.height - endFrame.origin.y
+                }
+            }
+        }
+    }
+}
+
+// MARK: - Footer
+
+struct Footer: View {
+    var footerView: AnyView
+    var keyboardSize: CGFloat
+
+    var body: some View {
+        VStack {
+            footerView
+        }
+        .padding(.vertical, Spacing.S)
+        .padding(.horizontal, Spacing.M)
+        .padding(.bottom, keyboardSize)
+        .background(Colors.black01)
+        .overlay(
+            Rectangle()
+                .fill(Colors.black20.opacity(0.1))
+                .frame(height: 4)
+                .shadow(color: Colors.black20.opacity(0.2), radius: 10, y: -2),
+            alignment: .top
+        )
+    }
+}

package/ios/Badge/BadgeDot.swift

@@ -0,0 +1,31 @@
+import SwiftUI
+
+public enum DotSize {
+    case small
+    case large
+    
+    var size: CGFloat {
+        switch self {
+        case .small: return 10
+        case .large: return 16
+        }
+    }
+}
+
+public struct BadgeDot: View {
+    var size: DotSize
+    
+    public init(size: DotSize = .large) {
+        self.size = size
+    }
+    
+    public var body: some View {
+        Circle()
+            .fill(Colors.red03)
+            .frame(width: size.size, height: size.size)
+            .overlay(
+                Circle()
+                    .stroke(Colors.black01, lineWidth: 1)
+            )
+    }
+}