[#250] YDSLabel & LabelPageView

YDS-Storybook/SwiftUI/Atom/LabelPageView.swift

@@ -12,35 +12,39 @@ import YDS_SwiftUI
     let title: String = "Label"
 
     @State var text: String? = "Label"
-    @State var int: Int = 0
     @State var typoStyleSelectedIndex = 0
+    @State var lineLimit: Int? = nil
     @State var textColorSelectedIndex: Int = 0
-    @State var lineBreakModeSelectedIndex: Int = 0
     @State var alignmentSelectedIndex: Int = 1
-    @State var lineBreakStrategySelectedIndex: Int = 2
+    @State var truncationModeSelectedIndex: Int = 2
+    @State var isAllowsTightening: Bool = false
 
-    var selectedColor: Color { return YDSSwiftUIColorWrapper.textColors.items[textColorSelectedIndex].color
-        ?? .black }
-    var selectedTypoStyle: Font { return Font(String.TypoStyle.allCases[typoStyleSelectedIndex].font) }
+    var selectedTypoStyle: Font {
+        return Font(String.TypoStyle.allCases[typoStyleSelectedIndex].font)
+    }
+    var selectedColor: Color {
+        return YDSSwiftUIColorWrapper.textColors.items[textColorSelectedIndex].color
+        ?? .black
+    }
+    var selectedAlignment: TextAlignment {
+        return TextAlignment.allCases[alignmentSelectedIndex]
+    }
+    var selectedTruncationMode: Text.TruncationMode {
+        return Text.TruncationMode.allCases[truncationModeSelectedIndex]
+    }
 
     public var body: some View {
         StorybookPageView(sample: {
             VStack {
-                GeometryReader { geometry in
-                    YDSLabel(
-                        text: text ?? "",
-                        typoStyle: YDSLabel.LabelTypoStyle.allCases[typoStyleSelectedIndex],
-                        textColor: selectedColor,
-                        maxWidth: geometry.size.width - 32,
-                        numberOfLines: int,
-                        lineBreakMode: NSLineBreakMode.allCases[lineBreakModeSelectedIndex],
-                        alignment: NSTextAlignment.allCases[alignmentSelectedIndex],
-                        lineBreakStrategy: NSParagraphStyle.LineBreakStrategy.allCases[lineBreakStrategySelectedIndex]
-                    )
-                    .frame(height: YDSScreenSize.width * 3/4 - 32)
-                    .padding(16)
-                    .clipped()
-                }
+                YDSLabel(
+                    text: text,
+                    style: selectedTypoStyle,
+                    lineLimit: lineLimit,
+                    textColor: selectedColor,
+                    alignment: selectedAlignment,
+                    truncationMode: selectedTruncationMode,
+                    allowsTightening: isAllowsTightening
+                )
             }
         }, options: [
             Option.optionalString(
@@ -50,30 +54,29 @@ import YDS_SwiftUI
                 description: "style",
                 cases: String.TypoStyle.allCases,
                 selectedIndex: $typoStyleSelectedIndex),
-            Option.int(description: "numberOfLines", value: $int),
+            Option.optionalInt(
+                description: "lineLimit",
+                value: $lineLimit),
             Option.enum(
                 description: "textColor",
                 cases: YDSSwiftUIColorWrapper.textColors.items,
                 selectedIndex: $textColorSelectedIndex),
-            Option.enum(
-                description: "lineBreakMode",
-                cases: NSLineBreakMode.allCases,
-                selectedIndex: $lineBreakModeSelectedIndex),
             Option.enum(
                 description: "alignment",
-                cases: NSTextAlignment.allCases,
+                cases: TextAlignment.allCases,
                 selectedIndex: $alignmentSelectedIndex),
             Option.enum(
-                description: "lineBreakStrategy",
-                cases: NSParagraphStyle.LineBreakStrategy.allCases,
-                selectedIndex: $lineBreakStrategySelectedIndex)
+                description: "truncationMode",
+                cases: Text.TruncationMode.allCases,
+                selectedIndex: $truncationModeSelectedIndex),
+            Option.bool(
+                description: "allowsTightening",
+                isOn: $isAllowsTightening)
         ])
         .navigationTitle(title)
     }
 }
 
-struct LabelPageView_Previews: PreviewProvider {
-    static var previews: some View {
-        LabelPageView()
-    }
+#Preview {
+    LabelPageView()
 }

YDS-SwiftUI/Source/Atom/YDSLabel.swift

@@ -8,123 +8,51 @@
 import SwiftUI
 import YDS_Essential
 
-public struct YDSLabel: UIViewRepresentable {
-    let text: String?
-    let typoStyle: UIFont?
-    let textColor: Color?
-    let maxWidth: CGFloat?
-    let numberOfLines: Int?
-    let lineBreakMode: NSLineBreakMode?
-    let alignment: NSTextAlignment?
-    let lineBreakStrategy: NSParagraphStyle.LineBreakStrategy?
-
-    public enum LabelTypoStyle: CaseIterable {
-        case display1
-        case display2
-
-        case title1
-        case title2
-        case title3
-
-        case subtitle1
-        case subtitle2
-        case subtitle3
-
-        case body1
-        case body2
-
-        case button0
-        case button1
-        case button2
-        case button3
-        case button4
-
-        case caption0
-        case caption1
-        case caption2
-
-        var uiFont: UIFont {
-            switch self {
-            case .display1:
-                return UIFont.systemFont(ofSize: 40, weight: .bold )
-            case .display2:
-                return UIFont.systemFont(ofSize: 32, weight: .bold )
-            case .title1:
-                return UIFont.systemFont(ofSize: 28, weight: .bold )
-            case .title2:
-                return UIFont.systemFont(ofSize: 24, weight: .bold )
-            case .title3:
-                return UIFont.systemFont(ofSize: 20, weight: .bold )
-            case .subtitle1:
-                return UIFont.systemFont(ofSize: 20, weight: .semibold )
-            case .subtitle2:
-                return UIFont.systemFont(ofSize: 16, weight: .semibold )
-            case .subtitle3:
-                return UIFont.systemFont(ofSize: 14, weight: .semibold )
-            case .body1:
-                return UIFont.systemFont(ofSize: 15, weight: .regular )
-            case .body2:
-                return UIFont.systemFont(ofSize: 14, weight: .regular )
-            case .button0:
-                return UIFont.systemFont(ofSize: 16, weight: .medium )
-            case .button1:
-                return UIFont.systemFont(ofSize: 16, weight: .semibold )
-            case .button2:
-                return UIFont.systemFont(ofSize: 14, weight: .semibold )
-            case .button3:
-                return UIFont.systemFont(ofSize: 14, weight: .regular )
-            case .button4:
-                return UIFont.systemFont(ofSize: 12, weight: .medium )
-            case .caption0:
-                return UIFont.systemFont(ofSize: 12, weight: .semibold )
-            case .caption1:
-                return UIFont.systemFont(ofSize: 12, weight: .regular )
-            case .caption2:
-                return UIFont.systemFont(ofSize: 11, weight: .regular )
-            }
-        }
-    }
+extension Text.TruncationMode {
+    public static var allCases: [Text.TruncationMode] = [.head, .middle, .tail]
+}
 
-    public init(text: String,
-                typoStyle: LabelTypoStyle = .body1,
-                textColor: Color = Color.black,
-                maxWidth: CGFloat = .greatestFiniteMagnitude,
-                numberOfLines: Int = 0,
-                lineBreakMode: NSLineBreakMode = .byWordWrapping,
-                alignment: NSTextAlignment = .center,
-                lineBreakStrategy: NSParagraphStyle.LineBreakStrategy = .hangulWordPriority) {
+public struct YDSLabel: View {
+    let text: String?
+    let style: Font
+    let lineLimit: Int?
+    let textColor: Color
+    let alignment: TextAlignment
+    let truncationMode: Text.TruncationMode
+    let allowsTightening: Bool
+
+    public init(text: String? = "Label",
+                style: Font = YDSFont.display1,
+                lineLimit: Int? = nil,
+                textColor: Color = YDSColor.textPrimary,
+                alignment: TextAlignment = .center,
+                truncationMode: Text.TruncationMode = .tail,
+                allowsTightening: Bool = false
+    ) {
         self.text = text
-        self.typoStyle = typoStyle.uiFont
+        self.style = style
+        self.lineLimit = lineLimit
         self.textColor = textColor
-        self.maxWidth = maxWidth
-        self.numberOfLines = numberOfLines
-        self.lineBreakMode = lineBreakMode
         self.alignment = alignment
-        self.lineBreakStrategy = lineBreakStrategy
+        self.truncationMode = truncationMode
+        self.allowsTightening = allowsTightening
     }
 
-    public func makeUIView(context: Context) -> UILabel {
-        let label = UILabel()
-        label.text = text
-        label.font = typoStyle
-        label.textColor = UIColor(textColor ?? .black)
-        label.numberOfLines = numberOfLines ?? 0
-        label.lineBreakMode = lineBreakMode ?? .byWordWrapping
-        label.textAlignment = alignment ?? .center
-        label.lineBreakStrategy = lineBreakStrategy ?? .hangulWordPriority
-        label.preferredMaxLayoutWidth = maxWidth ?? .greatestFiniteMagnitude
-
-        return label
+    public var body: some View {
+        if let text = text {
+            Text(text)
+                .font(style)
+                .lineLimit(lineLimit)
+                .foregroundColor(textColor)
+                .multilineTextAlignment(alignment)
+                .truncationMode(truncationMode)
+                .allowsTightening(allowsTightening)
+        }
     }
+}
 
-    public func updateUIView(_ uiView: UILabel, context: Context) {
-        uiView.text = text
-        uiView.font = typoStyle
-        uiView.textColor = UIColor(textColor ?? .black)
-        uiView.numberOfLines = numberOfLines ?? 0
-        uiView.lineBreakMode = lineBreakMode ?? .byWordWrapping
-        uiView.textAlignment = alignment ?? .center
-        uiView.lineBreakStrategy = lineBreakStrategy ?? .hangulWordPriority
-        uiView.setContentHuggingPriority(.defaultHigh, for: .vertical)
+struct YDSLabel_Previews: PreviewProvider {
+    static var previews: some View {
+        YDSLabel()
     }
 }

YDS-SwiftUI/Source/Foundation/YDSTypoStyle.swift

@@ -103,5 +103,12 @@ extension String {
                 return 1.3
             }
         }
+
+        public static var allCases: [String.TypoStyle] = [.display1, .display2,
+                                                          .title1, .title2, .title3,
+                                                          .subtitle1, .subtitle2, .subtitle3,
+                                                          .body1, .body2,
+                                                          .button0, .button1, .button2, .button3, .button4,
+                                                          .caption0, .caption1, .caption2]
     }
 }