|
| 1 | +import ComponentsKit |
| 2 | +import SwiftUI |
| 3 | +import UIKit |
| 4 | + |
| 5 | +struct AlertPreview: View { |
| 6 | + @State var isAlertPresented: Bool = false |
| 7 | + @State private var model = AlertVM { |
| 8 | + $0.title = Self.alertTitle |
| 9 | + $0.message = AlertMessage.short.rawValue |
| 10 | + $0.primaryButton = Self.initialPrimaryButton |
| 11 | + $0.secondaryButton = Self.initialSecondaryButton |
| 12 | + } |
| 13 | + |
| 14 | + var body: some View { |
| 15 | + VStack { |
| 16 | + PreviewWrapper(title: "UIKit") { |
| 17 | + UKButton(model: .init { $0.title = "Show Alert" }) { |
| 18 | + UIApplication.shared.topViewController?.present( |
| 19 | + UKAlertController(model: self.model), |
| 20 | + animated: true |
| 21 | + ) |
| 22 | + } |
| 23 | + .preview |
| 24 | + } |
| 25 | + PreviewWrapper(title: "SwiftUI") { |
| 26 | + SUButton(model: .init { $0.title = "Show Alert" }) { |
| 27 | + self.isAlertPresented = true |
| 28 | + } |
| 29 | + .suAlert( |
| 30 | + isPresented: self.$isAlertPresented, |
| 31 | + model: self.model |
| 32 | + ) |
| 33 | + } |
| 34 | + Form { |
| 35 | + Section("Title") { |
| 36 | + Toggle("Has Title", isOn: .init( |
| 37 | + get: { return self.model.title != nil }, |
| 38 | + set: { newValue in |
| 39 | + self.model.title = newValue ? Self.alertTitle : nil |
| 40 | + } |
| 41 | + )) |
| 42 | + } |
| 43 | + |
| 44 | + Section("Message") { |
| 45 | + Picker("Alert Message", selection: self.$model.message) { |
| 46 | + Text("None").tag(Optional<String>.none) |
| 47 | + Text("Short").tag(AlertMessage.short.rawValue) |
| 48 | + Text("Long").tag(AlertMessage.long.rawValue) |
| 49 | + } |
| 50 | + } |
| 51 | + |
| 52 | + Section("Primary Button") { |
| 53 | + Toggle("Has Primary Button", isOn: .init( |
| 54 | + get: { return self.model.primaryButton != nil }, |
| 55 | + set: { newValue in |
| 56 | + self.model.primaryButton = newValue ? Self.initialPrimaryButton : nil |
| 57 | + } |
| 58 | + )) |
| 59 | + if self.model.primaryButton != nil { |
| 60 | + Picker("Title", selection: self.primaryButtonVMOrDefault.title) { |
| 61 | + Text("Short").tag(PrimaryButtonText.short.rawValue) |
| 62 | + Text("Longer").tag(PrimaryButtonText.longer.rawValue) |
| 63 | + } |
| 64 | + self.buttonPickers(for: self.primaryButtonVMOrDefault) |
| 65 | + } |
| 66 | + } |
| 67 | + |
| 68 | + Section("Secondary Button") { |
| 69 | + Toggle("Has Secondary Button", isOn: .init( |
| 70 | + get: { return self.model.secondaryButton != nil }, |
| 71 | + set: { newValue in |
| 72 | + self.model.secondaryButton = newValue ? Self.initialSecondaryButton : nil |
| 73 | + } |
| 74 | + )) |
| 75 | + if self.model.secondaryButton != nil { |
| 76 | + Picker("Title", selection: self.secondaryButtonVMOrDefault.title) { |
| 77 | + Text("Short").tag(SecondaryButtonText.short.rawValue) |
| 78 | + Text("Longer").tag(SecondaryButtonText.longer.rawValue) |
| 79 | + } |
| 80 | + self.buttonPickers(for: self.secondaryButtonVMOrDefault) |
| 81 | + } |
| 82 | + } |
| 83 | + |
| 84 | + Section("Main Properties") { |
| 85 | + Picker("Background Color", selection: self.$model.backgroundColor) { |
| 86 | + Text("Default").tag(Optional<UniversalColor>.none) |
| 87 | + Text("Accent Background").tag(ComponentColor.accent.background) |
| 88 | + Text("Success Background").tag(ComponentColor.success.background) |
| 89 | + Text("Warning Background").tag(ComponentColor.warning.background) |
| 90 | + Text("Danger Background").tag(ComponentColor.danger.background) |
| 91 | + } |
| 92 | + BorderWidthPicker(selection: self.$model.borderWidth) |
| 93 | + Toggle("Closes On Overlay Tap", isOn: self.$model.closesOnOverlayTap) |
| 94 | + Picker("Content Paddings", selection: self.$model.contentPaddings) { |
| 95 | + Text("12px").tag(Paddings(padding: 12)) |
| 96 | + Text("16px").tag(Paddings(padding: 16)) |
| 97 | + Text("20px").tag(Paddings(padding: 20)) |
| 98 | + } |
| 99 | + ContainerRadiusPicker(selection: self.$model.cornerRadius) { |
| 100 | + Text("Custom 30px").tag(ContainerRadius.custom(30)) |
| 101 | + } |
| 102 | + OverlayStylePicker(selection: self.$model.overlayStyle) |
| 103 | + TransitionPicker(selection: self.$model.transition) |
| 104 | + } |
| 105 | + } |
| 106 | + } |
| 107 | + } |
| 108 | + |
| 109 | + // MARK: - Reusable Pickers |
| 110 | + |
| 111 | + private func buttonPickers(for buttonVM: Binding<AlertButtonVM>) -> some View { |
| 112 | + Group { |
| 113 | + AnimationScalePicker(selection: buttonVM.animationScale) |
| 114 | + ComponentOptionalColorPicker(selection: buttonVM.color) |
| 115 | + ComponentRadiusPicker(selection: buttonVM.cornerRadius) { |
| 116 | + Text("Custom: 20px").tag(ComponentRadius.custom(20)) |
| 117 | + } |
| 118 | + Picker("Style", selection: buttonVM.style) { |
| 119 | + Text("Filled").tag(ButtonStyle.filled) |
| 120 | + Text("Plain").tag(ButtonStyle.plain) |
| 121 | + Text("Light").tag(ButtonStyle.light) |
| 122 | + Text("Bordered with small border").tag(ButtonStyle.bordered(.small)) |
| 123 | + Text("Bordered with medium border").tag(ButtonStyle.bordered(.medium)) |
| 124 | + Text("Bordered with large border").tag(ButtonStyle.bordered(.large)) |
| 125 | + } |
| 126 | + } |
| 127 | + } |
| 128 | + |
| 129 | + // MARK: - Helpers |
| 130 | + |
| 131 | + enum AlertMessage: String { |
| 132 | + case short = "Lorem ipsum dolor sit amet, consectetur adipiscing elit." |
| 133 | + case long = """ |
| 134 | +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. |
| 135 | +
|
| 136 | +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. |
| 137 | +
|
| 138 | +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. |
| 139 | +""" |
| 140 | + } |
| 141 | + enum PrimaryButtonText: String { |
| 142 | + case short = "Continue" |
| 143 | + case longer = "Remind me later" |
| 144 | + } |
| 145 | + enum SecondaryButtonText: String { |
| 146 | + case short = "Cancel" |
| 147 | + case longer = "Cancel, Don't Do That" |
| 148 | + } |
| 149 | + static let alertTitle = "Alert Title" |
| 150 | + static let initialPrimaryButton = AlertButtonVM { |
| 151 | + $0.title = PrimaryButtonText.short.rawValue |
| 152 | + $0.style = .filled |
| 153 | + $0.color = .primary |
| 154 | + } |
| 155 | + static let initialSecondaryButton = AlertButtonVM { |
| 156 | + $0.title = SecondaryButtonText.short.rawValue |
| 157 | + $0.style = .light |
| 158 | + } |
| 159 | + |
| 160 | + var primaryButtonVMOrDefault: Binding<AlertButtonVM> { |
| 161 | + return .init( |
| 162 | + get: { self.model.primaryButton ?? Self.initialPrimaryButton }, |
| 163 | + set: { self.model.primaryButton = $0 } |
| 164 | + ) |
| 165 | + } |
| 166 | + var secondaryButtonVMOrDefault: Binding<AlertButtonVM> { |
| 167 | + return .init( |
| 168 | + get: { self.model.secondaryButton ?? Self.initialSecondaryButton }, |
| 169 | + set: { self.model.secondaryButton = $0 } |
| 170 | + ) |
| 171 | + } |
| 172 | +} |
| 173 | + |
| 174 | +#Preview { |
| 175 | + AlertPreview() |
| 176 | +} |
0 commit comments