Skip to content

Commit 82a091b

Browse files
iiuooniiuoon
committed
[#250] YDSLabel & LabelPageView
1 parent 282f84b commit 82a091b

File tree

3 files changed

+82
-144
lines changed

3 files changed

+82
-144
lines changed

Diff for: ‎YDS-Storybook/SwiftUI/Atom/LabelPageView.swift

+37-34
Original file line numberDiff line numberDiff line change
@@ -12,35 +12,39 @@ import YDS_SwiftUI
1212
let title: String = "Label"
1313

1414
@State var text: String? = "Label"
15-
@State var int: Int = 0
1615
@State var typoStyleSelectedIndex = 0
16+
@State var lineLimit: Int? = nil
1717
@State var textColorSelectedIndex: Int = 0
18-
@State var lineBreakModeSelectedIndex: Int = 0
1918
@State var alignmentSelectedIndex: Int = 1
20-
@State var lineBreakStrategySelectedIndex: Int = 2
19+
@State var truncationModeSelectedIndex: Int = 2
20+
@State var isAllowsTightening: Bool = false
2121

22-
var selectedColor: Color { return YDSSwiftUIColorWrapper.textColors.items[textColorSelectedIndex].color
23-
?? .black }
24-
var selectedTypoStyle: Font { return Font(String.TypoStyle.allCases[typoStyleSelectedIndex].font) }
22+
var selectedTypoStyle: Font {
23+
return Font(String.TypoStyle.allCases[typoStyleSelectedIndex].font)
24+
}
25+
var selectedColor: Color {
26+
return YDSSwiftUIColorWrapper.textColors.items[textColorSelectedIndex].color
27+
?? .black
28+
}
29+
var selectedAlignment: TextAlignment {
30+
return TextAlignment.allCases[alignmentSelectedIndex]
31+
}
32+
var selectedTruncationMode: Text.TruncationMode {
33+
return Text.TruncationMode.allCases[truncationModeSelectedIndex]
34+
}
2535

2636
public var body: some View {
2737
StorybookPageView(sample: {
2838
VStack {
29-
GeometryReader { geometry in
30-
YDSLabel(
31-
text: text ?? "",
32-
typoStyle: YDSLabel.LabelTypoStyle.allCases[typoStyleSelectedIndex],
33-
textColor: selectedColor,
34-
maxWidth: geometry.size.width - 32,
35-
numberOfLines: int,
36-
lineBreakMode: NSLineBreakMode.allCases[lineBreakModeSelectedIndex],
37-
alignment: NSTextAlignment.allCases[alignmentSelectedIndex],
38-
lineBreakStrategy: NSParagraphStyle.LineBreakStrategy.allCases[lineBreakStrategySelectedIndex]
39-
)
40-
.frame(height: YDSScreenSize.width * 3/4 - 32)
41-
.padding(16)
42-
.clipped()
43-
}
39+
YDSLabel(
40+
text: text,
41+
style: selectedTypoStyle,
42+
lineLimit: lineLimit,
43+
textColor: selectedColor,
44+
alignment: selectedAlignment,
45+
truncationMode: selectedTruncationMode,
46+
allowsTightening: isAllowsTightening
47+
)
4448
}
4549
}, options: [
4650
Option.optionalString(
@@ -50,30 +54,29 @@ import YDS_SwiftUI
5054
description: "style",
5155
cases: String.TypoStyle.allCases,
5256
selectedIndex: $typoStyleSelectedIndex),
53-
Option.int(description: "numberOfLines", value: $int),
57+
Option.optionalInt(
58+
description: "lineLimit",
59+
value: $lineLimit),
5460
Option.enum(
5561
description: "textColor",
5662
cases: YDSSwiftUIColorWrapper.textColors.items,
5763
selectedIndex: $textColorSelectedIndex),
58-
Option.enum(
59-
description: "lineBreakMode",
60-
cases: NSLineBreakMode.allCases,
61-
selectedIndex: $lineBreakModeSelectedIndex),
6264
Option.enum(
6365
description: "alignment",
64-
cases: NSTextAlignment.allCases,
66+
cases: TextAlignment.allCases,
6567
selectedIndex: $alignmentSelectedIndex),
6668
Option.enum(
67-
description: "lineBreakStrategy",
68-
cases: NSParagraphStyle.LineBreakStrategy.allCases,
69-
selectedIndex: $lineBreakStrategySelectedIndex)
69+
description: "truncationMode",
70+
cases: Text.TruncationMode.allCases,
71+
selectedIndex: $truncationModeSelectedIndex),
72+
Option.bool(
73+
description: "allowsTightening",
74+
isOn: $isAllowsTightening)
7075
])
7176
.navigationTitle(title)
7277
}
7378
}
7479

75-
struct LabelPageView_Previews: PreviewProvider {
76-
static var previews: some View {
77-
LabelPageView()
78-
}
80+
#Preview {
81+
LabelPageView()
7982
}

Diff for: ‎YDS-SwiftUI/Source/Atom/YDSLabel.swift

+38-110
Original file line numberDiff line numberDiff line change
@@ -8,123 +8,51 @@
88
import SwiftUI
99
import YDS_Essential
1010

11-
public struct YDSLabel: UIViewRepresentable {
12-
let text: String?
13-
let typoStyle: UIFont?
14-
let textColor: Color?
15-
let maxWidth: CGFloat?
16-
let numberOfLines: Int?
17-
let lineBreakMode: NSLineBreakMode?
18-
let alignment: NSTextAlignment?
19-
let lineBreakStrategy: NSParagraphStyle.LineBreakStrategy?
20-
21-
public enum LabelTypoStyle: CaseIterable {
22-
case display1
23-
case display2
24-
25-
case title1
26-
case title2
27-
case title3
28-
29-
case subtitle1
30-
case subtitle2
31-
case subtitle3
32-
33-
case body1
34-
case body2
35-
36-
case button0
37-
case button1
38-
case button2
39-
case button3
40-
case button4
41-
42-
case caption0
43-
case caption1
44-
case caption2
45-
46-
var uiFont: UIFont {
47-
switch self {
48-
case .display1:
49-
return UIFont.systemFont(ofSize: 40, weight: .bold )
50-
case .display2:
51-
return UIFont.systemFont(ofSize: 32, weight: .bold )
52-
case .title1:
53-
return UIFont.systemFont(ofSize: 28, weight: .bold )
54-
case .title2:
55-
return UIFont.systemFont(ofSize: 24, weight: .bold )
56-
case .title3:
57-
return UIFont.systemFont(ofSize: 20, weight: .bold )
58-
case .subtitle1:
59-
return UIFont.systemFont(ofSize: 20, weight: .semibold )
60-
case .subtitle2:
61-
return UIFont.systemFont(ofSize: 16, weight: .semibold )
62-
case .subtitle3:
63-
return UIFont.systemFont(ofSize: 14, weight: .semibold )
64-
case .body1:
65-
return UIFont.systemFont(ofSize: 15, weight: .regular )
66-
case .body2:
67-
return UIFont.systemFont(ofSize: 14, weight: .regular )
68-
case .button0:
69-
return UIFont.systemFont(ofSize: 16, weight: .medium )
70-
case .button1:
71-
return UIFont.systemFont(ofSize: 16, weight: .semibold )
72-
case .button2:
73-
return UIFont.systemFont(ofSize: 14, weight: .semibold )
74-
case .button3:
75-
return UIFont.systemFont(ofSize: 14, weight: .regular )
76-
case .button4:
77-
return UIFont.systemFont(ofSize: 12, weight: .medium )
78-
case .caption0:
79-
return UIFont.systemFont(ofSize: 12, weight: .semibold )
80-
case .caption1:
81-
return UIFont.systemFont(ofSize: 12, weight: .regular )
82-
case .caption2:
83-
return UIFont.systemFont(ofSize: 11, weight: .regular )
84-
}
85-
}
86-
}
11+
extension Text.TruncationMode {
12+
public static var allCases: [Text.TruncationMode] = [.head, .middle, .tail]
13+
}
8714

88-
public init(text: String,
89-
typoStyle: LabelTypoStyle = .body1,
90-
textColor: Color = Color.black,
91-
maxWidth: CGFloat = .greatestFiniteMagnitude,
92-
numberOfLines: Int = 0,
93-
lineBreakMode: NSLineBreakMode = .byWordWrapping,
94-
alignment: NSTextAlignment = .center,
95-
lineBreakStrategy: NSParagraphStyle.LineBreakStrategy = .hangulWordPriority) {
15+
public struct YDSLabel: View {
16+
let text: String?
17+
let style: Font
18+
let lineLimit: Int?
19+
let textColor: Color
20+
let alignment: TextAlignment
21+
let truncationMode: Text.TruncationMode
22+
let allowsTightening: Bool
23+
24+
public init(text: String? = "Label",
25+
style: Font = YDSFont.display1,
26+
lineLimit: Int? = nil,
27+
textColor: Color = YDSColor.textPrimary,
28+
alignment: TextAlignment = .center,
29+
truncationMode: Text.TruncationMode = .tail,
30+
allowsTightening: Bool = false
31+
) {
9632
self.text = text
97-
self.typoStyle = typoStyle.uiFont
33+
self.style = style
34+
self.lineLimit = lineLimit
9835
self.textColor = textColor
99-
self.maxWidth = maxWidth
100-
self.numberOfLines = numberOfLines
101-
self.lineBreakMode = lineBreakMode
10236
self.alignment = alignment
103-
self.lineBreakStrategy = lineBreakStrategy
37+
self.truncationMode = truncationMode
38+
self.allowsTightening = allowsTightening
10439
}
10540

106-
public func makeUIView(context: Context) -> UILabel {
107-
let label = UILabel()
108-
label.text = text
109-
label.font = typoStyle
110-
label.textColor = UIColor(textColor ?? .black)
111-
label.numberOfLines = numberOfLines ?? 0
112-
label.lineBreakMode = lineBreakMode ?? .byWordWrapping
113-
label.textAlignment = alignment ?? .center
114-
label.lineBreakStrategy = lineBreakStrategy ?? .hangulWordPriority
115-
label.preferredMaxLayoutWidth = maxWidth ?? .greatestFiniteMagnitude
116-
117-
return label
41+
public var body: some View {
42+
if let text = text {
43+
Text(text)
44+
.font(style)
45+
.lineLimit(lineLimit)
46+
.foregroundColor(textColor)
47+
.multilineTextAlignment(alignment)
48+
.truncationMode(truncationMode)
49+
.allowsTightening(allowsTightening)
50+
}
11851
}
52+
}
11953

120-
public func updateUIView(_ uiView: UILabel, context: Context) {
121-
uiView.text = text
122-
uiView.font = typoStyle
123-
uiView.textColor = UIColor(textColor ?? .black)
124-
uiView.numberOfLines = numberOfLines ?? 0
125-
uiView.lineBreakMode = lineBreakMode ?? .byWordWrapping
126-
uiView.textAlignment = alignment ?? .center
127-
uiView.lineBreakStrategy = lineBreakStrategy ?? .hangulWordPriority
128-
uiView.setContentHuggingPriority(.defaultHigh, for: .vertical)
54+
struct YDSLabel_Previews: PreviewProvider {
55+
static var previews: some View {
56+
YDSLabel()
12957
}
13058
}

Diff for: ‎YDS-SwiftUI/Source/Foundation/YDSTypoStyle.swift

+7
Original file line numberDiff line numberDiff line change
@@ -103,5 +103,12 @@ extension String {
103103
return 1.3
104104
}
105105
}
106+
107+
public static var allCases: [String.TypoStyle] = [.display1, .display2,
108+
.title1, .title2, .title3,
109+
.subtitle1, .subtitle2, .subtitle3,
110+
.body1, .body2,
111+
.button0, .button1, .button2, .button3, .button4,
112+
.caption0, .caption1, .caption2]
106113
}
107114
}

0 commit comments

Comments
 (0)