@momo-kits/native-kits 0.162.18-debug → 0.162.19-debug

package/ios/Tooltip/Tooltip.swift

@@ -0,0 +1,482 @@
+import SwiftUI
+
+// MARK: - Types
+
+/// Tooltip placement relative to the anchor element.
+public enum TooltipPlacement {
+    case top
+    case bottom
+    case left
+    case right
+}
+
+/// Cross-axis alignment of the tooltip relative to the anchor.
+public enum TooltipAlign {
+    case start
+    case center
+    case end
+}
+
+/// Describes a single action button displayed in the tooltip.
+public struct TooltipButton {
+    public let title: String?
+    public let icon: String?
+    public let onPress: (() -> Void)?
+
+    public init(
+        title: String? = nil,
+        icon: String? = nil,
+        onPress: (() -> Void)? = nil
+    ) {
+        self.title = title
+        self.icon = icon
+        self.onPress = onPress
+    }
+}
+
+/// State holder for controlling tooltip visibility imperatively.
+/// Mirrors the Compose `TooltipState` / `rememberTooltipState()` pattern.
+public final class TooltipState: ObservableObject {
+    @Published public private(set) var isVisible: Bool = false
+
+    public init() {}
+
+    /// Shows the tooltip.
+    public func show() {
+        isVisible = true
+    }
+
+    /// Hides the tooltip.
+    public func hide() {
+        isVisible = false
+    }
+
+    /// Toggles the tooltip visibility.
+    public func toggle() {
+        isVisible.toggle()
+    }
+}
+
+// MARK: - Constants
+
+private enum TooltipConst {
+    static let offset = Spacing.S          // TOOLTIP_OFFSET
+    static let arrowSize: CGFloat = 6      // ARROW_SIZE
+    static let maxWidth: CGFloat = 300
+    static let cornerRadius = Radius.S
+    static let arrowCornerRadius: CGFloat = 2
+    static let arrowEdgeMargin = Spacing.M
+    static let arrowOverlap: CGFloat = 1
+}
+
+// MARK: - Arrow Shape
+
+/// Triangular arrow pointing away from the anchor in the given placement direction.
+struct TooltipArrowShape: Shape {
+    let placement: TooltipPlacement
+
+    func path(in rect: CGRect) -> Path {
+        let w = rect.width
+        let h = rect.height
+        var path = Path()
+        switch placement {
+        case .top:
+            path.move(to: CGPoint(x: 0, y: 0))
+            path.addLine(to: CGPoint(x: w, y: 0))
+            path.addLine(to: CGPoint(x: w / 2, y: h))
+        case .bottom:
+            path.move(to: CGPoint(x: 0, y: h))
+            path.addLine(to: CGPoint(x: w, y: h))
+            path.addLine(to: CGPoint(x: w / 2, y: 0))
+        case .left:
+            path.move(to: CGPoint(x: 0, y: 0))
+            path.addLine(to: CGPoint(x: 0, y: h))
+            path.addLine(to: CGPoint(x: w, y: h / 2))
+        case .right:
+            path.move(to: CGPoint(x: w, y: 0))
+            path.addLine(to: CGPoint(x: w, y: h))
+            path.addLine(to: CGPoint(x: 0, y: h / 2))
+        }
+        path.closeSubpath()
+        return path
+    }
+}
+
+// MARK: - Anchor bounds preference
+
+private struct TooltipAnchorBoundsKey: PreferenceKey {
+    static var defaultValue: Anchor<CGRect>? = nil
+    static func reduce(value: inout Anchor<CGRect>?, nextValue: () -> Anchor<CGRect>?) {
+        value = nextValue() ?? value
+    }
+}
+
+// MARK: - Tooltip
+
+/// A tooltip component that wraps `content` (the anchor) and shows a positioned
+/// tooltip popup with title, description, close button, and action buttons.
+///
+/// Port of the Compose / React Native `Tooltip` component.
+public struct Tooltip<Content: View>: View {
+    @ObservedObject private var state: TooltipState
+    private let title: String?
+    private let description: String
+    private let buttons: [TooltipButton]
+    private let placement: TooltipPlacement
+    private let align: TooltipAlign
+    private let onVisibleChange: ((Bool) -> Void)?
+    private let onPressClose: (() -> Void)?
+    private let content: Content
+
+    public init(
+        state: TooltipState,
+        title: String? = nil,
+        description: String,
+        buttons: [TooltipButton] = [],
+        placement: TooltipPlacement = .top,
+        align: TooltipAlign = .center,
+        onVisibleChange: ((Bool) -> Void)? = nil,
+        onPressClose: (() -> Void)? = nil,
+        @ViewBuilder content: () -> Content
+    ) {
+        self.state = state
+        self.title = title
+        self.description = description
+        self.buttons = buttons
+        self.placement = placement
+        self.align = align
+        self.onVisibleChange = onVisibleChange
+        self.onPressClose = onPressClose
+        self.content = content()
+    }
+
+    public var body: some View {
+        content
+            .anchorPreference(key: TooltipAnchorBoundsKey.self, value: .bounds) { $0 }
+            .overlayPreferenceValue(TooltipAnchorBoundsKey.self) { anchor in
+                GeometryReader { proxy in
+                    if state.isVisible, let anchor = anchor {
+                        let anchorRect = proxy[anchor]
+                        TooltipPopupContent(
+                            title: title,
+                            description: description,
+                            buttons: buttons,
+                            placement: placement,
+                            align: align,
+                            onPressClose: onPressClose
+                        )
+                        .fixedSize()
+                        .modifier(
+                            TooltipPositionModifier(
+                                anchorRect: anchorRect,
+                                containerSize: proxy.size,
+                                placement: placement,
+                                align: align
+                            )
+                        )
+                    }
+                }
+            }
+            .onChange(of: state.isVisible) { newValue in
+                onVisibleChange?(newValue)
+            }
+    }
+}
+
+// MARK: - Positioning
+
+/// Positions the tooltip (already sized via `.fixedSize()`) relative to the anchor,
+/// mirroring `TooltipPositionProvider.calculatePosition`.
+private struct TooltipPositionModifier: ViewModifier {
+    let anchorRect: CGRect
+    let containerSize: CGSize
+    let placement: TooltipPlacement
+    let align: TooltipAlign
+
+    @State private var popupSize: CGSize = .zero
+
+    private var offsetPx: CGFloat {
+        TooltipConst.offset + TooltipConst.arrowSize
+    }
+
+    func body(content: Content) -> some View {
+        content
+            .background(
+                GeometryReader { p in
+                    Color.clear
+                        .onAppear { popupSize = p.size }
+                        .onChange(of: p.size) { popupSize = $0 }
+                }
+            )
+            .offset(x: originX, y: originY)
+    }
+
+    private var originX: CGFloat {
+        let popW = popupSize.width
+        switch placement {
+        case .top, .bottom:
+            return alignHorizontal(anchorRect.minX, anchorRect.width, popW)
+        case .left:
+            return anchorRect.minX - popW - offsetPx
+        case .right:
+            return anchorRect.maxX + offsetPx
+        }
+    }
+
+    private var originY: CGFloat {
+        let popH = popupSize.height
+        switch placement {
+        case .top:
+            return anchorRect.minY - popH - offsetPx
+        case .bottom:
+            return anchorRect.maxY + offsetPx
+        case .left, .right:
+            return alignVertical(anchorRect.minY, anchorRect.height, popH)
+        }
+    }
+
+    private func alignHorizontal(_ anchorX: CGFloat, _ anchorW: CGFloat, _ popW: CGFloat) -> CGFloat {
+        switch align {
+        case .start: return anchorX
+        case .end: return anchorX + anchorW - popW
+        case .center: return anchorX + (anchorW - popW) / 2
+        }
+    }
+
+    private func alignVertical(_ anchorY: CGFloat, _ anchorH: CGFloat, _ popH: CGFloat) -> CGFloat {
+        switch align {
+        case .start: return anchorY
+        case .end: return anchorY + anchorH - popH
+        case .center: return anchorY + (anchorH - popH) / 2
+        }
+    }
+}
+
+// MARK: - Popup content
+
+private struct TooltipPopupContent: View {
+    let title: String?
+    let description: String?
+    let buttons: [TooltipButton]
+    let placement: TooltipPlacement
+    let align: TooltipAlign
+    let onPressClose: (() -> Void)?
+
+    var body: some View {
+        ZStack {
+            VStack(alignment: .leading, spacing: 0) {
+                HStack(alignment: .top, spacing: 0) {
+                    VStack(alignment: .leading, spacing: 0) {
+                        if let title = title, !title.isEmpty {
+                            MomoText(title, typography: .headerSSemibold, color: Colors.black01)
+                                .lineLimit(1)
+                                .truncationMode(.tail)
+                                .padding(.bottom, Spacing.XS)
+                        }
+                        if let description = description, !description.isEmpty {
+                            MomoText(description, typography: .descriptionDefaultRegular, color: Colors.black01)
+                                .lineLimit(2)
+                                .truncationMode(.tail)
+                        }
+                    }
+                    .frame(maxWidth: .infinity, alignment: .leading)
+
+                    if let onPressClose = onPressClose {
+                        Spacer().frame(width: Spacing.M)
+                        SwiftUI.Button(action: onPressClose) {
+                            Icon(source: "navigation_close", size: 20, color: Colors.black01)
+                                .frame(width: 20, height: 20)
+                        }
+                        .buttonStyle(.plain)
+                    }
+                }
+
+                if !buttons.isEmpty {
+                    Spacer().frame(height: Spacing.M)
+                    TooltipButtons(buttons: buttons)
+                        .frame(maxWidth: .infinity, alignment: .trailing)
+                }
+            }
+            .padding(Spacing.M)
+            .frame(maxWidth: TooltipConst.maxWidth, alignment: .leading)
+            .background(Colors.black17)
+            .clipShape(RoundedRectangle(cornerRadius: TooltipConst.cornerRadius))
+        }
+        .overlay(arrow, alignment: arrowAlignment)
+    }
+
+    // MARK: Arrow
+
+    @ViewBuilder
+    private var arrow: some View {
+        let arrowWidth = TooltipConst.arrowSize * 2
+        let arrowHeight = TooltipConst.arrowSize
+        let isVertical = placement == .top || placement == .bottom
+        TooltipArrowShape(placement: placement)
+            .fill(Colors.black17)
+            .frame(
+                width: isVertical ? arrowWidth : arrowHeight,
+                height: isVertical ? arrowHeight : arrowWidth
+            )
+            .offset(x: arrowOffsetX, y: arrowOffsetY)
+    }
+
+    private var arrowAlignment: Alignment {
+        switch placement {
+        case .top:
+            switch align {
+            case .start: return .bottomLeading
+            case .center: return .bottom
+            case .end: return .bottomTrailing
+            }
+        case .bottom:
+            switch align {
+            case .start: return .topLeading
+            case .center: return .top
+            case .end: return .topTrailing
+            }
+        case .left:
+            switch align {
+            case .start: return .topTrailing
+            case .center: return .trailing
+            case .end: return .bottomTrailing
+            }
+        case .right:
+            switch align {
+            case .start: return .topLeading
+            case .center: return .leading
+            case .end: return .bottomLeading
+            }
+        }
+    }
+
+    private var arrowOffsetX: CGFloat {
+        let arrowHeight = TooltipConst.arrowSize
+        switch placement {
+        case .left: return arrowHeight - TooltipConst.arrowOverlap
+        case .right: return -arrowHeight + TooltipConst.arrowOverlap
+        default:
+            switch align {
+            case .start: return TooltipConst.arrowEdgeMargin
+            case .end: return -TooltipConst.arrowEdgeMargin
+            case .center: return 0
+            }
+        }
+    }
+
+    private var arrowOffsetY: CGFloat {
+        let arrowHeight = TooltipConst.arrowSize
+        switch placement {
+        case .top: return arrowHeight - TooltipConst.arrowOverlap
+        case .bottom: return -arrowHeight + TooltipConst.arrowOverlap
+        default:
+            switch align {
+            case .start: return TooltipConst.arrowEdgeMargin
+            case .end: return -TooltipConst.arrowEdgeMargin
+            case .center: return 0
+            }
+        }
+    }
+}
+
+// MARK: - Buttons row
+
+private struct TooltipButtons: View {
+    let buttons: [TooltipButton]
+
+    var body: some View {
+        HStack(spacing: 0) {
+            content
+        }
+    }
+
+    @ViewBuilder
+    private var content: some View {
+        if buttons.count == 1 {
+            TooltipSingleButton(btn: buttons[0])
+        } else if buttons.count == 2 {
+            let primary = buttons[0]
+            let secondary = buttons[1]
+            let bothIcons = primary.icon != nil && secondary.icon != nil
+            if bothIcons {
+                TooltipIconButton(icon: secondary.icon ?? "", onPress: secondary.onPress ?? {})
+                Spacer().frame(width: Spacing.S)
+                TooltipIconButton(icon: primary.icon ?? "", onPress: primary.onPress ?? {})
+            } else {
+                TooltipSecondaryButton(title: secondary.title ?? "", onPress: secondary.onPress ?? {})
+                Spacer().frame(width: Spacing.S)
+                TooltipPrimaryButton(title: primary.title ?? "", onPress: primary.onPress ?? {})
+            }
+        } else {
+            ForEach(Array(buttons.enumerated()), id: \.offset) { index, btn in
+                if index > 0 {
+                    Spacer().frame(width: Spacing.XXS)
+                }
+                TooltipSingleButton(btn: btn)
+            }
+        }
+    }
+}
+
+private func tooltipLimitWithEllipsis(_ value: String, max: Int = 16) -> String {
+    value.count > max ? String(value.prefix(max)) + "…" : value
+}
+
+private struct TooltipSingleButton: View {
+    let btn: TooltipButton
+
+    var body: some View {
+        if let icon = btn.icon {
+            TooltipIconButton(icon: icon, onPress: btn.onPress ?? {})
+        } else {
+            TooltipPrimaryButton(title: btn.title ?? "", onPress: btn.onPress ?? {})
+        }
+    }
+}
+
+private struct TooltipPrimaryButton: View {
+    let title: String
+    let onPress: () -> Void
+
+    var body: some View {
+        Button(
+            title: tooltipLimitWithEllipsis(title),
+            action: onPress,
+            type: .secondary,
+            size: .medium,
+            isFull: false
+        )
+    }
+}
+
+private struct TooltipSecondaryButton: View {
+    let title: String
+    let onPress: () -> Void
+
+    var body: some View {
+        SwiftUI.Button(action: onPress) {
+            MomoText(tooltipLimitWithEllipsis(title), typography: .actionSBold, color: Colors.black01)
+                .lineLimit(1)
+                .truncationMode(.tail)
+                .padding(.horizontal, Spacing.M)
+                .padding(.vertical, Spacing.S)
+        }
+        .buttonStyle(.plain)
+    }
+}
+
+private struct TooltipIconButton: View {
+    let icon: String
+    let onPress: () -> Void
+
+    var body: some View {
+        let iconButtonSize = scaleSize(36)
+        SwiftUI.Button(action: onPress) {
+            Icon(source: icon, size: 24)
+                .frame(width: iconButtonSize, height: iconButtonSize)
+                .background(Colors.black01)
+                .clipShape(RoundedRectangle(cornerRadius: Radius.XL))
+        }
+        .buttonStyle(.plain)
+    }
+}

package/ios/Typography/Text.swift

@@ -118,27 +118,98 @@ public extension TypographyStyle {
 }
 
 public struct MomoText: View {
+    @Environment(\.appTheme) private var theme
     private let content: String
     private let typography: TypographyStyle
-    private let color: Color
+    private let color: Color?
+    private let textAlign: TextAlignment
+    private let maxLines: Int
+    private let minLines: Int
+    private let lineLimitRange: ClosedRange<Int>?
+    private let truncationMode: Text.TruncationMode
+    private let strikethrough: Bool
+    private let underline: Bool
+    private let letterSpacing: CGFloat?
+    private let softWrap: Bool
+    private let accessibilityId: String?
 
     public init(
         _ content: String,
         typography: TypographyStyle = .bodyDefaultRegular,
-        color: Color = Colors.text
+        color: Color? = nil,
+        textAlign: TextAlignment = .leading,
+        maxLines: Int = Int.max,
+        minLines: Int = 1,
+        truncationMode: Text.TruncationMode = .tail,
+        strikethrough: Bool = false,
+        underline: Bool = false,
+        letterSpacing: CGFloat? = nil,
+        softWrap: Bool = true,
+        accessibilityId: String? = nil
     ) {
         self.content = content
         self.typography = typography
         self.color = color
+        self.textAlign = textAlign
+        self.maxLines = maxLines
+        self.minLines = minLines
+        // SwiftUI's range-based `lineLimit` is iOS 16+ only; keep the range for
+        // newer OS versions and fall back to the legacy single-value overload.
+        if maxLines == Int.max && minLines <= 1 {
+            self.lineLimitRange = nil
+        } else {
+            let upper = maxLines == Int.max ? Int.max : Swift.max(maxLines, minLines)
+            self.lineLimitRange = Swift.max(1, minLines)...upper
+        }
+        self.truncationMode = truncationMode
+        self.strikethrough = strikethrough
+        self.underline = underline
+        self.letterSpacing = letterSpacing
+        self.softWrap = softWrap
+        self.accessibilityId = accessibilityId
     }
 
     public var body: some View {
-        let text = SwiftUI.Text(content)
+        let textColor = color ?? theme.colors.text.default
+        // Strikethrough is driven either by the typography variant (mirrors Compose
+        // *Strikethrough styles) or the explicit `strikethrough` flag.
+        let isStrikethrough = strikethrough || typography.isStrikethrough
+
+        var text = SwiftUI.Text(content)
             .font(.system(size: scaleSize(typography.fontSize), weight: typography.fontWeight))
-            .foregroundColor(color)
-            .lineSpacing(scaleSize(typography.lineHeight) - scaleSize(typography.fontSize))
+            .foregroundColor(textColor)
+            .strikethrough(isStrikethrough, color: textColor)
+            .underline(underline, color: textColor)
+
+        if let letterSpacing = letterSpacing {
+            text = text.tracking(letterSpacing)
+        }
 
         return text
+            .multilineTextAlignment(textAlign)
+            .lineSpacing(scaleSize(typography.lineHeight) - scaleSize(typography.fontSize))
+            .modifier(LineLimitModifier(range: lineLimitRange))
+            .truncationMode(truncationMode)
+            .fixedSize(horizontal: !softWrap, vertical: false)
+            .accessibilityIdentifier(accessibilityId ?? content)
             .ignoreBoldTextSetting()
     }
 }
+
+// Applies a line-limit range only on iOS 16+. Older targets use the legacy
+// single-value overload so the file still compiles for iOS 15.
+private struct LineLimitModifier: ViewModifier {
+    let range: ClosedRange<Int>?
+
+    func body(content: Content) -> some View {
+        if let range = range {
+            if #available(iOS 16.0, *) {
+                content.lineLimit(range)
+            } else {
+                content.lineLimit(range.upperBound)
+            }
+        } else {
+            content
+        }
+    }
+}