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

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/IPhoneDuoDemo.swift

@@ -0,0 +1,170 @@
+//
+//  IPhoneDuoDemo.swift
+//  Example
+//
+//  Mirrors RN `app/screens/IPhoneDuo`: the live screen layout, an extended header + search
+//  + footer screen, the Duo tab bars, the popup / bottom sheet behaviour and a grid to scroll.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+private let gridRows: [[Int]] = [[12], [6, 6], [4, 4, 4], [3, 3, 3, 3]]
+
+// enough rows to scroll, so the header glass and side bar can be checked
+private let scrollRows: [[Int]] = Array(repeating: gridRows, count: 4).flatMap { $0 }
+
+struct IPhoneDuoDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            IPhoneDuoDemoContent()
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+@available(iOS 16.0, *)
+private struct IPhoneDuoDemoContent: View {
+    @EnvironmentObject private var navigator: Navigator
+    @Environment(\.screenLayout) private var layout
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: Spacing.M) {
+            VStack(spacing: 0) {
+                ForEach(info, id: \.0) { label, value in
+                    HStack {
+                        MomoText(label, typography: .bodyDefaultRegular)
+                        Spacer()
+                        MomoText(value, typography: .headerSSemibold)
+                    }
+                    .padding(.vertical, Spacing.XS)
+                }
+            }
+            .padding(.horizontal, Spacing.M)
+
+            VStack(spacing: Spacing.S) {
+                demoButton("Extended header + footer") {
+                    navigator.push({ DuoGridScreen() }, options: extendedOptions)
+                }
+                demoButton("Glass tab bar") {
+                    navigator.push({ DuoTabDemo(useShortcut: false) }, options: tabOptions)
+                }
+                demoButton("Glass tab bar + useShortcut") {
+                    navigator.push({ DuoTabDemo(useShortcut: true) }, options: tabOptions)
+                }
+                demoButton("Bottom sheet: iPhone Duo safe area") {
+                    navigator.showBottomSheet({ BottomSheetSafeArea() }, isSurface: true, header: .title("Safe area"))
+                }
+                demoButton("PopupNotify") {
+                    navigator.showModal {
+                        PopupNotify(props: PopupNotifyProps(
+                            image: "https://static.momocdn.net/app/img/popup_permission/img_permission_popup_camera.png",
+                            title: "Title",
+                            description: String(repeating: "Check lại một nhịp auto chuyển sang dạng CTA. ", count: 8),
+                            primary: PopupAction(title: "Đồng ý", onPress: { navigator.hideOverplay() }),
+                            secondary: PopupAction(title: "Đóng", onPress: { navigator.hideOverplay() }),
+                            onIconClose: { navigator.hideOverplay() }
+                        ))
+                    }
+                }
+            }
+            .padding(.horizontal, Spacing.M)
+
+            DuoGrid()
+        }
+        .padding(.vertical, Spacing.M)
+    }
+
+    private var info: [(String, String)] {
+        let insets = layout.insets
+        return [
+            ("iPhone Duo", layout.isIPhoneDuo ? "yes" : "no"),
+            ("Window", "\(Int(layout.width)) x \(Int(layout.height))"),
+            ("Safe area (T R B L)", "\(Int(insets.top)) \(Int(insets.trailing)) \(Int(insets.bottom)) \(Int(insets.leading))"),
+            ("Content inset (L R)", "\(Int(layout.insetLeft)) \(Int(layout.insetRight))"),
+            ("Content width", "\(Int(layout.contentWidth))"),
+            ("Header height", "\(Int(layout.headerHeight))"),
+            ("Side bar", layout.sideBar.map { "\($0.edge == .left ? "left" : "right"), \(Int($0.width))pt, top \(Int($0.top))" } ?? "none"),
+        ]
+    }
+
+    private var extendedOptions: NavigationOptions {
+        NavigationOptions(
+            title: "Extended",
+            headerType: .extended,
+            headerRightData: HeaderRightData(useShortcut: true),
+            footer: { AnyView(MoMoUIKits.Button(title: "Footer action", action: {}, size: .large)) }
+        )
+    }
+
+    private var tabOptions: NavigationOptions {
+        NavigationOptions(title: "Duo tabs", headerType: .none, scrollable: false)
+    }
+
+    private func demoButton(_ title: String, action: @escaping () -> Void) -> some View {
+        MoMoUIKits.Button(title: title, action: action, type: .secondary, size: .small)
+    }
+}
+
+private struct DuoGridScreen: View {
+    var body: some View {
+        DuoGrid().padding(.vertical, Spacing.M)
+    }
+}
+
+private struct DuoGrid: View {
+    var body: some View {
+        VStack(spacing: Spacing.M) {
+            ForEach(scrollRows.indices, id: \.self) { row in
+                SectionView {
+                    ForEach(scrollRows[row].indices, id: \.self) { index in
+                        let span = scrollRows[row][index]
+                        ItemView(widthSpan: span) {
+                            MomoText("span \(span)", typography: .descriptionDefaultRegular)
+                                .frame(maxWidth: .infinity)
+                                .frame(height: 48)
+                                .background(Colors.black04)
+                                .clipShape(RoundedRectangle(cornerRadius: Radius.S))
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// Markers on the content edges show the side safe area inside the sheet.
+private struct BottomSheetSafeArea: View {
+    @Environment(\.screenLayout) private var layout
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: Spacing.XS) {
+            HStack {
+                marker("← content edge")
+                Spacer()
+                marker("content edge →")
+            }
+            .padding(.bottom, Spacing.S)
+            MomoText("Window: \(Int(layout.width)) × \(Int(layout.height))", typography: .bodyDefaultRegular)
+            MomoText(
+                "Insets: top \(Int(layout.insets.top)) · right \(Int(layout.insets.trailing)) · bottom \(Int(layout.insets.bottom)) · left \(Int(layout.insets.leading))",
+                typography: .bodyDefaultRegular
+            )
+            MomoText(
+                "On iPhone Duo: the outer display keeps a full-width sheet with content inside the side safe area; the inner display centers the sheet, still attached to the bottom edge. Other devices are unchanged.",
+                typography: .descriptionDefaultRegular,
+                color: Colors.black12
+            )
+        }
+        .padding(.vertical, Spacing.M)
+    }
+
+    private func marker(_ text: String) -> some View {
+        MomoText(text, typography: .labelSMedium, color: Colors.pink03)
+            .padding(.vertical, Spacing.XS)
+            .padding(.horizontal, Spacing.S)
+            .background(Colors.black04)
+            .clipShape(RoundedRectangle(cornerRadius: Radius.XS))
+    }
+}

package/local.properties

@@ -0,0 +1,8 @@
+## This file must *NOT* be checked into Version Control Systems,
+# as it contains information specific to your local configuration.
+#
+# Location of the SDK. This is only used by Gradle.
+# For customization when using a Version Control System, please read the
+# header note.
+#Tue Jun 02 17:05:32 ICT 2026
+sdk.dir=/Users/sophia/Library/Android/sdk

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.167.1-duo.2-debug",
+  "version": "0.167.1-duo.3-debug",
   "private": false,
   "dependeNavigationncies": {},
   "devDependencies": {},