@momo-kits/native-kits 0.0.1-beta.4 → 0.0.2-alpha.1

package/ios/PopupView/Utils++.swift

@@ -0,0 +1,281 @@
+import SwiftUI
+import Combine
+
+final class DispatchWorkHolder {
+    var work: DispatchWorkItem?
+}
+
+final class ClassReference<T> {
+    var value: T
+
+    init(_ value: T) {
+        self.value = value
+    }
+}
+
+public extension View {
+    
+    @ViewBuilder
+    func valueChanged<T: Equatable>(value: T, onChange: @escaping (T) -> Void) -> some View {
+        if #available(iOS 14.0, tvOS 14.0, macOS 11.0, watchOS 7.0, *) {
+            self.onChange(of: value, perform: onChange)
+        } else {
+            self.onReceive(Just(value)) { value in
+                onChange(value)
+            }
+        }
+    }
+}
+
+public extension View {
+    @ViewBuilder
+    func applyIf<T: View>(_ condition: Bool, apply: (Self) -> T) -> some View {
+        if condition {
+            apply(self)
+        } else {
+            self
+        }
+    }
+
+    @ViewBuilder
+    func addTapIf(if condition: Bool, onTap: @escaping ()->()) -> some View {
+        if condition {
+            self.simultaneousGesture(
+                TapGesture().onEnded {
+                    onTap()
+                }
+            )
+        } else {
+            self
+        }
+    }
+}
+
+struct FrameGetter: ViewModifier {
+
+    @Binding var frame: CGRect
+
+    func body(content: Content) -> some View {
+        content
+            .background(
+                GeometryReader { proxy -> AnyView in
+                    DispatchQueue.main.async {
+                        let rect = proxy.frame(in: .global)
+                        // This avoids an infinite layout loop
+                        if rect.integral != self.frame.integral {
+                            self.frame = rect
+                        }
+                    }
+                    return AnyView(EmptyView())
+                }
+            )
+    }
+}
+
+extension View {
+    public func frameGetter(_ frame: Binding<CGRect>) -> some View {
+        modifier(FrameGetter(frame: frame))
+    }
+}
+
+struct AnimationCompletionObserverModifier<Value>: AnimatableModifier where Value: VectorArithmetic, Value: Comparable {
+
+    /// While animating, SwiftUI changes the old input value to the new target value using this property. This value is set to the old value until the animation completes.
+    var animatableData: Value {
+        didSet {
+            notifyCompletionIfFinished()
+        }
+    }
+
+    /// The target value for which we're observing. This value is directly set once the animation starts. During animation, `animatableData` will hold the oldValue and is only updated to the target value once the animation completes.
+    private var targetValue: Value
+
+    /// The completion callback which is called once the animation completes.
+    private var completion: () -> Void
+
+    init(observedValue: Value, completion: @escaping () -> Void) {
+        self.completion = completion
+        self.animatableData = observedValue
+        targetValue = observedValue
+    }
+
+    /// Verifies whether the current animation is finished and calls the completion callback if true.
+    private func notifyCompletionIfFinished() {
+        guard animatableData == targetValue else { return }
+
+        /// Dispatching is needed to take the next runloop for the completion callback.
+        /// This prevents errors like "Modifying state during view update, this will cause undefined behavior."
+        DispatchQueue.main.async {
+            self.completion()
+        }
+    }
+
+    func body(content: Content) -> some View {
+        /// We're not really modifying the view so we can directly return the original input value.
+        return content
+    }
+}
+
+struct AnimatableModifierDouble: AnimatableModifier {
+
+    var targetValue: Double
+    static var done = false
+
+    // SwiftUI gradually varies it from old value to the new value
+    var animatableData: Double {
+        didSet {
+            checkIfFinished()
+        }
+    }
+    var completion: () -> ()
+
+    // Re-created every time the control argument changes
+    init(bindedValue: Double, completion: @escaping () -> ()) {
+        self.completion = completion
+
+        // Set animatableData to the new value. But SwiftUI again directly
+        // and gradually varies the value while the body
+        // is being called to animate. Following line serves the purpose of
+        // associating the extenal argument with the animatableData.
+        self.animatableData = bindedValue
+        targetValue = bindedValue
+        AnimatableModifierDouble.done = false
+    }
+
+    func checkIfFinished() -> () {
+        if AnimatableModifierDouble.done { return }
+        let delta = 0.1
+        if animatableData > targetValue - delta &&
+            animatableData < targetValue + delta {
+            //print("check", animatableData, targetValue)
+            AnimatableModifierDouble.done = true
+            DispatchQueue.main.async {
+                self.completion()
+            }
+        }
+    }
+
+    func body(content: Content) -> some View {
+        content
+    }
+}
+
+extension View {
+
+    func onAnimationCompleted(for value: Double, completion: @escaping () -> Void) -> some View {
+        modifier(AnimatableModifierDouble(bindedValue: value, completion: completion))
+    }
+}
+
+extension UIApplication {
+    var keyWindow: UIWindow? {
+        connectedScenes
+            .compactMap {
+                $0 as? UIWindowScene
+            }
+            .flatMap {
+                $0.windows
+            }
+            .first {
+                $0.isKeyWindow
+            }
+    }
+}
+
+private struct SafeAreaInsetsKey: EnvironmentKey {
+    static var defaultValue: EdgeInsets {
+        UIApplication.shared.keyWindow?.safeAreaInsets.swiftUiInsets ?? EdgeInsets()
+    }
+}
+
+extension EnvironmentValues {
+    var safeAreaInsets: EdgeInsets {
+        self[SafeAreaInsetsKey.self]
+    }
+}
+
+private extension UIEdgeInsets {
+    var swiftUiInsets: EdgeInsets {
+        EdgeInsets(top: top, leading: left, bottom: bottom, trailing: right)
+    }
+}
+
+extension View {
+
+    func transparentNonAnimatingFullScreenCover<Content: View>(isPresented: Binding<Bool>, content: @escaping () -> Content) -> some View {
+        modifier(TransparentNonAnimatableFullScreenModifier(isPresented: isPresented, fullScreenContent: content))
+    }
+}
+
+private struct TransparentNonAnimatableFullScreenModifier<FullScreenContent: View>: ViewModifier {
+
+    @Binding var isPresented: Bool
+    let fullScreenContent: () -> (FullScreenContent)
+
+    func body(content: Content) -> some View {
+        if #available(iOS 14.0, *) {
+            content
+                .valueChanged(value: isPresented, onChange: { isPresented in
+                    UIView.setAnimationsEnabled(false)
+                })
+                .fullScreenCover(isPresented: $isPresented, content: {
+                    ZStack {
+                        fullScreenContent()
+                    }
+                    .background(FullScreenCoverBackgroundRemovalView())
+                    .onAppear {
+                        if !UIView.areAnimationsEnabled {
+                            UIView.setAnimationsEnabled(true)
+                        }
+                    }
+                    .onDisappear {
+                        if !UIView.areAnimationsEnabled {
+                            UIView.setAnimationsEnabled(true)
+                        }
+                    }
+                })
+        } else {
+            content
+                .valueChanged(value: isPresented, onChange: { isPresented in
+                    UIView.setAnimationsEnabled(false)
+                })
+                .sheet(isPresented: $isPresented, content: {
+                    ZStack {
+                        fullScreenContent()
+                    }
+                    .background(FullScreenCoverBackgroundRemovalView())
+                    .onAppear {
+                        if !UIView.areAnimationsEnabled {
+                            UIView.setAnimationsEnabled(true)
+                        }
+                    }
+                    .onDisappear {
+                        if !UIView.areAnimationsEnabled {
+                            UIView.setAnimationsEnabled(true)
+                        }
+                    }
+                })
+        }
+    }
+
+}
+
+private struct FullScreenCoverBackgroundRemovalView: UIViewRepresentable {
+
+    private class BackgroundRemovalView: UIView {
+
+        override func didMoveToWindow() {
+            super.didMoveToWindow()
+
+            superview?.superview?.backgroundColor = .clear
+        }
+
+    }
+
+    func makeUIView(context: Context) -> UIView {
+        return BackgroundRemovalView()
+    }
+
+    func updateUIView(_ uiView: UIView, context: Context) {}
+
+}

package/ios/ProgressInfo/ProgressInfo.swift

@@ -0,0 +1,297 @@
+import SwiftUI
+
+// MARK: - Data model
+
+public struct ProgressInfoItem: Identifiable {
+    public let id = UUID()
+    public let title: String
+    public let description: String?
+
+    public init(title: String, description: String? = nil) {
+        self.title = title
+        self.description = description
+    }
+}
+
+public enum ProgressInfoSize {
+    case small
+    case large
+}
+
+public enum ProgressInfoAlign {
+    case left
+    case right
+    case center
+    case stretch
+}
+
+// MARK: - Public entry-point
+
+/// Display-only step progress indicator.
+///
+/// - Parameters:
+///   - steps: Ordered list of steps; each has a title and an optional description.
+///   - horizontal: When `true` renders steps in a horizontal row with connector lines;
+///     when `false` (default) renders a vertical column.
+///   - size: Icon diameter: `.small` = 16, `.large` = 24 (default).
+///   - useNumber: Show the 1-based step index inside the icon instead of the default dot.
+///   - align: Alignment of icon + text for the horizontal variant.
+///   - showTitle: Whether step titles are rendered (default `true`).
+///   - showDescription: Whether step descriptions are rendered (default `true`).
+///   - customIcon: Icon source key rendered inside each step circle (overrides the dot;
+///     itself overridden by `useNumber`).
+public struct ProgressInfo: View {
+    private let steps: [ProgressInfoItem]
+    private let horizontal: Bool
+    private let size: ProgressInfoSize
+    private let useNumber: Bool
+    private let align: ProgressInfoAlign
+    private let showTitle: Bool
+    private let showDescription: Bool
+    private let customIcon: String?
+
+    public init(
+        steps: [ProgressInfoItem],
+        horizontal: Bool = false,
+        size: ProgressInfoSize = .large,
+        useNumber: Bool = false,
+        align: ProgressInfoAlign = .center,
+        showTitle: Bool = true,
+        showDescription: Bool = true,
+        customIcon: String? = nil
+    ) {
+        self.steps = steps
+        self.horizontal = horizontal
+        self.size = size
+        self.useNumber = useNumber
+        self.align = align
+        self.showTitle = showTitle
+        self.showDescription = showDescription
+        self.customIcon = customIcon
+    }
+
+    public var body: some View {
+        if horizontal {
+            ProgressInfoHorizontal(
+                steps: steps,
+                size: size,
+                useNumber: useNumber,
+                align: align,
+                showTitle: showTitle,
+                showDescription: showDescription,
+                customIcon: customIcon
+            )
+        } else {
+            ProgressInfoVertical(
+                steps: steps,
+                size: size,
+                useNumber: useNumber,
+                showTitle: showTitle,
+                showDescription: showDescription,
+                customIcon: customIcon
+            )
+        }
+    }
+}
+
+// MARK: - Tokens
+
+private let progressInfoLineColor = Colors.pink08
+private let progressInfoAccentColor = Colors.pinkMoMoBranding
+
+// MARK: - Horizontal variant
+
+private struct ProgressInfoHorizontal: View {
+    let steps: [ProgressInfoItem]
+    let size: ProgressInfoSize
+    let useNumber: Bool
+    let align: ProgressInfoAlign
+    let showTitle: Bool
+    let showDescription: Bool
+    let customIcon: String?
+
+    var body: some View {
+        HStack(alignment: .top, spacing: 0) {
+            ForEach(Array(steps.enumerated()), id: \.element.id) { index, item in
+                let isFirst = index == 0
+                let isLast = index == steps.count - 1
+
+                let alignment = columnAlignment(isFirst: isFirst, isLast: isLast)
+                let textAlign = textAlignment(isFirst: isFirst, isLast: isLast)
+                let endPadding: CGFloat = (!isLast && align != .center && align != .stretch) ? Spacing.XS : 0
+                let hideLineLeft = align == .left || (align == .stretch && isFirst)
+                let hideLineRight = align == .right || (align == .stretch && isLast)
+
+                VStack(alignment: alignment, spacing: 0) {
+                    HStack(spacing: 0) {
+                        if !hideLineLeft {
+                            ProgressInfoHorizontalLine()
+                        }
+                        ProgressInfoStepIcon(
+                            index: index,
+                            size: size,
+                            useNumber: useNumber,
+                            customIcon: customIcon
+                        )
+                        .padding(.vertical, Spacing.XS)
+                        if !hideLineRight {
+                            ProgressInfoHorizontalLine()
+                        }
+                    }
+                    .frame(maxWidth: .infinity)
+
+                    if showTitle && !item.title.isEmpty {
+                        MomoText(item.title, typography: .headerXsSemibold)
+                            .multilineTextAlignment(textAlign)
+                            .frame(maxWidth: .infinity, alignment: frameAlignment(alignment))
+                            .padding(.bottom, Spacing.XS)
+                    }
+
+                    if showDescription, let desc = item.description, !desc.isEmpty {
+                        MomoText(desc, typography: .descriptionDefaultRegular, color: Colors.black12)
+                            .multilineTextAlignment(textAlign)
+                            .frame(maxWidth: .infinity, alignment: frameAlignment(alignment))
+                    }
+                }
+                .frame(maxWidth: .infinity)
+                .padding(.trailing, endPadding)
+            }
+        }
+        .frame(maxWidth: .infinity)
+    }
+
+    private func columnAlignment(isFirst: Bool, isLast: Bool) -> HorizontalAlignment {
+        switch align {
+        case .left: return .leading
+        case .right: return .trailing
+        case .center: return .center
+        case .stretch:
+            if isFirst { return .leading }
+            if isLast { return .trailing }
+            return .center
+        }
+    }
+
+    private func frameAlignment(_ h: HorizontalAlignment) -> Alignment {
+        switch h {
+        case .leading: return .leading
+        case .trailing: return .trailing
+        default: return .center
+        }
+    }
+
+    private func textAlignment(isFirst: Bool, isLast: Bool) -> TextAlignment {
+        switch align {
+        case .left: return .leading
+        case .right: return .trailing
+        case .center: return .center
+        case .stretch:
+            if isFirst { return .leading }
+            if isLast { return .trailing }
+            return .center
+        }
+    }
+}
+
+// MARK: - Vertical variant
+
+private struct ProgressInfoVertical: View {
+    @Environment(\.appTheme) private var theme
+
+    let steps: [ProgressInfoItem]
+    let size: ProgressInfoSize
+    let useNumber: Bool
+    let showTitle: Bool
+    let showDescription: Bool
+    let customIcon: String?
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            ForEach(Array(steps.enumerated()), id: \.element.id) { index, item in
+                let isLast = index == steps.count - 1
+
+                HStack(alignment: .top, spacing: 0) {
+                    VStack(spacing: 0) {
+                        ProgressInfoStepIcon(
+                            index: index,
+                            size: size,
+                            useNumber: useNumber,
+                            customIcon: customIcon
+                        )
+                        if !isLast {
+                            Rectangle()
+                                .fill(theme.colors.primary.opacity(0.2))
+                                .frame(width: 2)
+                                .frame(maxHeight: .infinity)
+                        }
+                    }
+                    .frame(minHeight: isLast ? 40 : 48)
+
+                    VStack(alignment: .leading, spacing: 0) {
+                        if showTitle && !item.title.isEmpty {
+                            MomoText(item.title, typography: .headerXsSemibold)
+                                .lineLimit(2)
+                                .frame(maxWidth: .infinity, alignment: .leading)
+                                .padding(.trailing, Spacing.S)
+                        }
+                        if showDescription, let desc = item.description, !desc.isEmpty {
+                            MomoText(desc, typography: .descriptionDefaultRegular, color: Colors.black12)
+                                .frame(maxWidth: .infinity, alignment: .leading)
+                        }
+                    }
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                    .padding(.trailing, Spacing.S)
+                    .padding(.bottom, isLast ? 0 : Spacing.S)
+                }
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .fixedSize(horizontal: false, vertical: true)
+            }
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+    }
+}
+
+// MARK: - Step icon
+
+private struct ProgressInfoStepIcon: View {
+    @Environment(\.momoFontScale) private var fontScale
+    let index: Int
+    let size: ProgressInfoSize
+    let useNumber: Bool
+    let customIcon: String?
+
+    var body: some View {
+        let containerSize = fontScale(size == .small ? 16 : 24)
+        let dotSize = fontScale(size == .small ? 6 : 8)
+        let iconSize = fontScale(size == .small ? 12 : 16)
+
+        ZStack {
+            Circle()
+                .fill(progressInfoLineColor)
+                .overlay(Circle().strokeBorder(progressInfoLineColor, lineWidth: 2))
+
+            if useNumber {
+                MomoText("\(index + 1)", typography: .headerXsSemibold, color: progressInfoAccentColor)
+                    .multilineTextAlignment(.center)
+            } else if let icon = customIcon, !icon.isEmpty {
+                Icon(source: icon, size: iconSize, color: progressInfoAccentColor)
+            } else {
+                Circle()
+                    .fill(progressInfoAccentColor)
+                    .frame(width: dotSize, height: dotSize)
+            }
+        }
+        .frame(width: containerSize, height: containerSize)
+    }
+}
+
+// MARK: - Horizontal connector line
+
+private struct ProgressInfoHorizontalLine: View {
+    var body: some View {
+        Rectangle()
+            .fill(progressInfoLineColor)
+            .frame(height: 2)
+            .frame(maxWidth: .infinity)
+    }
+}

package/ios/Radio/Radio.swift

@@ -0,0 +1,69 @@
+import Foundation
+import SwiftUI
+
+public struct Radio: View {
+    @Environment(\.appTheme) private var theme
+
+    var value: AnyHashable
+    @Binding var groupValue: AnyHashable
+    var disabled: Bool
+    var onChange: (() -> Void)?
+    var label: String
+
+    public init(
+        value: AnyHashable,
+        groupValue: Binding<AnyHashable>,
+        disabled: Bool = false,
+        onChange: (() -> Void)? = nil,
+        label: String = ""
+    ) {
+        self.value = value
+        self._groupValue = groupValue
+        self.disabled = disabled
+        self.onChange = onChange
+        self.label = label
+    }
+
+    private var selected: Bool {
+        value == groupValue
+    }
+
+    private func onTap() {
+        groupValue = value
+        onChange?()
+    }
+
+    public var body: some View {
+        SwiftUI.Button(action: onTap) {
+            HStack(spacing: 0) {
+                RoundedRectangle(cornerRadius: Radius.M)
+                    .stroke(borderColor, lineWidth: borderWidth)
+                    .frame(width: 20, height: 20)
+                    .padding(.trailing, label.isEmpty ? 0 : Spacing.XS)
+
+                if !label.isEmpty {
+                    MomoText(label, typography: .descriptionDefaultRegular)
+                }
+            }
+            .contentShape(Rectangle())
+        }
+        .buttonStyle(ActiveOpacityButtonStyle())
+        .disabled(disabled)
+    }
+
+    private var borderWidth: CGFloat {
+        selected ? 6 : 2
+    }
+
+    private var borderColor: Color {
+        if disabled && selected {
+            return theme.colors.background.tonal
+        } else if disabled {
+            return theme.colors.text.disable
+        } else if selected {
+            return theme.colors.primary
+        } else {
+            return theme.colors.text.default
+        }
+    }
+}