Skip to content

Commit

Permalink
[Paywalls V2] Fix vstack and hstack growing size when fit (#4646)
Browse files Browse the repository at this point in the history 
* [Paywalls V2] Fix vstack and hstack growing size when fit

* Maybe this

* Proper fix

* Update comment

* This is it

* THIS IS FOR REAL IT
  • Loading branch information
@joshdholtz
joshdholtz authored Jan 13, 2025
1 parent dc3de11 commit c100009
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 14 deletions.
89 changes: 81 additions & 8 deletions RevenueCatUI/Templates/V2/Components/Stack/StackComponentView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,10 @@ struct StackComponentView: View {
viewModels: self.viewModel.viewModels,
onDismiss: self.onDismiss
)
// This alignment positions the inner VStack horizontally.
.size(style.size, alignment: horizontalAlignment.frameAlignment)
// This alignment positions the inner VStack horizontally and vertically
.size(style.size,
horizontalAlignment: horizontalAlignment.frameAlignment,
verticalAlignment: distribution.verticalFrameAlignment)
case .horizontal(let verticalAlignment, let distribution):
HorizontalStack(
style: style,
Expand All @@ -79,8 +81,10 @@ struct StackComponentView: View {
viewModels: self.viewModel.viewModels,
onDismiss: self.onDismiss
)
// This alignment positions the inner HStack vertically.
.size(style.size, alignment: verticalAlignment.frameAlignment)
// This alignment positions the inner VStack horizontally and vertically
.size(style.size,
horizontalAlignment: distribution.horizontalFrameAlignment,
verticalAlignment: verticalAlignment.frameAlignment)
case .zlayer(let alignment):
ZStack(alignment: alignment.stackAlignment) {
ComponentsView(componentViewModels: self.viewModel.viewModels, onDismiss: self.onDismiss)
Expand Down Expand Up @@ -128,8 +132,6 @@ struct VerticalStack: View {
onDismiss: self.onDismiss
)
}
// This alignment positions the items vertically within its parent
.frame(maxHeight: .infinity, alignment: distribution.verticalFrameAlignment)
case .flex:
FlexVStack(
alignment: horizontalAlignment.stackAlignment,
Expand Down Expand Up @@ -163,8 +165,6 @@ struct HorizontalStack: View {
) {
ComponentsView(componentViewModels: self.viewModels, onDismiss: self.onDismiss)
}
// This alignment positions the items horizontally within its parent
.frame(maxWidth: .infinity, alignment: distribution.horizontalFrameAlignment)
case .flex:
FlexHStack(
alignment: verticalAlignment.stackAlignment,
Expand All @@ -181,6 +181,7 @@ struct HorizontalStack: View {
#if DEBUG

@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
// swiftlint:disable:next type_body_length
struct StackComponentView_Previews: PreviewProvider {
static var previews: some View {
// Default - Fill
Expand Down Expand Up @@ -347,6 +348,78 @@ struct StackComponentView_Previews: PreviewProvider {
.previewLayout(.sizeThatFits)
.previewDisplayName("Default - Fill Fit Fixed Fill")

// Fits don't expand
StackComponentView(
// swiftlint:disable:next force_try
viewModel: try! .init(
component: .init(
components: [
.stack(PaywallComponent.StackComponent(
components: [
.text(PaywallComponent.TextComponent(
text: "text_1",
color: .init(light: .hex("#000000")),
backgroundColor: .init(light: .hex("#ffcc00")),
size: .init(width: .fit, height: .fit),
margin: .init(top: 10, bottom: 10, leading: 10, trailing: 10)
)),
.stack(PaywallComponent.StackComponent(
components: [
.text(.init(
text: "text_1",
color: .init(light: .hex("#000000")),
backgroundColor: .init(light: .hex("#ffcc00")),
size: .init(width: .fit, height: .fit),
margin: .init(top: 10, bottom: 10, leading: 10, trailing: 10)
))
],
dimension: .vertical(.center, .center),
size: .init(width: .fit, height: .fit),
backgroundColor: .init(light: .hex("#dedede")),
margin: .init(top: 10, bottom: 10, leading: 10, trailing: 10)
)),
.stack(PaywallComponent.StackComponent(
components: [
.text(.init(
text: "text_1",
color: .init(light: .hex("#000000")),
backgroundColor: .init(light: .hex("#ffcc00")),
size: .init(width: .fit, height: .fit),
margin: .init(top: 10, bottom: 10, leading: 10, trailing: 10)
))
],
dimension: .horizontal(.center, .center),
size: .init(width: .fit, height: .fit),
backgroundColor: .init(light: .hex("#dedede")),
margin: .init(top: 10, bottom: 10, leading: 10, trailing: 10)
))
],
dimension: .vertical(.center, .center),
size: .init(width: .fit, height: .fit),
backgroundColor: .init(light: .hex("#0000ff")),
margin: .init(top: 10, bottom: 10, leading: 10, trailing: 10)
))
],
dimension: .vertical(.center, .center),
size: .init(
width: .fill,
height: .fill
),
backgroundColor: .init(light: .hex("#ff0000"))
),
localizationProvider: .init(
locale: Locale.current,
localizedStrings: [
"text_1": .string("Hey")
]
)
),
onDismiss: {}
)
.previewRequiredEnvironmentProperties()
.previewLayout(.fixed(width: 400, height: 400))
.previewDisplayName("Fits don't expand")

stackAlignmentAndDistributionPreviews()
}

Expand Down
3 changes: 2 additions & 1 deletion RevenueCatUI/Templates/V2/Components/Text/TextComponentView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,8 @@ struct TextComponentView: View {
.multilineTextAlignment(style.textAlignment)
.foregroundColorScheme(style.color, uiConfigProvider: self.viewModel.uiConfigProvider)
.padding(style.padding)
.size(style.size, alignment: style.horizontalAlignment)
.size(style.size,
horizontalAlignment: style.horizontalAlignment)
.backgroundStyle(style.backgroundStyle, uiConfigProvider: self.viewModel.uiConfigProvider)
.padding(style.margin)
} else {
Expand Down
22 changes: 17 additions & 5 deletions RevenueCatUI/Templates/V2/ViewHelpers/SizeModifier.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,13 @@ import SwiftUI
struct SizeModifier: ViewModifier {

var size: PaywallComponent.Size
var alignment: Alignment
var hortizontalAlignment: Alignment
var verticalAlignment: Alignment

func body(content: Content) -> some View {
content
.applyWidth(size.width, alignment: alignment)
.applyHeight(size.height, alignment: alignment)
.applyWidth(size.width, alignment: hortizontalAlignment)
.applyHeight(size.height, alignment: verticalAlignment)
}

}
Expand Down Expand Up @@ -63,8 +64,19 @@ fileprivate extension View {

extension View {

func size(_ size: PaywallComponent.Size, alignment: Alignment = .center) -> some View {
self.modifier(SizeModifier(size: size, alignment: alignment))
// func size(_ size: PaywallComponent.Size,
// alignment: Alignment = .center) -> some View {
// self.modifier(SizeModifier(size: size,
// hortizontalAlignment: alignment,
// verticalAlignment: alignment))
// }

func size(_ size: PaywallComponent.Size,
horizontalAlignment: Alignment = .center,
verticalAlignment: Alignment = .center) -> some View {
self.modifier(SizeModifier(size: size,
hortizontalAlignment: horizontalAlignment,
verticalAlignment: verticalAlignment))
}

}
Expand Down

0 comments on commit c100009

Please sign in to comment.