Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Paywalls V2] Fix vstack and hstack growing size when fit #4646

Merged
merged 6 commits into from
Jan 13, 2025
Merged

[Paywalls V2] Fix vstack and hstack growing size when fit #4646

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c4e39b7
[Paywalls V2] Fix vstack and hstack growing size when fit
joshdholtz Jan 10, 2025
d850b33
Maybe this
joshdholtz Jan 10, 2025
f1dbe0f
Proper fix
joshdholtz Jan 10, 2025
3e2935a
Update comment
joshdholtz Jan 10, 2025
f55c736
This is it
joshdholtz Jan 10, 2025
39948f0
THIS IS FOR REAL IT
joshdholtz Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 81 additions & 8 deletions RevenueCatUI/Templates/V2/Components/Stack/StackComponentView.swift
View file
Open in desktop
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
Open in desktop
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)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't we need to also pass the verticalAlignment parameter here?

.size(style.size,
      horizontalAlignment: style.horizontalAlignment,
      verticalAlignment: style.verticalAlignment)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also thought the same thing at first too 😅 But... text doesn't have a vertical alignment property for its content 🤷‍♂️

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, you're totally right! Thanks for the clarification!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, you're totally right! Thanks for the clarification!

Np np! Thanks for asking about that because it does seem like an odd change at first 😇

.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
Open in desktop
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))
// }
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps this commented out code can be removed


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

}
Expand Down