-
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-2631] SwiftUI RatingControl (#732)
* feat: 🎸 [JIRA:HCPSDKFIORIUIKIT-2631] SwiftUI RatingControl SwiftUI migration for RatingControl * feat: 🎸 [JIRA:HCPSDKFIORIUIKIT-2631] Add header doc Adding header doc for RatingControl * feat: 🎸 [JIRA:HCPSDKFIORIUIKIT-2631] address review comments
- Loading branch information
Showing
15 changed files
with
665 additions
and
0 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
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
82 changes: 82 additions & 0 deletions
82
Apps/Examples/Examples/FioriSwiftUICore/FormViews/RatingControlExample.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,82 @@ | ||
| import FioriSwiftUICore | ||
| import SwiftUI | ||
|
|
||
| struct RatingControlExample: View { | ||
| @State var rating1: Int = 1 | ||
|
|
||
| @State var rating2: Int = 2 | ||
|
|
||
| @State var rating3: Int = 3 | ||
|
|
||
| @State var rating4: Int = 4 | ||
|
|
||
| @State var rating5: Int = 1 | ||
|
|
||
| @State var rating6: Int = 2 | ||
|
|
||
| @State var rating7: Int = 3 | ||
|
|
||
| @State var rating8: Int = 4 | ||
|
|
||
| @State var rating9: Int = 1 | ||
|
|
||
| @State var rating10: Int = 2 | ||
|
|
||
| @State var rating11: Int = 3 | ||
|
|
||
| @State var rating12: Int = 4 | ||
|
|
||
| @State var rating13: Int = 1 | ||
|
|
||
| @State var rating14: Int = 2 | ||
|
|
||
| @State var rating15: Int = 3 | ||
|
|
||
| @State var rating16: Int = 4 | ||
|
|
||
| @State var rating17: Int = 1 | ||
|
|
||
| @State var rating18: Int = 2 | ||
|
|
||
| @State var rating19: Int = 3 | ||
|
|
||
| @State var rating20: Int = 4 | ||
|
|
||
| var body: some View { | ||
| List { | ||
| Text("RatingControl Default Example") | ||
| RatingControl(rating: self.$rating1, ratingControlStyle: .editable) | ||
| RatingControl(rating: self.$rating2, ratingControlStyle: .editableDisabled) | ||
| RatingControl(rating: self.$rating3, ratingControlStyle: .standard) | ||
| RatingControl(rating: self.$rating4, ratingControlStyle: .accented) | ||
|
|
||
| Text("Custom Color Example") | ||
| RatingControl(rating: self.$rating5, ratingControlStyle: .editable, onColor: .red, offColor: .yellow) | ||
| RatingControl(rating: self.$rating6, ratingControlStyle: .editableDisabled, onColor: .orange, offColor: .yellow) | ||
| RatingControl(rating: self.$rating7, ratingControlStyle: .standard, onColor: .brown, offColor: .yellow) | ||
| RatingControl(rating: self.$rating8, ratingControlStyle: .accented, onColor: .black, offColor: .yellow) | ||
|
|
||
| Text("Larger Size Example") | ||
| RatingControl(rating: self.$rating9, ratingControlStyle: .editable, itemSize: CGSize(width: 50, height: 50)) | ||
| RatingControl(rating: self.$rating10, ratingControlStyle: .editableDisabled, itemSize: CGSize(width: 40, height: 40)) | ||
| RatingControl(rating: self.$rating11, ratingControlStyle: .standard, itemSize: CGSize(width: 10, height: 10)) | ||
| RatingControl(rating: self.$rating12, ratingControlStyle: .accented, itemSize: CGSize(width: 5, height: 5)) | ||
|
|
||
| Text("Custom Image Example") | ||
| RatingControl(rating: self.$rating13, ratingControlStyle: .editable, onImage: Image(systemName: "hand.thumbsup.fill"), offImage: Image(systemName: "hand.thumbsdown.fill")) | ||
| RatingControl(rating: self.$rating14, ratingControlStyle: .editableDisabled, onImage: Image(systemName: "hand.thumbsup.fill"), offImage: Image(systemName: "hand.thumbsdown.fill")) | ||
| RatingControl(rating: self.$rating15, ratingControlStyle: .standard, onImage: Image(systemName: "hand.thumbsup.fill"), offImage: Image(systemName: "hand.thumbsdown.fill")) | ||
| RatingControl(rating: self.$rating16, ratingControlStyle: .accented, onImage: Image(systemName: "hand.thumbsup.fill"), offImage: Image(systemName: "hand.thumbsdown.fill")) | ||
|
|
||
| Text("Custom Number of Stars Example") | ||
| RatingControl(rating: self.$rating17, ratingControlStyle: .editable, ratingBounds: -5 ... 5) | ||
| RatingControl(rating: self.$rating18, ratingControlStyle: .editableDisabled, ratingBounds: -5 ... 5) | ||
| RatingControl(rating: self.$rating19, ratingControlStyle: .standard, ratingBounds: -5 ... 5) | ||
| RatingControl(rating: self.$rating20, ratingControlStyle: .accented, ratingBounds: -5 ... 5) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| #Preview { | ||
| RatingControlExample() | ||
| } |
166 changes: 166 additions & 0 deletions
166
Sources/FioriSwiftUICore/DataTypes/RatingControl+DataType.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,166 @@ | ||
| import SwiftUI | ||
|
|
||
| public extension RatingControl { | ||
| /** | ||
| The available style for the `FUIRatingControl`. | ||
| */ | ||
| enum Style { | ||
| /** | ||
| Editable style. | ||
| Each rating star is a SF Symbol body light style (large scale) with tint color. | ||
| This is the default style. | ||
| */ | ||
| case editable | ||
|
|
||
| /** | ||
| Disabled editable style. | ||
| Each rating star is the same as `Editable` style but with grey color. | ||
| */ | ||
| case editableDisabled | ||
|
|
||
| /** | ||
| Standard style. | ||
| This `FUIRatingControl` is read-only. Each rating star is a SF Symbol body light style (small scale). | ||
| */ | ||
| case standard | ||
|
|
||
| /** | ||
| Accented read-only style. | ||
| This `FUIRatingControl` is read-only with accented color. Each rating star is the same as in `standard` style. | ||
| */ | ||
| case accented | ||
| } | ||
| } | ||
|
|
||
| extension RatingControlConfiguration { | ||
| struct RatingItem: Identifiable { | ||
| public let id = UUID() | ||
| let isOn: Bool | ||
| } | ||
|
|
||
| func ratingItems(_ rating: Int) -> [RatingItem] { | ||
| var items: [RatingItem] = [] | ||
| for i in self.ratingBounds { | ||
| guard i != self.ratingBounds.upperBound else { | ||
| continue | ||
| } | ||
| items.append(RatingItem(isOn: i < rating)) | ||
| } | ||
| return items | ||
| } | ||
|
|
||
| func getOnColor() -> Color { | ||
| if let onColor { | ||
| return onColor | ||
| } | ||
| switch self.ratingControlStyle { | ||
| case .editable: | ||
| return .preferredColor(.tintColor) | ||
| case .editableDisabled: | ||
| return .preferredColor(.quaternaryLabel) | ||
| case .standard: | ||
| return .preferredColor(.tertiaryLabel) | ||
| case .accented: | ||
| return .preferredColor(.mango3) | ||
| } | ||
| } | ||
|
|
||
| func getOffColor() -> Color { | ||
| if let offColor { | ||
| return offColor | ||
| } | ||
| switch self.ratingControlStyle { | ||
| case .editable: | ||
| return .preferredColor(.tintColor) | ||
| case .editableDisabled: | ||
| return .preferredColor(.quaternaryLabel) | ||
| case .standard: | ||
| return .preferredColor(.tertiaryLabel) | ||
| case .accented: | ||
| return .preferredColor(.mango4) | ||
| } | ||
| } | ||
|
|
||
| func getOnImageView() -> some View { | ||
| self.getOnImage() | ||
| .resizable(resizingMode: .stretch) | ||
| .frame(width: self.getItemSize().width, height: self.getItemSize().height) | ||
| .font(.body) | ||
| .fontWeight(.light) | ||
| .imageScale(self.getScale()) | ||
| .foregroundColor(self.getOnColor()) | ||
| } | ||
|
|
||
| func getOffImageView() -> some View { | ||
| self.getOffImage() | ||
| .resizable(resizingMode: .stretch) | ||
| .frame(width: self.getItemSize().width, height: self.getItemSize().height) | ||
| .font(.body) | ||
| .fontWeight(.light) | ||
| .imageScale(self.getScale()) | ||
| .foregroundColor(self.getOffColor()) | ||
| } | ||
|
|
||
| func getOnImage() -> Image { | ||
| let image: Image = (onImage ?? Image(systemName: "star.fill")) | ||
| .renderingMode(.template) | ||
| return image | ||
| } | ||
|
|
||
| func getOffImage() -> Image { | ||
| let image: Image = (offImage ?? Image(systemName: "star")) | ||
| .renderingMode(.template) | ||
| return image | ||
| } | ||
|
|
||
| func getScale() -> Image.Scale { | ||
| switch self.ratingControlStyle { | ||
| case .editable, .editableDisabled: | ||
| return .large | ||
| case .standard, .accented: | ||
| return .small | ||
| } | ||
| } | ||
|
|
||
| func getItemSize() -> CGSize { | ||
| if let itemSize { | ||
| return itemSize | ||
| } | ||
| switch self.ratingControlStyle { | ||
| case .editable, .editableDisabled: | ||
| return CGSize(width: 28, height: 28) | ||
| case .standard, .accented: | ||
| return CGSize(width: 16, height: 16) | ||
| } | ||
| } | ||
|
|
||
| func getItemSpacing() -> CGFloat { | ||
| if let interItemSpacing { | ||
| return interItemSpacing | ||
| } | ||
| switch self.ratingControlStyle { | ||
| case .editable, .editableDisabled: | ||
| return CGFloat(4) | ||
| case .standard, .accented: | ||
| return CGFloat(2) | ||
| } | ||
| } | ||
|
|
||
| func getRatingValue(_ location: CGPoint) -> Int { | ||
| let x = location.x | ||
| if x <= 0 { | ||
| return self.ratingBounds.lowerBound | ||
| } | ||
| let itemWidth = self.getItemSize().width + self.getItemSpacing() | ||
| let n = Int(location.x / itemWidth) + 1 | ||
| if n >= self.ratingBounds.count { | ||
| return self.ratingBounds.upperBound | ||
| } else { | ||
| return self.ratingBounds.lowerBound + n | ||
| } | ||
| } | ||
| } |
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
49 changes: 49 additions & 0 deletions
49
Sources/FioriSwiftUICore/_FioriStyles/RatingControlStyle.fiori.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,49 @@ | ||
| import FioriThemeManager | ||
| import Foundation | ||
| import SwiftUI | ||
|
|
||
| // Base Layout style | ||
| public struct RatingControlBaseStyle: RatingControlStyle { | ||
| public func makeBody(_ configuration: RatingControlConfiguration) -> some View { | ||
| HStack(spacing: configuration.getItemSpacing()) { | ||
| ForEach(configuration.ratingItems(configuration.rating)) { ratingItem in | ||
| if ratingItem.isOn { | ||
| configuration.getOnImageView() | ||
| } else { | ||
| configuration.getOffImageView() | ||
| } | ||
| } | ||
| } | ||
| .onTapGesture { location in | ||
| if configuration.ratingControlStyle == .editable { | ||
| self.setRatingValue(configuration, location: location) | ||
| } | ||
| } | ||
| .gesture( | ||
| DragGesture(minimumDistance: 0.5) | ||
| .onChanged { value in | ||
| if configuration.ratingControlStyle == .editable { | ||
| self.setRatingValue(configuration, location: value.location) | ||
| } | ||
| } | ||
| ) | ||
| } | ||
|
|
||
| func setRatingValue(_ configuration: RatingControlConfiguration, location: CGPoint) { | ||
| let newValue = configuration.getRatingValue(location) | ||
| if configuration.rating != newValue { | ||
| configuration.rating = newValue | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Default fiori styles | ||
| extension RatingControlFioriStyle { | ||
| struct ContentFioriStyle: RatingControlStyle { | ||
| func makeBody(_ configuration: RatingControlConfiguration) -> some View { | ||
| RatingControl(configuration) | ||
| // Add default style for its content | ||
| // .background() | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.