[Paywalls] Add Timeline component #4713
Conversation
| @@ -56,9 +56,8 @@ struct IconComponentView: View { | |||
| shadow: style.iconBackgroundShadow, | |||
| background: style.iconBackgroundStyle, | |||
| uiConfigProvider: self.viewModel.uiConfigProvider) | |||
| .padding(style.padding) | |||
| .padding(style.margin) | |||
There was a problem hiding this comment.
Bug fix: we're already applying the padding a few lines above. This is the margin but we were using the padding property.
| .size(style.size) | ||
| .clipped() |
There was a problem hiding this comment.
I can't see a reason why the icon needs to be clipped. This is likely to clip the shadow if present, which is not intended.
| @@ -153,7 +152,7 @@ struct IconComponentView_Previews: PreviewProvider { | |||
| ), | |||
| size: .init(width: .fixed(150), height: .fixed(150)), | |||
| padding: .init(top: 20, bottom: 20, leading: 20, trailing: 20), | |||
| margin: .zero, | |||
| margin: .init(top: 20, bottom: 20, leading: 20, trailing: 20), | |||
There was a problem hiding this comment.
Re-adding the margin so the snapshot stays the same
| @@ -78,7 +78,6 @@ struct PreviewRequiredEnvironmentProperties: ViewModifier { | |||
| let screenCondition: ScreenCondition | |||
| let componentViewState: ComponentViewState | |||
| let packageContext: PackageContext? | |||
| let colorScheme: ColorScheme | |||
There was a problem hiding this comment.
colorScheme is always present in the environment as it's a default SwiftUI property. Hardcoding it in previewRequiredEnvironmentProperties was making it impossible to switch the color scheme in Xcode previews.
1 build increased size
Paywalls 1.0 (1)
|
| Item | Install Size Change |
|---|---|
| DYLD.String Table | ⬆️ 151.7 kB |
| Code Signature | ⬆️ 7.9 kB |
| DYLD.Exports | ⬆️ 5.3 kB |
| 📝 RevenueCat.PaywallComponent.TimelineComponent.TimelineComponent | ⬆️ 5.1 kB |
| 📝 RevenueCat.PaywallComponent.TimelineComponent.Connector.Connector | ⬆️ 2.7 kB |
View Treemap
🛸 Powered by Emerge Tools
Comment trigger: Size diff threshold of 100.00kB exceeded
| @available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *) | ||
| extension Shape { | ||
|
|
||
| func fillColorScheme( |
There was a problem hiding this comment.
We already have helpers to apply a foreground and background color scheme but I needed to fill a shape.
At some point we need to refactor and unify the logic of all these methods.
| var description: TextComponentViewModel? | ||
| if let descriptionComponent = item.description { | ||
| description = try TextComponentViewModel( | ||
| localizationProvider: localizationProvider, | ||
| uiConfigProvider: uiConfigProvider, | ||
| component: descriptionComponent | ||
| ) | ||
| } |
There was a problem hiding this comment.
Nit: can flatMap (errr, compactMap) the optional too 🤷♂️
There was a problem hiding this comment.
Not sure I follow what you mean here 🤔
| public let iconAlignment: IconAlignment? | ||
| public let itemSpacing: CGFloat? | ||
| public let textSpacing: CGFloat? | ||
| public let columnGutter: CGFloat? |
There was a problem hiding this comment.
Oh interesting... In android I was considering all these mandatory... I guess we could default to 0 in the SDK, but seems like something the backend should always provide? Wdyt?
There was a problem hiding this comment.
I just made them optional out of abundance of caution 😅 I'd expect the backend to send a default value always yes.
Because of how Decodable works in Swift, I cannot specify a default value, I must define them as optional tho.
| width: connector.width, | ||
| height: proxy[to][.center].y - proxy[from][.center].y - | ||
| (item.component.connector?.margin.bottom ?? 0) - | ||
| (item.component.connector?.margin.top ?? 0) |
There was a problem hiding this comment.
Hmm right... I think I will need to do some of this calculations in Android as well in cases where one item is bigger than the others 👍
Adds a new Timeline component which displays a list of items with a title, description, icon and a connector between the icons.