@momo-kits/native-kits 0.151.2-test.8 → 0.152.1-beta.1

package/ios/Application/Components.swift

@@ -7,6 +7,8 @@
 
 import SwiftUI
 
+// MARK: - Enums
+
 public enum TitlePosition {
     case left, center
 }
@@ -15,20 +17,41 @@ public enum HeaderType {
     case `default`, extended, none
 }
 
+public enum AnimatedHeaderRatio {
+    case ratio16_9
+    case ratio1_1
+    case ratio3_2
+
+    var value: CGFloat {
+        switch self {
+        case .ratio16_9: return 16.0 / 9.0
+        case .ratio1_1:  return 1.0
+        case .ratio3_2:  return 3.0 / 2.0
+        }
+    }
+}
+
+
+// MARK: - Animated Header Config
 
 public struct AnimatedHeader {
-    public var type: HeaderType = .default
-    public var composable: (_ scrollState: Int) -> AnyView = { _ in AnyView(EmptyView()) }
-    
+    public var aspectRatio: AnimatedHeaderRatio = .ratio16_9
+    public var isSurface: Bool = true
+    public var composable: (_ scrollState: CGFloat) -> AnyView = { _ in AnyView(EmptyView()) }
+
     public init(
-        type: HeaderType = .default,
-        composable: @escaping (_ scrollState: Int) -> AnyView = { _ in AnyView(EmptyView()) }
+        aspectRatio: AnimatedHeaderRatio = .ratio16_9,
+        isSurface: Bool = true,
+        composable: @escaping (_ scrollState: CGFloat) -> AnyView = { _ in AnyView(EmptyView()) }
     ) {
-        self.type = type
+        self.aspectRatio = aspectRatio
+        self.isSurface = isSurface
         self.composable = composable
     }
 }
 
+// MARK: - Utils
+
 func safeAreaTopInset() -> CGFloat {
     if #available(iOS 15.0, *) {
         return UIApplication.shared.connectedScenes
@@ -41,12 +64,13 @@ func safeAreaTopInset() -> CGFloat {
     }
 }
 
+// MARK: - Header Background
 
 public struct HeaderBackground: View {
     var headerType: HeaderType = .default
     var scrollState: CGFloat
     var isTransparent: Bool = false
-    
+
     public init(
         headerType: HeaderType = .default,
         scrollState: CGFloat = 0,
@@ -60,83 +84,88 @@ public struct HeaderBackground: View {
     public var body: some View {
         
         let statusBarHeight = safeAreaTopInset()
-        
-        let opacity = 1 - CGFloat(scrollState) / 200
+        let opacity = max(0, 1 - scrollState / 200)
+        let height = statusBarHeight + 52
         let backgroundColor = isTransparent ? Color.clear : Colors.black01
-        
+
         Group {
-            if headerType == .default {
-                let height = statusBarHeight + 52
-                ZStack {
-                    
+            switch headerType {
+            case .default:
+                ZStack(alignment: .bottom) {
                     Rectangle()
                         .fill(backgroundColor)
+                        .opacity(isTransparent ? 0 : opacity)
                         .frame(height: height)
                         .shadow(color: Colors.black20.opacity(0.2), radius: 10, x: 0, y: -2)
+                        .background(Colors.black01)
                         .overlay(
-                            isTransparent ? nil :
-                            Rectangle()
-                            .fill(LinearGradient(
-                                gradient: Gradient(colors: [
-                                    Color(red: 1, green: 0.8, blue: 0.87),
-                                    Color(red: 1, green: 0.8, blue: 0.87).opacity(0.5)
-                                ]),
-                                startPoint: .top,
-                                endPoint: .bottom))
-                                .opacity(opacity)
-                                .frame(height: height))
-                        .overlay(
-                            isTransparent ? nil :
-                            Rectangle()
-                            .fill(Colors.black04)
+                            isTransparent ? AnyView(EmptyView()) :
+                            AnyView(
+                                Rectangle()
+                                    .fill(LinearGradient(
+                                        gradient: Gradient(colors: [
+                                            Color(red: 1, green: 0.8, blue: 0.87),
+                                            Color(red: 1, green: 0.8, blue: 0.87).opacity(0.5)
+                                        ]),
+                                        startPoint: .top,
+                                        endPoint: .bottom))
+                                    .opacity(opacity)
+                                    .frame(height: height))
+                        )
+
+                    if !isTransparent {
+                        Rectangle()
+                            .fill(Color.black.opacity(0.1))
                             .frame(height: 1)
                             .frame(maxWidth: .infinity)
-                            .alignmentGuide(.bottom) { _ in 0 }, alignment: .bottom
-                        )
+                    }
                 }
-                .frame(maxWidth: .infinity)
-                
-            } else if headerType == .extended {
+
+            case .extended:
                 ZStack {
-                    isTransparent ? nil :
-                    Rectangle()
-                        .fill(LinearGradient(
+                    if !isTransparent {
+                        Colors.black01
+                        LinearGradient(
                             gradient: Gradient(colors: [
                                 Color(red: 1, green: 0.8, blue: 0.87),
                                 Color(red: 1, green: 0.8, blue: 0.87).opacity(0)
                             ]),
                             startPoint: .top,
-                            endPoint: .bottom))
+                            endPoint: .bottom
+                        )
                         .opacity(opacity)
                         .frame(height: 154)
+                    }
                 }
+
+            case .none:
+                EmptyView()
             }
         }
     }
-    
 }
 
+// MARK: - Header View
+
 public struct Header: View {
     var headerType: HeaderType = .default
     var titlePosition: TitlePosition
     var title: String
     var headerRight:  (()->any View)? = {HeaderRight()}
     var goBack: (() -> Void)?
-    var opacity: CGFloat? = nil
-    var animatedHeader: AnimatedHeader? = nil
+    var opacity: CGFloat = 1
+    var animatedHeader: AnimatedHeader?
     var scrollState: CGFloat = 0
-    var inputSearchProps: InputSearchProps? = nil
-    var tintColor: Color? = nil
-    
-    @State private var colorFraction: CGFloat = 0
-    
+    var inputSearchProps: InputSearchProps?
+    var tintColor: Color?
+
     public init(
         headerType: HeaderType = .default,
         titlePosition: TitlePosition,
         title: String,
         headerRight:  (()->any View)? = {HeaderRight()},
         goBack: (() -> Void)? = nil,
-        opacity: CGFloat? = nil,
+        opacity: CGFloat = 1,
         animatedHeader: AnimatedHeader? = nil,
         scrollState: CGFloat = 0,
         inputSearchProps: InputSearchProps? = nil,
@@ -161,78 +190,71 @@ public struct Header: View {
 
         if headerType != .none {
             VStack(spacing: 0) {
-                    ZStack {
-                        HStack {
-                            if let goBack = goBack {
-                                SwiftUI.Button(action: goBack) {
-                                    Circle()
-                                        .stroke(borderColor, lineWidth: 0.2)
-                                        .background(Circle().fill(backgroundButtonColor))
-                                        .frame(width: 28, height: 28)
-                                        .overlay(
-                                            Icon(source: "arrow-back", size: 20, color: tintColor)
-                                        )
-                                }
-                                
-                            }
-                            
-                            Spacer()
-                            
-                            if (headerRight != nil) {
-                                AnyView(headerRight!())
-                            }
-                        
-                        }
-                        .padding(.horizontal, 12)
-                        
-                        HStack {
-                            if titlePosition == .left, goBack != nil {
-                                Spacer().frame(width: 38)
-                            }
-                            
-                            if inputSearchProps != nil {
-                                if let inputProps = inputSearchProps {
-                                    InputSearch(
-                                        text: inputProps.$text,
-                                        buttonText: inputProps.buttonText,
-                                        showButtonText: inputProps.showButtonText,
-                                        showBorder: inputProps.showBorder,
-                                        placeholder: inputProps.placeholder,
-                                        onChangeText: inputProps.onChangeText,
-                                        onPressButtonText: inputProps.onPressButtonText,
-                                        error: inputProps.error,
-                                        disabled: inputProps.disabled,
-                                        icon: inputProps.icon,
-                                        iconColor: inputProps.iconColor,
-                                        onRightIconPressed: inputProps.onRightIconPressed,
-                                        onFocus: inputProps.onFocus,
-                                        onBlur: inputProps.onBlur,
-                                        loading: inputProps.loading,
-                                        fontWeight: inputProps.fontWeight,
-                                        keyboardType: inputProps.keyboardType
+                ZStack {
+                    // MARK: - Left and Right Controls
+                    HStack {
+                        if let goBack = goBack {
+                            SwiftUI.Button(action: goBack) {
+                                Circle()
+                                    .stroke(borderColor, lineWidth: 0.2)
+                                    .background(Circle().fill(backgroundButtonColor))
+                                    .frame(width: 28, height: 28)
+                                    .overlay(
+                                            Icon(source: "arrow-back", size: 20, color: tintColor ?? Colors.black17)
                                     )
-                                }
-                            } else {
-                                Text(title)
-                                    .font(Font.system(size: 17).weight(.bold))
-                                    .lineSpacing(22)
-                                    .foregroundColor(tintColor)
-                                    .frame(maxWidth: titlePosition == .center ? UIScreen.main.bounds.width - 252 : nil)
-                                    .frame(maxWidth: titlePosition == .center ? .infinity : UIScreen.main.bounds.width - 172, alignment: titlePosition == .center ? .center : .leading)
-                                    .lineLimit(1)
-                                
                             }
-                            Spacer()
                         }
-                        .padding(.horizontal)
+
+                        Spacer()
+
+                        if let headerRight = headerRight {
+                            AnyView(headerRight())
+                        }
+                    }
+                    .padding(.horizontal, 12)
+
+                    // MARK: - Title or Search
+                    HStack {
+                        if titlePosition == .left && goBack != nil {
+                            Spacer().frame(width: 38)
+                        }
+
+                        if let inputProps = inputSearchProps {
+                            InputSearch(
+                                text: inputProps.$text,
+                                buttonText: inputProps.buttonText,
+                                showButtonText: inputProps.showButtonText,
+                                showBorder: inputProps.showBorder,
+                                placeholder: inputProps.placeholder,
+                                onChangeText: inputProps.onChangeText,
+                                onPressButtonText: inputProps.onPressButtonText,
+                                error: inputProps.error,
+                                disabled: inputProps.disabled,
+                                icon: inputProps.icon,
+                                iconColor: inputProps.iconColor,
+                                onRightIconPressed: inputProps.onRightIconPressed,
+                                onFocus: inputProps.onFocus,
+                                onBlur: inputProps.onBlur,
+                                loading: inputProps.loading,
+                                fontWeight: inputProps.fontWeight,
+                                keyboardType: inputProps.keyboardType
+                            )
+                        } else {
+                            Text(title)
+                                .font(.system(size: 17, weight: .bold))
+                                .foregroundColor(tintColor ?? Colors.black17)
+                                .frame(maxWidth: titlePosition == .center ? UIScreen.main.bounds.width - 252 : nil)
+                                .frame(maxWidth: titlePosition == .center ? .infinity : UIScreen.main.bounds.width - 172, alignment: titlePosition == .center ? .center : .leading)
+                                .lineLimit(1)
+                        }
+
+                        Spacer()
                     }
-                    .background(Color.clear)
+                    .padding(.horizontal)
                 }
+                .background(Color.clear)
                 .frame(height: 52)
+            }
         }
     }
 }
-
-
-
-

package/ios/Application/Screen.swift

@@ -8,6 +8,8 @@
 import SwiftUI
 
 public struct Screen<Content: View>: View {
+    // MARK: - Properties
+    
     var backgroundColor: Color?
     var headerTransparent: Bool = false
     var tintColor: Color? = Colors.black17
@@ -25,10 +27,10 @@ public struct Screen<Content: View>: View {
     var headerRight: (()->any View)? = {HeaderRight()}
     var animatedHeader: AnimatedHeader? = nil
     var layoutOffset: CGFloat
-    var inputSearchProps: InputSearchProps? = nil
-    var fabProps: FabProps? = nil
+    var inputSearchProps: InputSearchProps?
+    var fabProps: FabProps?
     var content: () -> Content
-
+    
     public init(
         backgroundColor: Color? = nil,
         headerTransparent: Bool = false,
@@ -72,101 +74,151 @@ public struct Screen<Content: View>: View {
         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 keyboardHeight: CGFloat = 0
             let keyboardSize: CGFloat = useAvoidKeyboard ? max(keyboardHeight, 0) : 0
             let height = geometry.size.height
             let bottomInset = geometry.safeAreaInsets.bottom
             let screenHeight = height + topInset + bottomInset
-
-            ZStack {
+            
+            ZStack(alignment: .top) {
+                // Background color
                 (backgroundColor ?? Color.white)
-                    .edgesIgnoringSafeArea(.top)
-
+                    .edgesIgnoringSafeArea(.all)
+                
                 VStack(spacing: 0) {
-                    ZStack(alignment: .top) {
-//                        if animatedHeader == nil {
-//                            HeaderBackground(headerType: headerType, scrollState: scrollOffset)
-//                        } else {
-//                            Color.white.opacity(Double(min(scrollOffset / 114, 1)))
-//                                .overlay(HeaderBackground(headerType: headerType, scrollState: scrollOffset))
-//
-//                        }
-
-                        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, isTransparent: headerTransparent).edgesIgnoringSafeArea(.top))
-                        .offset(y: topInset)
-
-                    }
-                    .offset(y: -topInset)
-                    
                     ZStack(alignment: fabProps?.position == .center ? .bottom : .bottomTrailing) {
                         VStack(alignment: horizontalAlignment, spacing: 0) {
-                            if animatedHeader != nil {
-                                Spacer().frame(height: topInset + 52 + layoutOffset)
-                            }
-                            
-                            if scrollable {
-                                ScrollView(.vertical, showsIndicators: false) {
+                            if animatedHeader != nil || headerTransparent == true {
+                                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,
+                                            isTransparent: headerTransparent
+                                        )
+                                        .overlay(animatedHeader?.composable(scrollOffset)
+                                            .frame(maxWidth: .infinity)
+                                            .aspectRatio(animatedHeader?.aspectRatio.value, contentMode: .fill)
+                                        )
+                                    )
+                                    
                                     VStack {
-                                        content()
-                                    }
-                                    .background(GeometryReader { geo -> Color in
-                                        DispatchQueue.main.async {
-                                            self.scrollOffset = -geo.frame(in: .global).origin.y
+                                        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()
                                         }
-                                        return Color.clear
-                                    })
+                                    }
                                 }
                             } else {
-                                content()
+                                // 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,
+                                        isTransparent: headerTransparent
+                                    )
+                                    .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()
+                                }
                             }
                         }
-                        .padding(.bottom, keyboardSize)
                         
                         if let fabProps = fabProps {
                             FloatingButton(
                                 props: fabProps,
-                                keyboardOffset: keyboardSize,
+                                keyboardOffset: useAvoidKeyboard ? keyboardSize : 0,
                                 scrollOffset: scrollOffset
                             )
                             .padding(.horizontal, Spacing.M)
                         }
                     }
                     
+                    
+                    // MARK: - Footer
                     if let footerView = footer?() {
-                        ZStack(alignment: .top) {
-                            Rectangle()
-                                .fill(Colors.black20)
-                                .frame(height: 4)
-                                .shadow(color: Colors.black20.opacity(0.2), radius: 10, x: 0, y: -2)
-
-                            Footer(footerView: footerView, keyboardSize: keyboardSize)
-                        }
+                        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
@@ -179,5 +231,12 @@ struct Footer: View {
         .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
+        )
     }
 }