From 05727bd11a0e44105f0a8fb07c2b7b0e2624665a Mon Sep 17 00:00:00 2001 From: JuliaSchnSAP <124315571+JuliaSchnSAP@users.noreply.github.com> Date: Wed, 3 Apr 2024 11:52:03 -0700 Subject: [PATCH] =?UTF-8?q?test:=20=F0=9F=92=8D=20update=20test=20(#677)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: dyongxu <61523257+dyongxu@users.noreply.github.com> Co-authored-by: Bill Zhou --- .../IllustratedMessageExample.swift | 122 ++++++++++++------ 1 file changed, 83 insertions(+), 39 deletions(-) diff --git a/Apps/Examples/Examples/FioriSwiftUICore/IllustratedMessage/IllustratedMessageExample.swift b/Apps/Examples/Examples/FioriSwiftUICore/IllustratedMessage/IllustratedMessageExample.swift index 29241d154..57904d5e4 100644 --- a/Apps/Examples/Examples/FioriSwiftUICore/IllustratedMessage/IllustratedMessageExample.swift +++ b/Apps/Examples/Examples/FioriSwiftUICore/IllustratedMessage/IllustratedMessageExample.swift @@ -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 + } }