Skip to content

Commit

Permalink
test: 💍 update test (#677)
Browse files Browse the repository at this point in the history
Co-authored-by: dyongxu <61523257+dyongxu@users.noreply.github.com>
Co-authored-by: Bill Zhou <bill.zhou01@sap.com>
  • Loading branch information
3 people authored Apr 3, 2024
1 parent 376fdb1 commit 05727bd
Showing 1 changed file with 83 additions and 39 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -12,57 +12,101 @@ struct SizeOption: Identifiable {

let sizeOptions: [SizeOption] = [.init(100), .init(200), .init(300), .init(500), .init(600), .init(800)]

enum LayoutAxis {
case vertical
case horizontal
}

struct IllustratedMessageExample: View {
@State var selectedWidth: CGFloat = sizeOptions[2].value
@State var selectedHeight: CGFloat = sizeOptions[1].value
@State var selectedDetailImageSize: IllustratedMessage.DetailImageSize?
@State var selectedLayoutAxis: LayoutAxis?
@State var selectedWidth: CGFloat = sizeOptions[3].value
@State var selectedHeight: CGFloat = sizeOptions[2].value

var body: some View {
HStack {
Text("Size:")
Picker("Width", selection: self.$selectedWidth) {
ForEach(sizeOptions) { option in
Text("\(Int(option.value))").tag(option.value)
VStack(spacing: 0) {
HStack(spacing: 0) {
Text("Img Size:")
Picker("Img Size", selection: self.$selectedDetailImageSize) {
Text("Unset").tag(IllustratedMessage.DetailImageSize?(nil))
Text("XS").tag(IllustratedMessage.DetailImageSize?(.extraSmall))
Text("S").tag(IllustratedMessage.DetailImageSize?(.small))
Text("M").tag(IllustratedMessage.DetailImageSize?(.medium))
Text("L").tag(IllustratedMessage.DetailImageSize?(.large))
Text("XL").tag(IllustratedMessage.DetailImageSize?(.extraLarge))
}
}
Text("by")
Picker("Height", selection: self.$selectedHeight) {
ForEach(sizeOptions) { option in
Text("\(Int(option.value))").tag(option.value)
Text("Layout Axis:")
Picker("Layout Axis", selection: self.$selectedLayoutAxis) {
Text("Unset").tag(LayoutAxis?(nil))
Text("Vertical").tag(LayoutAxis?(.vertical))
Text("Horizontal").tag(LayoutAxis?(.horizontal))
}
}
Text("Image Size:")
Picker("Image Size", selection: self.$selectedDetailImageSize) {
Text("No Selection").tag(IllustratedMessage.DetailImageSize?(nil))
Text("Extra Small").tag(IllustratedMessage.DetailImageSize?(.extraSmall))
Text("Small").tag(IllustratedMessage.DetailImageSize?(.small))
Text("Medium").tag(IllustratedMessage.DetailImageSize?(.medium))
Text("Large").tag(IllustratedMessage.DetailImageSize?(.large))
Text("Extra Large").tag(IllustratedMessage.DetailImageSize?(.extraLarge))
HStack(spacing: 0) {
Text("Size:")
Picker("Width", selection: self.$selectedWidth) {
ForEach(sizeOptions) { option in
Text("\(Int(option.value))").tag(option.value)
}
}
Text("by")
Picker("Height", selection: self.$selectedHeight) {
ForEach(sizeOptions) { option in
Text("\(Int(option.value))").tag(option.value)
}
}
}
}
List {
ForEach(0 ... 2, id: \.self) { layoutOrientation in // 0 == unspecified (vertical); 1 == vertical; 2 == horizontal
ForEach(0 ... 7, id: \.self) { subcomponentConfiguration in
IllustratedMessage(detailImage: {
subcomponentConfiguration & 0b100 == 4 ?
Image("wheel")
.resizable()
.aspectRatio(contentMode: .fit)
: nil
}, title: {
Text("IllustratedMessage Title")
}, description: {
subcomponentConfiguration & 0b010 == 2 ? Text("IllustratedMessage Description") : nil
}, action: {
subcomponentConfiguration & 0b001 == 1 ? FioriButton(title: "ActionTitle", action: { _ in print("Action tapped") }) : nil
}, detailImageSize: self.selectedDetailImageSize)
.border(Color.gray)
.frame(width: self.selectedWidth, height: self.selectedHeight)
.ifApply(layoutOrientation == 1) { $0.illustratedMessageStyle(.vertical) }
.ifApply(layoutOrientation == 2) { $0.illustratedMessageStyle(.horizontal) }
ForEach(0 ... 7, id: \.self) { subcomponentConfiguration in
let hasImage = subcomponentConfiguration & 0b100 == 4
let hasDescription = subcomponentConfiguration & 0b010 == 2
let hasAction = subcomponentConfiguration & 0b001 == 1

HStack(spacing: 0) {
Spacer()
VStack(spacing: 10) {
Text(self.generateCaptionText(hasImage, hasDescription, hasAction)).font(.fiori(forTextStyle: .caption1))
IllustratedMessage(detailImage: {
hasImage ?
Image("wheel")
.resizable()
.aspectRatio(contentMode: .fit)
: nil
}, title: {
Text("Illustrated Message Title")
}, description: {
hasDescription ? Text("This is description text for the Illustrated Message component") : nil
}, action: {
hasAction ? FioriButton(title: "Button", action: { _ in print("Tapped Action") }) : nil
}, detailImageSize: self.selectedDetailImageSize)
.frame(width: self.selectedWidth, height: self.selectedHeight)
.background(Color.preferredColor(.secondaryBackground))
.ifApply(self.selectedLayoutAxis == .vertical) { $0.illustratedMessageStyle(.vertical) }
.ifApply(self.selectedLayoutAxis == .horizontal) { $0.illustratedMessageStyle(.horizontal) }
}
Spacer()
}
.listRowSeparator(.hidden)
.padding(20)
}
}
}

func generateCaptionText(_ hasImage: Bool, _ hasDescription: Bool, _ hasAction: Bool) -> String {
var subcomponentConfigurationText = ""

if hasImage {
subcomponentConfigurationText = subcomponentConfigurationText + "Image, "
}
subcomponentConfigurationText = subcomponentConfigurationText + "Title, "
if hasDescription {
subcomponentConfigurationText = subcomponentConfigurationText + "Description, "
}
if hasAction {
subcomponentConfigurationText = subcomponentConfigurationText + "Action, "
}
subcomponentConfigurationText.removeLast(2)
return subcomponentConfigurationText
}
}

0 comments on commit 05727bd

Please sign in to comment.