@momo-kits/native-kits 0.163.1-beta.8-debug → 0.163.1-beta.9-debug

package/ios/Title/Title.swift

@@ -0,0 +1,269 @@
+import SwiftUI
+
+// MARK: - Enums
+
+public enum TitleType {
+    case card
+    case section
+}
+
+public enum TitleSize {
+    case small
+    case medium
+    case large
+}
+
+public enum IconAlign {
+    case top
+    case center
+    case bottom
+}
+
+public enum TitleButtonSize {
+    case small
+    case large
+}
+
+// MARK: - Title
+
+public struct Title: View {
+    @Environment(\.appTheme) private var theme
+
+    private let title: String
+    private let type: TitleType
+    private let size: TitleSize
+    private let icon: String?
+    private let iconColor: Color?
+    private let iconAlign: IconAlign
+    private let showRightAction: Bool
+    private let showTrailingAction: Bool
+    private let badgeLabel: String?
+    private let buttonTitle: String?
+    private let buttonSize: TitleButtonSize
+    private let onPressRightAction: () -> Void
+    private let onPressTrailingAction: () -> Void
+    private let textOnly: Bool
+    private let description: String?
+
+    public init(
+        title: String,
+        type: TitleType = .section,
+        size: TitleSize = .medium,
+        icon: String? = nil,
+        iconColor: Color? = nil,
+        iconAlign: IconAlign = .top,
+        showRightAction: Bool = false,
+        showTrailingAction: Bool = false,
+        badgeLabel: String? = nil,
+        buttonTitle: String? = nil,
+        buttonSize: TitleButtonSize = .small,
+        onPressRightAction: @escaping () -> Void = {},
+        onPressTrailingAction: @escaping () -> Void = {},
+        textOnly: Bool = false,
+        description: String? = nil
+    ) {
+        self.title = title
+        self.type = type
+        self.size = size
+        self.icon = icon
+        self.iconColor = iconColor
+        self.iconAlign = iconAlign
+        self.showRightAction = showRightAction
+        self.showTrailingAction = showTrailingAction
+        self.badgeLabel = badgeLabel
+        self.buttonTitle = buttonTitle
+        self.buttonSize = buttonSize
+        self.onPressRightAction = onPressRightAction
+        self.onPressTrailingAction = onPressTrailingAction
+        self.textOnly = textOnly
+        self.description = description
+    }
+
+    // MARK: - Title text style
+
+    private var titleFontSize: CGFloat {
+        switch type {
+        case .card:
+            switch size {
+            case .small: return 14
+            case .medium: return 16
+            case .large: return 18
+            }
+        case .section:
+            switch size {
+            case .small: return 16
+            case .medium: return 18
+            case .large: return 20
+            }
+        }
+    }
+
+    private var titleLineHeight: CGFloat {
+        switch type {
+        case .card:
+            switch size {
+            case .small: return 20
+            case .medium: return 22
+            case .large: return 26
+            }
+        case .section:
+            switch size {
+            case .small: return 24
+            case .medium: return 26
+            case .large: return 28
+            }
+        }
+    }
+
+    private var titleFontWeight: Font.Weight {
+        switch type {
+        case .card: return .regular
+        case .section: return .bold
+        }
+    }
+
+    private var titleMaxLines: Int {
+        (showTrailingAction || badgeLabel != nil) ? 1 : 2
+    }
+
+    private var iconVerticalAlignment: VerticalAlignment {
+        switch iconAlign {
+        case .top: return .top
+        case .center: return .center
+        case .bottom: return .bottom
+        }
+    }
+
+    private var trailingBackground: Color {
+        type == .section
+            ? Colors.black06.opacity(0.6)
+            : Colors.black06.opacity(0.3)
+    }
+
+    // MARK: - Body
+
+    public var body: some View {
+        if textOnly {
+            titleText
+        } else {
+            fullLayout
+        }
+    }
+
+    private var titleText: some View {
+        SwiftUI.Text(title)
+            .font(.system(size: scaleSize(titleFontSize), weight: titleFontWeight))
+            .ignoreBoldTextSetting()
+            .foregroundColor(theme.colors.text.default)
+            .lineSpacing(scaleSize(titleLineHeight) - scaleSize(titleFontSize))
+            .lineLimit(titleMaxLines)
+            .truncationMode(.tail)
+    }
+
+    private var fullLayout: some View {
+        HStack(alignment: .center, spacing: 0) {
+            HStack(alignment: iconVerticalAlignment, spacing: 0) {
+                if let icon = icon {
+                    Icon(
+                        source: icon,
+                        size: 24,
+                        color: iconColor ?? theme.colors.text.default
+                    )
+                    .padding(.trailing, Spacing.S)
+                }
+
+                VStack(alignment: .leading, spacing: 0) {
+                    HStack(alignment: .center, spacing: 0) {
+                        HStack(alignment: .center, spacing: 0) {
+                            titleText
+
+                            if let badgeLabel = badgeLabel {
+                                Spacer().frame(width: 4)
+                                Badge(label: badgeLabel)
+                            }
+                        }
+                        if showTrailingAction != true {
+                            Spacer(minLength: 0)
+                        }
+
+                        if showTrailingAction && !showRightAction {
+                            Spacer().frame(width: 8)
+                            SwiftUI.Button(action: onPressTrailingAction) {
+                                Icon(source: "arrow_chevron_right_small", size: 18)
+                                    .frame(width: 24, height: 24)
+                                    .background(trailingBackground)
+                                    .clipShape(RoundedRectangle(cornerRadius: 12))
+                            }
+                            .buttonStyle(.plain)
+                        }
+                    }
+
+                    if let description = description {
+                        Spacer().frame(height: 4)
+                        MomoText(
+                            description,
+                            typography: .descriptionDefaultRegular,
+                            color: theme.colors.text.secondary
+                        )
+                    }
+                }
+            }
+
+            if showRightAction && !showTrailingAction {
+                Spacer().frame(width: 8)
+                if let buttonTitle = buttonTitle {
+                    SwiftUI.Button(action: onPressRightAction) {
+                        MomoText(
+                            buttonTitle,
+                            typography: buttonSize == .small ? .actionXsBold : .actionSBold,
+                            color: theme.colors.primary
+                        )
+                    }
+                    .buttonStyle(.plain)
+                } else {
+                    SwiftUI.Button(action: onPressRightAction) {
+                        Icon(
+                            source: "arrow_chevron_right_small",
+                            size: 22,
+                            color: theme.colors.primary
+                        )
+                        .frame(width: 24, height: 24)
+                        .background(Colors.pink03.opacity(0.1))
+                        .clipShape(RoundedRectangle(cornerRadius: 12))
+                    }
+                    .buttonStyle(.plain)
+                }
+            }
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .padding(8)
+    }
+}
+
+// MARK: - Preview
+
+#if DEBUG
+struct Title_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack(alignment: .leading, spacing: 12) {
+            Title(title: "Section Small", type: .section, size: .small)
+            Title(
+                title: "Section Medium",
+                type: .section,
+                size: .medium,
+                icon: "basic_home",
+                description: "This is a medium section with icon."
+            )
+            Title(
+                title: "Section Large",
+                type: .section,
+                size: .large,
+                showTrailingAction: true,
+                badgeLabel: "NEW"
+            )
+        }
+        .padding()
+        .previewLayout(.sizeThatFits)
+    }
+}
+#endif