Skip to content

Commit

Permalink
refactor: 💡 [HCPSDKFIORIUIKIT-2879] KeyValueItem Refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
zuopengchi committed Dec 27, 2024
1 parent 33d3788 commit 021bd17
Show file tree
Hide file tree
Showing 37 changed files with 891 additions and 106 deletions.
4 changes: 4 additions & 0 deletions Apps/Examples/Examples.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
3CC870962CB6F4F30081909C /* ToastMessageExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3CC870952CB6F4F30081909C /* ToastMessageExample.swift */; };
3CD71F292CDB627300B037EB /* CheckoutIndicatorExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3CD71F282CDB626900B037EB /* CheckoutIndicatorExample.swift */; };
3CDD6ECD2CE4277300DDAE7D /* CheckoutIndicatorModalExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3CDD6ECC2CE4277300DDAE7D /* CheckoutIndicatorModalExample.swift */; };
553FD8FA2D1E37FA005A6DE7 /* _KeyValueItemExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 553FD8F92D1E37FA005A6DE7 /* _KeyValueItemExample.swift */; };
55598FAD2CDDB4F6007CFFBB /* ValuePickerExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 55598FAC2CDDB4F6007CFFBB /* ValuePickerExample.swift */; };
6432FFA02C5164F8008ECE89 /* SegmentedControlExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6432FF9F2C5164F8008ECE89 /* SegmentedControlExample.swift */; };
6439F5142CEE892200EF1B42 /* ProcessingIndicatorExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6439F5132CEE892200EF1B42 /* ProcessingIndicatorExample.swift */; };
Expand Down Expand Up @@ -252,6 +253,7 @@
3CC870952CB6F4F30081909C /* ToastMessageExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ToastMessageExample.swift; sourceTree = "<group>"; };
3CD71F282CDB626900B037EB /* CheckoutIndicatorExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CheckoutIndicatorExample.swift; sourceTree = "<group>"; };
3CDD6ECC2CE4277300DDAE7D /* CheckoutIndicatorModalExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CheckoutIndicatorModalExample.swift; sourceTree = "<group>"; };
553FD8F92D1E37FA005A6DE7 /* _KeyValueItemExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = _KeyValueItemExample.swift; sourceTree = "<group>"; };
55598FAC2CDDB4F6007CFFBB /* ValuePickerExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ValuePickerExample.swift; sourceTree = "<group>"; };
6432FF9F2C5164F8008ECE89 /* SegmentedControlExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SegmentedControlExample.swift; sourceTree = "<group>"; };
6439F5132CEE892200EF1B42 /* ProcessingIndicatorExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProcessingIndicatorExample.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -810,6 +812,7 @@
9DEC27B32C3F3D750070B571 /* Views */ = {
isa = PBXGroup;
children = (
553FD8F92D1E37FA005A6DE7 /* _KeyValueItemExample.swift */,
9DEC27B42C3F3DB30070B571 /* KeyValueItemExample.swift */,
9DEC27B62C3F3DE70070B571 /* OtherViewExamples.swift */,
B1A78D972C88388B00432B0D /* ShadowEffectExample.swift */,
Expand Down Expand Up @@ -1205,6 +1208,7 @@
8A5579D124C1293C0098003A /* Settings.swift in Sources */,
8AD9DFB025D49967007448EC /* ContactItemActionItemsExample.swift in Sources */,
8A6D64B125AE658300D2D76C /* ExpHeaderView.swift in Sources */,
553FD8FA2D1E37FA005A6DE7 /* _KeyValueItemExample.swift in Sources */,
E99A025F2B9EC055008A4B77 /* SearchIconAndPlaceholder.swift in Sources */,
B1A98FF52C12E9A000FC9998 /* BannerMessageModifierExample.swift in Sources */,
B1BA1F922B19AAEE00E6C052 /* TabViewDetailView.swift in Sources */,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,49 +2,96 @@ import FioriSwiftUICore
import SwiftUI

struct KeyValueItemExample: View {
@State var isRequired: Bool = false
@State var isEmptyValue: Bool = false
@State var showsErrorMessage = false
@State var state: ControlState = .normal
@State var axis: Axis = .horizontal

struct CustomKeyValueItemStyle: KeyValueItemStyle {
func makeBody(_ configuration: KeyValueItemConfiguration) -> some View {
KeyValueItem(configuration)
.keyStyle { c in
c.key
.lineLimit(2)
.font(.fiori(forTextStyle: .callout))
.foregroundStyle(Color.preferredColor(.green7))
}
.valueStyle { c in
c.value
.lineLimit(2)
.font(.fiori(forTextStyle: .title3))
.foregroundStyle(Color.preferredColor(.indigo7))
.background(Color.preferredColor(.red3))
}
.mandatoryFieldIndicatorStyle { c in
c.mandatoryFieldIndicator
.font(.fiori(forTextStyle: .largeTitle))
.foregroundStyle(Color.preferredColor(.blue8))
}
}
}

var body: some View {
Text("KeyValueItemExample")
List {
Text("Default Horizontal")
KeyValueItem {
Text("Key 1")

} value: {
Text("Value 1")
Section {
Toggle("Allow Empty Value", isOn: self.$isEmptyValue)
Toggle("Mandatory Field", isOn: self.$isRequired)
Picker("Control State", selection: self.$state) {
Text("Normal").tag(ControlState.normal)
Text("Disabled").tag(ControlState.disabled)
Text("Readonly").tag(ControlState.readOnly)
}
Picker("Axis", selection: self.$axis) {
Text("Horizontal").tag(Axis.horizontal)
Text("Vertical").tag(Axis.vertical)
}
}

Text("Vertical")
KeyValueItem(key: {
Text("Vertical Axis")
}, value: {
Text("Value 2")
}, axis: .vertical)

Text("Custom Color and Font")
KeyValueItem {
Text("Custom Color")
.foregroundStyle(.red)
.font(.fiori(forTextStyle: .title1))
} value: {
Text("Value 3")
.foregroundStyle(.brown)
.font(.fiori(forTextStyle: .footnote))
Section {
Text("Key Value Item (Default Style)")
KeyValueItem(
key: { Text("Key 1") },
value: { self.valueView("Value 1") },
isRequired: self.isRequired,
controlState: self.state,
axis: self.axis
)

Divider().background(Color.gray)
Text("Key Value Item (Long String)")
KeyValueItem(
key: { Text("Long long long long long long long long long long long long long long long long long long Key") },
value: { self.valueView("Long long long long long long Value") },
isRequired: self.isRequired,
controlState: self.state,
axis: self.axis
)

Divider().background(Color.gray)
Text("Key Value Item 2 lines (Custom Style)")
KeyValueItem(
key: { Text("Long long long long long long long long long long long long long long long long long long long long long Key") },
value: { self.valueView("Value") },
isRequired: self.isRequired,
controlState: self.state,
axis: self.axis
).keyValueItemStyle(CustomKeyValueItemStyle())
}

Text("Verticle Custom Color and Font")
KeyValueItem(key: {
Text("Custom Color and Font Vertical Axis")
.foregroundStyle(.red)
.font(.fiori(forTextStyle: .title1))
}, value: {
Text("Value 4")
.foregroundStyle(.brown)
.font(.fiori(forTextStyle: .footnote))
}, axis: .vertical)
}
}
}

#Preview {
KeyValueItemExample()

@ViewBuilder
func valueView(_ valueString: String) -> some View {
if self.isEmptyValue {
EmptyView()
} else {
Text(valueString)
}
}

struct KeyValueItemExample_Previews: PreviewProvider {
static var previews: some View {
KeyValueItemExample()
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ struct OtherViewExamples: View {
{
Text("KeyValueItem Example")
}
NavigationLink(
destination: _KeyValueItemExample())
{
Text("_KeyValueItem Example")
}
}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import FioriSwiftUICore
import SwiftUI

struct _KeyValueItemExample: View {
var body: some View {
Text("_KeyValueItemExample")
List {
Text("Default Horizontal")
_KeyValueItem {
Text("Key 1")

} value: {
Text("Value 1")
}

Text("Vertical")
_KeyValueItem(key: {
Text("Vertical Axis")
}, value: {
Text("Value 2")
}, axis: .vertical)

Text("Custom Color and Font")
_KeyValueItem {
Text("Custom Color")
.foregroundStyle(.red)
.font(.fiori(forTextStyle: .title1))
} value: {
Text("Value 3")
.foregroundStyle(.brown)
.font(.fiori(forTextStyle: .footnote))
}

Text("Verticle Custom Color and Font")
_KeyValueItem(key: {
Text("Custom Color and Font Vertical Axis")
.foregroundStyle(.red)
.font(.fiori(forTextStyle: .title1))
}, value: {
Text("Value 4")
.foregroundStyle(.brown)
.font(.fiori(forTextStyle: .footnote))
}, axis: .vertical)
}
}
}

#Preview {
_KeyValueItemExample()
}

This file was deleted.

5 changes: 4 additions & 1 deletion Sources/FioriSwiftUICore/Models/ModelDefinitions.swift
Original file line number Diff line number Diff line change
Expand Up @@ -80,12 +80,15 @@ public protocol KPIItemModel: KpiComponent, SubtitleComponent, KPIHeaderItemMode
public protocol KPIProgressItemModel: KpiProgressComponent, SubtitleComponent, FootnoteComponent, KPIHeaderItemModel {}

// sourcery: generated_component
public protocol KeyValueItemModel: KeyComponent, ValueComponent {
public protocol _KeyValueItemModel: KeyComponent, ValueComponent {
// sourcery: default.value = .horizontal
// sourcery: no_view
var axis: Axis { get }
}

@available(*, unavailable, renamed: "_KeyValueItemModel", message: "Will be removed in the future release. Please create KeyValueItem with other initializers instead.")
public protocol KeyValueItemModel {}

// sourcery: add_env_props = "sharedAction"
// sourcery: generated_component_not_configurable
public protocol _ActionModel: ActionComponent {}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Foundation
import SwiftUI

extension Fiori {
enum KeyValueItem {
enum _KeyValueItem {
typealias KeyCumulative = EmptyModifier
typealias ValueCumulative = EmptyModifier

Expand Down Expand Up @@ -30,7 +30,7 @@ extension Fiori {
}
}

extension KeyValueItem: View {
extension _KeyValueItem: View {
public var body: some View {
CompactVStack(alignment: .leading) {
if _axis == .horizontal {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -534,3 +534,9 @@ protocol _LineComponent {
@ViewBuilder
var line: (() -> any View)? { get }
}

// sourcery: BaseComponent
protocol _KeyComponent {
// sourcery: @ViewBuilder
var key: AttributedString { get }
}
Original file line number Diff line number Diff line change
Expand Up @@ -1002,3 +1002,19 @@ protocol _StepProgressIndicatorComponent: _TitleComponent, _ActionComponent, _Ca
// sourcery: resultBuilder.returnType = any IndexedViewContainer
var steps: [StepItem] { get }
}

/// `KeyValueItem` provides a customizable activity item with a key and a value.
///
/// ## Usage
/// ```swift
/// KeyValueItem(key: {
/// Text("key 1")
/// }, value: {
/// Text("value 1")
/// }, axis: .vertical)
/// ```
// sourcery: CompositeComponent
protocol _KeyValueItemComponent: _KeyComponent, _ValueComponent, _MandatoryField, _FormViewComponent {
// sourcery: defaultValue = .horizontal
var axis: Axis { get }
}
35 changes: 35 additions & 0 deletions Sources/FioriSwiftUICore/_FioriStyles/KeyStyle.fiori.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import FioriThemeManager

// Generated using Sourcery 2.1.7 — https://github.com/krzysztofzablocki/Sourcery
// DO NOT EDIT
import Foundation
import SwiftUI

/// **
// This file provides default fiori style for the component.
//
// 1. Uncomment the following code.
// 2. Implement layout and style in corresponding places.
// 3. Delete `.generated` from file name.
// 4. Move this file to `_FioriStyles` folder under `FioriSwiftUICore`.
// */
//
// Base Layout style
public struct KeyBaseStyle: KeyStyle {
@ViewBuilder
public func makeBody(_ configuration: KeyConfiguration) -> some View {
// Add default layout here
configuration.key
}
}

// Default fiori styles
public struct KeyFioriStyle: KeyStyle {
@ViewBuilder
public func makeBody(_ configuration: KeyConfiguration) -> some View {
Key(configuration)
// Add default style here
// .foregroundStyle(Color.preferredColor(<#fiori color#>))
// .font(.fiori(forTextStyle: <#fiori font#>))
}
}
Loading

0 comments on commit 021bd17

Please sign in to comment.