Skip to content

Commit ac0a22e

Browse files
mikhailChelbaevmikhailChelbaev
committed
add more properties to alert's preview
1 parent 53499c0 commit ac0a22e

File tree

3 files changed

+172
-67
lines changed

3 files changed

+172
-67
lines changed

‎Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/ModalPreview+Helpers.swift‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -85,23 +85,14 @@ struct ModalPreviewHelpers {
8585
ContainerRadiusPicker(selection: self.$model.cornerRadius) {
8686
Text("Custom 30px").tag(ContainerRadius.custom(30))
8787
}
88-
Picker("Overlay Style", selection: self.$model.overlayStyle) {
89-
Text("Blurred").tag(ModalOverlayStyle.blurred)
90-
Text("Dimmed").tag(ModalOverlayStyle.dimmed)
91-
Text("Transparent").tag(ModalOverlayStyle.transparent)
92-
}
88+
OverlayStylePicker(selection: self.$model.overlayStyle)
9389
Picker("Size", selection: self.$model.size) {
9490
Text("Small").tag(ModalSize.small)
9591
Text("Medium").tag(ModalSize.medium)
9692
Text("Large").tag(ModalSize.large)
9793
Text("Full").tag(ModalSize.full)
9894
}
99-
Picker("Transition", selection: self.$model.transition) {
100-
Text("None").tag(ModalTransition.none)
101-
Text("Fast").tag(ModalTransition.fast)
102-
Text("Normal").tag(ModalTransition.normal)
103-
Text("Slow").tag(ModalTransition.slow)
104-
}
95+
TransitionPicker(selection: self.$model.transition)
10596
self.additionalPickers()
10697
}
10798
}

‎Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/PreviewPickers.swift‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,20 @@ struct KeyboardTypePicker: View {
211211
}
212212
}
213213

214+
// MARK: - OverlayStylePicker
215+
216+
struct OverlayStylePicker: View {
217+
@Binding var selection: ModalOverlayStyle
218+
219+
var body: some View {
220+
Picker("Overlay Style", selection: self.$selection) {
221+
Text("Blurred").tag(ModalOverlayStyle.blurred)
222+
Text("Dimmed").tag(ModalOverlayStyle.dimmed)
223+
Text("Transparent").tag(ModalOverlayStyle.transparent)
224+
}
225+
}
226+
}
227+
214228
// MARK: - SizePicker
215229

216230
struct SizePicker: View {
@@ -243,6 +257,21 @@ struct SubmitTypePicker: View {
243257
}
244258
}
245259

260+
// MARK: - TransitionPicker
261+
262+
struct TransitionPicker: View {
263+
@Binding var selection: ModalTransition
264+
265+
var body: some View {
266+
Picker("Transition", selection: self.$selection) {
267+
Text("None").tag(ModalTransition.none)
268+
Text("Fast").tag(ModalTransition.fast)
269+
Text("Normal").tag(ModalTransition.normal)
270+
Text("Slow").tag(ModalTransition.slow)
271+
}
272+
}
273+
}
274+
246275
// MARK: - UniversalColorPicker
247276

248277
struct UniversalColorPicker: View {

‎Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/AlertPreview.swift‎

Lines changed: 141 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,10 @@ import UIKit
44

55
struct AlertPreview: View {
66
@State private var model = AlertVM {
7-
$0.title = "Alert Title"
8-
$0.message = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
9-
$0.primaryButton = .init {
10-
$0.title = "OK, Got It"
11-
$0.style = .filled
12-
$0.color = .primary
13-
// $0.cornerRadius = .full
14-
}
15-
$0.secondaryButton = .init {
16-
$0.title = "Cancel"
17-
$0.style = .light
18-
$0.color = .danger
19-
// $0.cornerRadius = .full
20-
}
7+
$0.title = Self.alertTitle
8+
$0.message = AlertMessage.short.rawValue
9+
$0.primaryButton = Self.initialPrimaryButton
10+
$0.secondaryButton = Self.initialSecondaryButton
2111
}
2212

2313
var body: some View {
@@ -32,58 +22,153 @@ struct AlertPreview: View {
3222
.preview
3323
}
3424
Form {
35-
Picker("Background Color", selection: self.$model.backgroundColor) {
36-
Text("Default").tag(Optional<UniversalColor>.none)
37-
Text("Secondary Background").tag(UniversalColor.secondaryBackground)
38-
Text("Accent Background").tag(ComponentColor.accent.background)
39-
Text("Success Background").tag(ComponentColor.success.background)
40-
Text("Warning Background").tag(ComponentColor.warning.background)
41-
Text("Danger Background").tag(ComponentColor.danger.background)
25+
Section("Title") {
26+
Toggle("Has Title", isOn: .init(
27+
get: { return self.model.title != nil },
28+
set: { newValue in
29+
self.model.title = newValue ? Self.alertTitle : nil
30+
}
31+
))
32+
}
33+
34+
Section("Message") {
35+
Picker("Alert Message", selection: self.$model.message) {
36+
Text("None").tag(Optional<String>.none)
37+
Text("Short").tag(AlertMessage.short.rawValue)
38+
Text("Long").tag(AlertMessage.long.rawValue)
39+
}
4240
}
43-
Picker("Content Paddings", selection: self.$model.contentPaddings) {
44-
Text("12px").tag(Paddings(padding: 12))
45-
Text("16px").tag(Paddings(padding: 16))
46-
Text("20px").tag(Paddings(padding: 20))
41+
42+
Section("Primary Button") {
43+
Toggle("Has Primary Button", isOn: .init(
44+
get: { return self.model.primaryButton != nil },
45+
set: { newValue in
46+
self.model.primaryButton = newValue ? Self.initialPrimaryButton : nil
47+
48+
if !self.hasButtons {
49+
self.model.closesOnOverlayTap = true
50+
}
51+
}
52+
))
53+
if self.model.primaryButton != nil {
54+
Picker("Title", selection: self.primaryButtonVMOrDefault.title) {
55+
Text("Short").tag(PrimaryButtonText.short.rawValue)
56+
Text("Longer").tag(PrimaryButtonText.longer.rawValue)
57+
}
58+
self.buttonPickers(for: self.primaryButtonVMOrDefault)
59+
}
60+
}
61+
62+
Section("Secondary Button") {
63+
Toggle("Has Secondary Button", isOn: .init(
64+
get: { return self.model.secondaryButton != nil },
65+
set: { newValue in
66+
self.model.secondaryButton = newValue ? Self.initialSecondaryButton : nil
67+
68+
if !self.hasButtons {
69+
self.model.closesOnOverlayTap = true
70+
}
71+
}
72+
))
73+
if self.model.secondaryButton != nil {
74+
Picker("Title", selection: self.secondaryButtonVMOrDefault.title) {
75+
Text("Short").tag(SecondaryButtonText.short.rawValue)
76+
Text("Longer").tag(SecondaryButtonText.longer.rawValue)
77+
}
78+
self.buttonPickers(for: self.secondaryButtonVMOrDefault)
79+
}
4780
}
48-
ContainerRadiusPicker(selection: self.$model.cornerRadius) {
49-
Text("Custom 30px").tag(ContainerRadius.custom(30))
81+
82+
Section("Main Properties") {
83+
Picker("Background Color", selection: self.$model.backgroundColor) {
84+
Text("Default").tag(Optional<UniversalColor>.none)
85+
Text("Accent Background").tag(ComponentColor.accent.background)
86+
Text("Success Background").tag(ComponentColor.success.background)
87+
Text("Warning Background").tag(ComponentColor.warning.background)
88+
Text("Danger Background").tag(ComponentColor.danger.background)
89+
}
90+
Toggle("Closes On Overlay Tap", isOn: self.$model.closesOnOverlayTap)
91+
.disabled(!self.hasButtons)
92+
Picker("Content Paddings", selection: self.$model.contentPaddings) {
93+
Text("12px").tag(Paddings(padding: 12))
94+
Text("16px").tag(Paddings(padding: 16))
95+
Text("20px").tag(Paddings(padding: 20))
96+
}
97+
ContainerRadiusPicker(selection: self.$model.cornerRadius) {
98+
Text("Custom 30px").tag(ContainerRadius.custom(30))
99+
}
100+
OverlayStylePicker(selection: self.$model.overlayStyle)
101+
TransitionPicker(selection: self.$model.transition)
50102
}
51103
}
52104
}
53105
}
54106

55-
// MARK: - Helpers
107+
// MARK: - Reusable Pickers
56108

57-
private func ukCardContent() -> UIView {
58-
let titleLabel = UILabel()
59-
titleLabel.text = "Card"
60-
titleLabel.font = UniversalFont.mdHeadline.uiFont
61-
titleLabel.textColor = UniversalColor.foreground.uiColor
62-
titleLabel.numberOfLines = 0
63-
64-
let subtitleLabel = UILabel()
65-
subtitleLabel.text = "Card is a container for text, images, and other content."
66-
subtitleLabel.font = UniversalFont.mdBody.uiFont
67-
subtitleLabel.textColor = UniversalColor.secondaryForeground.uiColor
68-
subtitleLabel.numberOfLines = 0
69-
70-
let stackView = UIStackView(arrangedSubviews: [titleLabel, subtitleLabel])
71-
stackView.axis = .vertical
72-
stackView.spacing = 8
73-
74-
return stackView
109+
private func buttonPickers(for buttonVM: Binding<AlertButtonVM>) -> some View {
110+
Group {
111+
AnimationScalePicker(selection: buttonVM.animationScale)
112+
ComponentOptionalColorPicker(selection: buttonVM.color)
113+
ComponentRadiusPicker(selection: buttonVM.cornerRadius) {
114+
Text("Custom: 20px").tag(ComponentRadius.custom(20))
115+
}
116+
Picker("Style", selection: buttonVM.style) {
117+
Text("Filled").tag(ButtonStyle.filled)
118+
Text("Plain").tag(ButtonStyle.plain)
119+
Text("Light").tag(ButtonStyle.light)
120+
Text("Bordered with small border").tag(ButtonStyle.bordered(.small))
121+
Text("Bordered with medium border").tag(ButtonStyle.bordered(.medium))
122+
Text("Bordered with large border").tag(ButtonStyle.bordered(.large))
123+
}
124+
}
75125
}
76126

77-
private func suCardContent() -> some View {
78-
VStack(alignment: .leading, spacing: 8) {
79-
Text("Card")
80-
.foregroundStyle(UniversalColor.foreground.color)
81-
.font(UniversalFont.mdHeadline.font)
82-
83-
Text("Card is a container for text, images, and other content.")
84-
.foregroundStyle(UniversalColor.secondaryForeground.color)
85-
.font(UniversalFont.mdBody.font)
86-
}
127+
// MARK: - Helpers
128+
129+
enum AlertMessage: String {
130+
case short = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
131+
case long = """
132+
Lorem ipsum odor amet, consectetuer adipiscing elit. Vitae vehicula pellentesque lectus orci fames. Cras suscipit dui tortor penatibus turpis ultrices. Laoreet montes adipiscing ante dapibus facilisis. Lorem per fames nec duis quis eleifend imperdiet. Tincidunt id interdum adipiscing eros dis quis platea varius. Potenti eleifend eu molestie laoreet varius sapien. Adipiscing nascetur platea penatibus curabitur tempus nibh laoreet porttitor. Augue et curabitur cras sed semper inceptos nunc montes mollis.
133+
134+
Lectus arcu pellentesque inceptos tempor fringilla nascetur. Erat curae convallis integer mi, quis facilisi tortor. Phasellus aliquam molestie vehicula odio in dis maximus diam elit. Rutrum gravida amet euismod feugiat fusce. Est egestas velit vulputate senectus sociosqu fringilla eget nibh. Nam pellentesque aenean mi platea tincidunt quam sem purus. Himenaeos suspendisse nec sapien habitasse ultricies maecenas libero odio. Rutrum senectus maximus ultrices, ad nam ultricies placerat.
135+
136+
Enim habitant laoreet inceptos scelerisque senectus, tellus molestie ut. Eros risus nibh morbi eu aenean. Velit ligula magnis aliquet at luctus. Dapibus vestibulum consectetur euismod vitae per ultrices litora quis. Aptent eleifend dapibus urna lacinia felis nisl. Sit amet fusce nullam feugiat posuere. Urna amet curae velit fermentum interdum vestibulum penatibus. Penatibus vivamus sem ultricies pellentesque congue id mattis diam. Aliquam efficitur mi gravida sollicitudin; amet imperdiet. Rutrum mollis risus justo tortor in duis cursus.
137+
"""
138+
}
139+
enum PrimaryButtonText: String {
140+
case short = "Continue"
141+
case longer = "Remind me later"
142+
}
143+
enum SecondaryButtonText: String {
144+
case short = "Cancel"
145+
case longer = "Cancel, Don't Do That"
146+
}
147+
static let alertTitle = "Alert Title"
148+
static let initialPrimaryButton = AlertButtonVM {
149+
$0.title = PrimaryButtonText.short.rawValue
150+
$0.style = .filled
151+
$0.color = .primary
152+
}
153+
static let initialSecondaryButton = AlertButtonVM {
154+
$0.title = SecondaryButtonText.short.rawValue
155+
$0.style = .light
156+
}
157+
158+
var primaryButtonVMOrDefault: Binding<AlertButtonVM> {
159+
return .init(
160+
get: { self.model.primaryButton ?? Self.initialPrimaryButton },
161+
set: { self.model.primaryButton = $0 }
162+
)
163+
}
164+
var secondaryButtonVMOrDefault: Binding<AlertButtonVM> {
165+
return .init(
166+
get: { self.model.secondaryButton ?? Self.initialSecondaryButton },
167+
set: { self.model.secondaryButton = $0 }
168+
)
169+
}
170+
var hasButtons: Bool {
171+
return self.model.primaryButton != nil || self.model.secondaryButton != nil
87172
}
88173
}
89174

0 commit comments

Comments
 (0)