-
Notifications
You must be signed in to change notification settings - Fork 57
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: 🎸 [JIRA:HCPSDKFIORIUIKIT-1934]SwiftUI TimelinePreviewView (#780)
* feat: 🎸 [JIRA:HCPSDKFIORIUIKIT-1934]SwiftUI TimelinePreviewView * feat: 🎸 [JIRA:HCPSDKFIORIUIKIT-1934]Address bot checks * feat: 🎸 [JIRA:HCPSDKFIORIUIKIT-1934]Address the comments * feat: 🎸 [JIRA:HCPSDKFIORIUIKIT-1934]Address new comments * feat: 🎸 [JIRA:HCPSDKFIORIUIKIT-1934]Added a new base component * feat: 🎸 [JIRA:HCPSDKFIORIUIKIT-1934]Updated model to protocol * feat: 🎸 [JIRA:HCPSDKFIORIUIKIT-1934]Added Docs * feat: 🎸 [JIRA:HCPSDKFIORIUIKIT-1934]Corrected Docs issue --------- Co-authored-by: Bill Zhou <bill.zhou01@sap.com>
- Loading branch information
1 parent
4889cbd
commit 1acd47c
Showing
26 changed files
with
1,454 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 57 additions & 0 deletions
57
Apps/Examples/Examples/FioriSwiftUICore/Timeline/CustomTimelinePreviewExample.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import FioriSwiftUICore | ||
| import SwiftUI | ||
|
|
||
| struct CustomTimelinePreviewExample: View { | ||
| @State private var items0: [TimelinePreviewItemModelImplementation] = [ | ||
| TimelinePreviewItemModelImplementation(title: "open", icon: Image(systemName: "a.square"), timelineNode: TimelineNodeType.inProgress, due: ISO8601DateFormatter().date(from: "2024-09-21T12:00:00Z")!, dateFormat: "dd/MM/yyyy"), | ||
| TimelinePreviewItemModelImplementation(title: "Before start", icon: Image(systemName: "a.square"), timelineNode: TimelineNodeType.start, due: ISO8601DateFormatter().date(from: "2024-07-23T12:00:00Z")!, dateFormat: "dd/MM/yyyy"), | ||
| TimelinePreviewItemModelImplementation(title: "start", timelineNode: TimelineNodeType.open, due: ISO8601DateFormatter().date(from: "2024-08-19T12:00:00Z")!), | ||
| TimelinePreviewItemModelImplementation(title: "open", icon: Image(systemName: "o.square"), timelineNode: TimelineNodeType.inProgress, due: ISO8601DateFormatter().date(from: "2024-08-17T12:00:00Z")!), | ||
| TimelinePreviewItemModelImplementation(title: "open", timelineNode: TimelineNodeType.open, due: ISO8601DateFormatter().date(from: "2024-09-27T12:00:00Z")!) | ||
| ] | ||
|
|
||
| var body: some View { | ||
| VStack { | ||
| TimelinePreview( | ||
| optionalTitle: { Text("Timeline") }, | ||
| action: { | ||
| FioriButton( | ||
| label: { _ in | ||
| Label("See All (\(self.items0.count))", systemImage: "arrowtriangle.right") | ||
| .labelStyle(MyLabelStyle()) | ||
| } | ||
| ) | ||
| }, | ||
| items: .constant(self.items0.map { $0 as any TimelinePreviewItemModel }) | ||
| ) | ||
| .timelinePreviewItemStyle(content: { config in | ||
| TimelinePreviewItem(config) | ||
| .titleStyle(content: { titleConfig in | ||
| titleConfig.title.foregroundColor(.yellow) | ||
| }) | ||
| .timestampStyle(content: { timestampConfig in | ||
| timestampConfig.timestamp.foregroundColor(.red) | ||
| }) | ||
| }) | ||
| .optionalTitleStyle(content: { config in | ||
| config.optionalTitle.foregroundColor(.purple) | ||
| }) | ||
| Spacer() | ||
| } | ||
| } | ||
| } | ||
|
|
||
| struct MyLabelStyle: LabelStyle { | ||
| func makeBody(configuration: Configuration) -> some View { | ||
| HStack(alignment: .center) { | ||
| configuration.title | ||
| .foregroundColor(.purple) | ||
| configuration.icon | ||
| .foregroundColor(.green) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| #Preview { | ||
| CustomTimelinePreviewExample() | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 66 additions & 0 deletions
66
Apps/Examples/Examples/FioriSwiftUICore/Timeline/SimpleTimelinePreviewExample.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import FioriSwiftUICore | ||
| import SwiftUI | ||
|
|
||
| struct SimpleTimelinePreviewExample: View { | ||
| @State private var items0: [TimelinePreviewItemModelImplementation] = [ | ||
| TimelinePreviewItemModelImplementation(title: "POC", timelineNode: TimelineNodeType.beforeStart, due: ISO8601DateFormatter().date(from: "2024-06-03T12:00:00Z")!), | ||
| TimelinePreviewItemModelImplementation(title: "Project Phase 3", timelineNode: TimelineNodeType.open, due: ISO8601DateFormatter().date(from: "2024-06-25T12:00:00Z")!), | ||
| TimelinePreviewItemModelImplementation(title: "Project Phase 2", timelineNode: TimelineNodeType.inProgress, due: ISO8601DateFormatter().date(from: "2024-06-20T12:00:00Z")!), | ||
| TimelinePreviewItemModelImplementation(title: "Project Phase 1", timelineNode: TimelineNodeType.complete, due: ISO8601DateFormatter().date(from: "2024-06-12T12:00:00Z")!), | ||
| TimelinePreviewItemModelImplementation(title: "Project Start", timelineNode: TimelineNodeType.start, due: ISO8601DateFormatter().date(from: "2024-06-05T12:00:00Z")!), | ||
| TimelinePreviewItemModelImplementation(title: "Project End", timelineNode: TimelineNodeType.end, due: ISO8601DateFormatter().date(from: "2024-07-25T12:00:00Z")!), | ||
| TimelinePreviewItemModelImplementation(title: "Accept Test", timelineNode: TimelineNodeType.beforeEnd, due: ISO8601DateFormatter().date(from: "2024-07-15T12:00:00Z")!), | ||
| TimelinePreviewItemModelImplementation(title: "Project Phase 4", timelineNode: TimelineNodeType.open, due: ISO8601DateFormatter().date(from: "2024-07-05T12:00:00Z")!) | ||
| ] | ||
|
|
||
| var body: some View { | ||
| VStack { | ||
| NavigationLink(destination: TimelineView()) { | ||
| TimelinePreview(optionalTitle: { Text("Timeline Preview") }, items: .constant(self.items0.map { $0 as any TimelinePreviewItemModel })) | ||
| } | ||
| Spacer() | ||
| } | ||
| } | ||
| } | ||
|
|
||
| struct TimelineView: View { | ||
| var body: some View { | ||
| List { | ||
| Section(header: Text("Simple Timeline Example")) { | ||
| TimelineMarker(timestamp: "06/03/24", secondaryTimestamp: .icon(Image(systemName: "sun.max")), timelineNode: .beforeStart, title: "POC", isPast: true, showUpperVerticalLine: false) | ||
| .modifier(CustomListRowModifier()) | ||
| .secondaryTimestampStyle(content: { config in | ||
| config.secondaryTimestamp.foregroundColor(.yellow) | ||
| }) | ||
| TimelineMarker(timestamp: "06/05/24", secondaryTimestamp: .text("Sunny"), timelineNode: .start, title: "Project Start", isPast: true) | ||
| .modifier(CustomListRowModifier()) | ||
| Timeline(timestamp: "06/12/24", secondaryTimestamp: .icon(Image(systemName: "sun.max")), timelineNode: .complete, title: "Project Phase 1", attribute: "xx features implementation done", status: .text("Done"), isPast: true) | ||
| .modifier(CustomListRowModifier()) | ||
| .secondaryTimestampStyle(content: { config in | ||
| config.secondaryTimestamp.foregroundColor(.yellow) | ||
| }) | ||
| Timeline(timestamp: "06/20/24", timelineNode: .inProgress, title: "Project Phase 2", subtitle: "Integration test", status: .text("ongoing"), isPresent: true) | ||
| .modifier(CustomListRowModifier()) | ||
| TimelineNowIndicator() | ||
| .modifier(CustomListRowModifier()) | ||
| Timeline(timestamp: "06/25/24", timelineNode: .open, title: "Project Phase 3", attribute: "feature list: xx, xx, xx", status: .text("pending")) | ||
| .modifier(CustomListRowModifier()) | ||
| Timeline(timestamp: "06/28/24", timelineNode: .open, title: "Project Phase 4", attribute: "feature list: xx, xx, xx", status: .text("pending")) | ||
| .modifier(CustomListRowModifier()) | ||
| TimelineMarker(timestamp: "07/05/24", timelineNode: .beforeEnd, title: "Accept Test") | ||
| .modifier(CustomListRowModifier()) | ||
| TimelineMarker(timestamp: "07/09/24", secondaryTimestamp: .icon(Image(systemName: "sun.max")), timelineNode: .end, title: "Project End", showLowerVerticalLine: false) | ||
| .modifier(CustomListRowModifier()) | ||
| .secondaryTimestampStyle(content: { config in | ||
| config.secondaryTimestamp.foregroundColor(.yellow) | ||
| }) | ||
| } | ||
| } | ||
| .listStyle(.plain) | ||
| .environment(\.defaultMinListRowHeight, 7) | ||
| } | ||
| } | ||
|
|
||
| #Preview { | ||
| SimpleTimelinePreviewExample() | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.