@momo-kits/native-kits 0.167.1-duo.2-debug → 0.167.1-duo.20-debug

package/ios/Navigation/Component/Header.swift

@@ -0,0 +1,531 @@
+//
+//  Header.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `navigation/component/Header.kt`: the header bar (back button,
+//  title, header right), its colors, opacity and the header models.
+//
+
+import SwiftUI
+
+/// Header bar height, mirrors Compose's `HEADER_HEIGHT`.
+public let HEADER_HEIGHT: CGFloat = 52
+
+/// Room the back button and toolkit take from the bar (Compose `HEADER_ACTIONS_WIDTH`).
+let headerActionsWidth: CGFloat = 172
+// Extra width the 48pt back and toolkit take on the iPhone Duo status bar row.
+private let statusBarRowActionsExtra: CGFloat = 55
+
+public enum TitlePosition {
+    case left, center
+}
+
+public enum HeaderType {
+    case `default`, extended, none
+}
+
+/// Mirrors Compose's `HeaderType.Animated`; `layoutOffset` lives on `NavigationOptions`.
+public struct AnimatedHeader {
+    public var aspectRatio: AnimatedHeaderRatio = .ratio16_9
+    public var isSurface: Bool = true
+    public var composable: (_ scrollState: CGFloat) -> AnyView = { _ in AnyView(EmptyView()) }
+
+    public init(
+        aspectRatio: AnimatedHeaderRatio = .ratio16_9,
+        isSurface: Bool = true,
+        composable: @escaping (_ scrollState: CGFloat) -> AnyView = { _ in AnyView(EmptyView()) }
+    ) {
+        self.aspectRatio = aspectRatio
+        self.isSurface = isSurface
+        self.composable = composable
+    }
+}
+
+// MARK: - Header title
+
+/// Mirrors Compose's `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.Location`. Colors are CSS hex strings, as in RN.
+public struct HeaderLocationData {
+    public var description: String?
+    public var location: String
+    public var tintColor: String?
+    public var onPress: (() -> Void)?
+    public var isLoading: Bool
+
+    public init(
+        description: String? = nil,
+        location: String,
+        tintColor: String? = nil,
+        onPress: (() -> Void)? = nil,
+        isLoading: Bool = false
+    ) {
+        self.description = description
+        self.location = location
+        self.tintColor = tintColor
+        self.onPress = onPress
+        self.isLoading = isLoading
+    }
+}
+
+/// Mirrors Compose's `HeaderTitle.Journey`. Colors are CSS hex strings, as in RN.
+public struct HeaderJourneyData {
+    public var start: String
+    public var end: String?
+    public var description: String?
+    public var icon: String
+    public var iconColor: String?
+    public var tintColor: String?
+    public var onPress: (() -> Void)?
+    public var isLoading: Bool
+
+    public init(
+        start: String,
+        end: String? = nil,
+        description: String? = nil,
+        icon: String,
+        iconColor: String? = nil,
+        tintColor: String? = nil,
+        onPress: (() -> Void)? = nil,
+        isLoading: Bool = false
+    ) {
+        self.start = start
+        self.end = end
+        self.description = description
+        self.icon = icon
+        self.iconColor = iconColor
+        self.tintColor = tintColor
+        self.onPress = onPress
+        self.isLoading = isLoading
+    }
+}
+
+/// Mirrors Compose's `sealed class HeaderTitle`.
+public enum HeaderTitle {
+    case `default`(String)
+    case user(HeaderUserData)
+    case location(HeaderLocationData)
+    case journey(HeaderJourneyData)
+
+    /// Plain title text when this is a `.default` title.
+    public var defaultTitle: String? {
+        if case let .default(text) = self { return text }
+        return nil
+    }
+}
+
+// MARK: - Back props
+
+/// 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`: with `preventBack`, `Navigator.onBackSafe` asks first.
+public struct HeaderBackProps {
+    public var preventBack: PreventBackProps?
+
+    public init(preventBack: PreventBackProps? = nil) {
+        self.preventBack = preventBack
+    }
+}
+
+// MARK: - Header colors
+
+/// Mirrors Compose's `HeaderColor`.
+public struct HeaderColor: Equatable {
+    public let tintIconColor: Color
+    public let backgroundButton: Color
+    public let borderColor: Color
+}
+
+/// Mirrors Compose's `getHeaderColor`; an animated header is a non-nil `AnimatedHeader` here.
+func getHeaderColor(
+    isAnimated: Bool,
+    isSurface: Bool,
+    opacity: CGFloat,
+    tintColor: Color?,
+    defaultColor: Color = Colors.black17
+) -> HeaderColor {
+    if isAnimated {
+        if opacity >= 1 || !isSurface {
+            return HeaderColor(
+                tintIconColor: Colors.black17,
+                backgroundButton: Colors.black01.opacity(0.6),
+                borderColor: Colors.black20.opacity(0.2)
+            )
+        }
+        return HeaderColor(
+            tintIconColor: Colors.black01,
+            backgroundButton: Colors.black20.opacity(0.6),
+            borderColor: .clear
+        )
+    }
+
+    // SwiftUI's `.white` is not equal to `Colors.black01`; both must get the dark button, as on the side bar
+    if tintColor == Colors.black01 || tintColor == .white {
+        return HeaderColor(
+            tintIconColor: Colors.black01,
+            backgroundButton: Colors.black20.opacity(0.6),
+            borderColor: Colors.black01.opacity(0.2)
+        )
+    }
+    return HeaderColor(
+        tintIconColor: tintColor ?? defaultColor,
+        backgroundButton: Colors.black01.opacity(0.6),
+        borderColor: Colors.black20.opacity(0.2)
+    )
+}
+
+/// Mirrors Compose's `headerOpacity()`: the bar turns opaque over one header height of scroll,
+/// over `layoutOffset` for an animated header, and never for a transparent one.
+func headerOpacity(
+    scrollOffset: CGFloat,
+    isAnimated: Bool,
+    layoutOffset: CGFloat,
+    transparent: Bool
+) -> CGFloat {
+    if transparent { return 0 }
+    let distance = isAnimated ? layoutOffset : HEADER_HEIGHT
+    if distance <= 0 { return scrollOffset > 0 ? 1 : 0 }
+    return min(max(scrollOffset / distance, 0), 1)
+}
+
+private struct HeaderColorKey: EnvironmentKey {
+    static let defaultValue: HeaderColor? = nil
+}
+
+extension EnvironmentValues {
+    /// The enclosing header's colors, so a toolkit follows the bar over a banner image.
+    var headerColor: HeaderColor? {
+        get { self[HeaderColorKey.self] }
+        set { self[HeaderColorKey.self] = newValue }
+    }
+}
+
+/// Measured width of the header-right area, read by the animated search for its trailing inset
+/// (Compose's `LocalHeaderRightWidthPx`).
+public struct HeaderRightWidthKey: PreferenceKey {
+    public static var defaultValue: CGFloat = 0
+    public static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
+        value = max(value, nextValue())
+    }
+}
+
+/// Compose `SearchAnimated`: a header search fills from surface to the screen background over
+/// the scroll that lifts it into the bar.
+func headerSearchProps(_ props: InputSearchProps, scroll: CGFloat, layout: ScreenLayout, theme: Theme) -> InputSearchProps {
+    guard props.backgroundColor == nil else { return props }
+    let collapsedTop = max(layout.headerStatusBarHeight + (layout.headerBarHeight - HEADER_HEIGHT) / 2, 1)
+    var themed = props
+    themed.backgroundColor = theme.colors.background.surface
+        .lerp(to: theme.colors.background.default, max(scroll, 0) / collapsedTop)
+    return themed
+}
+
+/// Max title width: back button and toolkit share the bar unless the iPhone Duo side bar holds them.
+func headerTitleMaxWidth(_ layout: ScreenLayout) -> CGFloat {
+    let clearance = layout.statusBarClearance.map { $0.left + $0.right } ?? 0
+    if layout.sideBar != nil { return layout.contentWidth - Spacing.M * 2 - clearance }
+    return layout.width - headerActionsWidth - (layout.statusBarClearance != nil ? statusBarRowActionsExtra : 0) - clearance
+}
+
+// MARK: - Header
+
+/// Mirrors Compose's `Header`.
+public struct NavigationHeader: View {
+    var headerType: HeaderType = .default
+    var titlePosition: TitlePosition
+    var title: String
+    var headerTitle: HeaderTitle?
+    var headerRight: (() -> any View)?
+    var goBack: (() -> Void)?
+    var opacity: CGFloat = 1
+    var animatedHeader: AnimatedHeader?
+    var scrollState: CGFloat = 0
+    var inputSearchProps: InputSearchProps?
+    var tintColor: Color?
+    /// The animated search fades the title out as it rises into the bar.
+    var titleOpacity: CGFloat = 1
+
+    public init(
+        headerType: HeaderType = .default,
+        titlePosition: TitlePosition,
+        title: String,
+        headerTitle: HeaderTitle? = nil,
+        headerRight: (() -> any View)? = { HeaderRight() },
+        goBack: (() -> Void)? = nil,
+        opacity: CGFloat = 1,
+        animatedHeader: AnimatedHeader? = nil,
+        scrollState: CGFloat = 0,
+        inputSearchProps: InputSearchProps? = nil,
+        tintColor: Color? = nil,
+        titleOpacity: CGFloat = 1
+    ) {
+        self.headerType = headerType
+        self.titlePosition = titlePosition
+        self.title = title
+        self.headerTitle = headerTitle
+        self.headerRight = headerRight
+        self.goBack = goBack
+        self.opacity = opacity
+        self.animatedHeader = animatedHeader
+        self.scrollState = scrollState
+        self.inputSearchProps = inputSearchProps
+        self.tintColor = tintColor
+        self.titleOpacity = titleOpacity
+    }
+
+    @Environment(\.screenLayout) private var layout
+    @Environment(\.appTheme) private var theme
+    @State private var headerRightWidth: CGFloat = 0
+
+    /// iPhone Duo side bar holds back and the toolkit; a custom header right stays in the bar.
+    private var useSideBar: Bool { layout.sideBar != nil }
+
+    /// iPhone Duo inner portrait: the row sits on the status bar, between its clusters, with 48pt controls.
+    private var statusBarRow: Bool { layout.statusBarClearance != nil && !useSideBar }
+
+    /// Max centered title width; on the status bar row the clusters are lopsided, so both sides keep the wider one's room.
+    private var centerTitleMaxWidth: CGFloat {
+        guard let clearance = layout.statusBarClearance else { return (layout.contentWidth - Spacing.M * 2) / 2 }
+        let back = goBack == nil || useSideBar ? 0 : DuoMetrics.controlSize + Spacing.S
+        let inset = max(clearance.left + back, clearance.right + headerRightWidth) + Spacing.S
+        return max(layout.contentWidth - (Spacing.M + inset) * 2, 0)
+    }
+
+    private var headerColor: HeaderColor {
+        getHeaderColor(
+            isAnimated: animatedHeader != nil,
+            isSurface: animatedHeader?.isSurface ?? true,
+            opacity: opacity,
+            tintColor: tintColor
+        )
+    }
+
+    /// A centered title overlays the whole bar so it stays screen-centered.
+    private var centerTitle: Bool {
+        guard inputSearchProps == nil else { return false }
+        return titlePosition == .center && (headerTitle == nil || headerTitle?.defaultTitle != nil)
+    }
+
+    public var body: some View {
+        if headerType != .none {
+            ZStack {
+                HStack(spacing: 0) {
+                    if let goBack, !useSideBar {
+                        if statusBarRow {
+                            SideBarButton(
+                                icon: "arrow-back",
+                                headerColor: headerColor,
+                                accessibilityId: "btn_navigation_back",
+                                action: goBack
+                            )
+                        } else {
+                            BackButton(color: headerColor, onBack: goBack)
+                        }
+                        Spacer().frame(width: Spacing.S)
+                    }
+
+                    if centerTitle {
+                        Spacer()
+                    } else {
+                        titleArea(centered: false)
+                            .frame(maxWidth: .infinity, alignment: .leading)
+                    }
+
+                    if let headerRight, !(useSideBar && toolkitHeaderRight(headerRight) != nil) {
+                        Group {
+                            if statusBarRow, let toolkit = toolkitHeaderRight(headerRight) {
+                                Toolkit(
+                                    headerRight: toolkit.data ?? HeaderRightData(),
+                                    tintColor: toolkit.tintColor,
+                                    layout: .sideBarRow
+                                )
+                            } else {
+                                AnyView(headerRight())
+                            }
+                        }
+                        .environment(\.headerColor, headerColor)
+                        .background(
+                            GeometryReader { geo in
+                                Color.clear.preference(key: HeaderRightWidthKey.self, value: geo.size.width)
+                            }
+                        )
+                    }
+                }
+                .padding(.leading, Spacing.M + (layout.statusBarClearance?.left ?? 0))
+                .padding(.trailing, Spacing.M + (layout.statusBarClearance?.right ?? 0))
+
+                if centerTitle {
+                    titleArea(centered: true)
+                        // Compose caps a centered title at half the bar
+                        .frame(maxWidth: centerTitleMaxWidth)
+                        .padding(.horizontal, Spacing.M)
+                }
+            }
+            .onPreferenceChange(HeaderRightWidthKey.self) { headerRightWidth = $0 }
+            .frame(height: layout.headerBarHeight)
+            .overlay(alignment: .bottom) { VerticalShadow(opacity: opacity) }
+            // the row starts headerStatusBarHeight below the window top: 0 with the status bar off
+            // the top edge, lower on the iPhone Duo outer display to center on the camera
+            .padding(.top, layout.headerStatusBarHeight - layout.insets.top)
+        }
+    }
+
+    /// Mirrors Compose's `HeaderContent`; a header search replaces the title.
+    @ViewBuilder
+    private func titleArea(centered: Bool) -> some View {
+        if let inputSearchProps {
+            InputSearch(props: headerSearchProps(inputSearchProps, scroll: scrollState, layout: layout, theme: theme))
+        } else {
+            switch headerTitle {
+            case let .user(data)?:
+                HeaderUserView(data)
+            case let .location(data)?:
+                HeaderLocationView(data, tintColor: headerColor.tintIconColor)
+            case let .journey(data)?:
+                HeaderJourneyView(data, tintColor: headerColor.tintIconColor)
+            case let .default(text)?:
+                HeaderTitleText(text, color: headerColor.tintIconColor, centered: centered)
+                    .opacity(titleOpacity)
+            case nil:
+                HeaderTitleText(title, color: headerColor.tintIconColor, centered: centered)
+                    .opacity(titleOpacity)
+            }
+        }
+    }
+}
+
+// MARK: - Bar background
+
+/// Compose `Header`'s own background: surface (or the theme's header image) fading in with the
+/// scroll; a transparent header stays clear.
+struct HeaderBarBackground: View {
+    let opacity: CGFloat
+    var transparent: Bool = false
+
+    @Environment(\.appTheme) private var theme
+    @Environment(\.screenLayout) private var layout
+
+    var body: some View {
+        Group {
+            if transparent {
+                Color.clear
+            } else if theme.assets.isHeaderImage, let image = theme.assets.headerBackground {
+                ZStack(alignment: .top) {
+                    theme.colors.background.surface
+                    ImageView(image, contentMode: .fill, loading: false)
+                        .frame(height: HEADER_BACKGROUND_HEIGHT)
+                }
+                .clipped()
+                .opacity(opacity)
+            } else {
+                theme.colors.background.surface.opacity(opacity)
+            }
+        }
+        .frame(height: layout.headerHeight)
+        .allowsHitTesting(false)
+    }
+}
+
+// MARK: - Back button
+
+/// Mirrors Compose's `BackButton`: a 28pt circle with the back arrow.
+private struct BackButton: View {
+    let color: HeaderColor
+    let onBack: () -> Void
+
+    var body: some View {
+        SwiftUI.Button(action: onBack) {
+            Circle()
+                .fill(color.backgroundButton)
+                .overlay(Circle().stroke(color.borderColor, lineWidth: 0.2))
+                .frame(width: 28, height: 28)
+                .overlay(Icon(source: "arrow-back", size: 20, color: color.tintIconColor))
+        }
+        .buttonStyle(ActiveOpacityButtonStyle())
+        .accessibilityIdentifier("btn_navigation_back")
+    }
+}
+
+// MARK: - Vertical shadow
+
+/// Mirrors Compose's `VerticalShadow`: shown once the bar is fully opaque.
+private struct VerticalShadow: View {
+    let opacity: CGFloat
+
+    var body: some View {
+        if opacity >= 1 {
+            LinearGradient(
+                gradient: Gradient(colors: [Color.black.opacity(0.05), .clear]),
+                startPoint: .top,
+                endPoint: .bottom
+            )
+            .frame(height: 6)
+            .frame(maxWidth: .infinity)
+            .offset(y: 6)
+            .allowsHitTesting(false)
+        }
+    }
+}

package/ios/Navigation/Component/HeaderBackground.swift

@@ -0,0 +1,133 @@
+//
+//  HeaderBackground.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `navigation/component/HeaderBackground.kt`: the band behind the
+//  header — the pink gradient (or the theme's header image) fading into the screen background.
+//
+
+import SwiftUI
+
+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
+        }
+    }
+}
+
+let HEADER_BACKGROUND_HEIGHT: CGFloat = 154
+
+/// Lay it out top-aligned: an extended band runs past the header into the content.
+public struct NavigationHeaderBackground: View {
+    var headerType: HeaderType = .default
+    var scrollState: CGFloat
+    var headerTransparent: Bool = false
+    var fullScreenContent: Bool = false
+    /// The screen background the band fades into; the theme's `background.default` when nil.
+    var backgroundColor: Color?
+
+    public init(
+        headerType: HeaderType = .default,
+        scrollState: CGFloat = 0,
+        headerTransparent: Bool = false,
+        fullScreenContent: Bool = false,
+        backgroundColor: Color? = nil
+    ) {
+        self.headerType = headerType
+        self.scrollState = scrollState
+        self.headerTransparent = headerTransparent
+        self.fullScreenContent = fullScreenContent
+        self.backgroundColor = backgroundColor
+    }
+
+    @Environment(\.screenLayout) private var layout
+    @Environment(\.appTheme) private var theme
+
+    public var body: some View {
+        let opacity = max(0, 1 - scrollState / HEADER_HEIGHT)
+        let background = backgroundColor ?? theme.colors.background.default
+        let topColor = opacity == 0 ? background : Color(hex: 0xFDCADE)
+        let minHeight = fullScreenContent ? 0 : layout.headerHeight
+        let isHeaderImage = theme.assets.isHeaderImage
+
+        let height: CGFloat = {
+            if headerTransparent { return 0 }
+            switch headerType {
+            case .default: return minHeight
+            // a header image collapses to the bar once scrolled, the gradient keeps its band
+            case .extended: return isHeaderImage && opacity == 0 ? minHeight : HEADER_BACKGROUND_HEIGHT
+            case .none: return 0
+            }
+        }()
+
+        ZStack(alignment: .top) {
+            background
+            if isHeaderImage, let image = theme.assets.headerBackground {
+                ImageView(image, contentMode: .fill, loading: false)
+                    .frame(height: HEADER_BACKGROUND_HEIGHT)
+            } else {
+                LinearGradient(colors: [topColor, background], startPoint: .top, endPoint: .bottom)
+                    .frame(height: HEADER_BACKGROUND_HEIGHT)
+            }
+        }
+        .frame(height: height, alignment: .top)
+        .clipped()
+        .allowsHitTesting(false)
+    }
+}
+
+// MARK: - iPhone Duo glass header gradient
+
+// extended headers run their gradient this far below the header, as off Duo
+private let duoGradientExtra: CGFloat = 52
+// scroll distance over which the extended gradient collapses to the header
+private let duoExtendedCollapseDistance: CGFloat = 100
+
+/// Port of RN `DuoScrollGradient`: with the glass header the content scrolls under the bar, so the
+/// header gradient is drawn under it. Compose draws this inside `HeaderBackground`.
+struct DuoScrollGradient: View {
+    let scrollOffset: CGFloat
+    let headerHeight: CGFloat
+    let extended: Bool
+    /// Quick return header: the gradient leaves with the content instead of fading.
+    var followScroll = false
+
+    @Environment(\.appTheme) private var theme
+
+    private var scroll: CGFloat { max(scrollOffset, 0) }
+
+    var body: some View {
+        Group {
+            if followScroll {
+                gradient
+                    .frame(height: headerHeight + (extended ? duoGradientExtra : 0))
+                    .offset(y: -scroll)
+            } else {
+                // fades out on scroll as the extended header does off Duo; extended also collapses
+                let progress = min(scroll / duoExtendedCollapseDistance, 1)
+                gradient
+                    .frame(height: headerHeight + (extended ? duoGradientExtra * (1 - progress) : 0))
+                    .opacity(1 - min(scroll / duoGradientExtra, 1))
+            }
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
+        .ignoresSafeArea()
+        .allowsHitTesting(false)
+    }
+
+    /// The fade spans the gradient box.
+    private var gradient: LinearGradient {
+        LinearGradient(
+            colors: [theme.colors.gradient, theme.colors.gradient.opacity(0)],
+            startPoint: .top,
+            endPoint: .bottom
+        )
+    }
+}