-
Notifications
You must be signed in to change notification settings - Fork 335
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Paywalls V2] Icon Component (#4655)
* Added icon for API * This is it * Renamed file * The icons * Fix for compile error * Rebased * Implemented some more properties
- Loading branch information
1 parent
0b5ad99
commit d86e100
Showing
11 changed files
with
597 additions
and
4 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
179 changes: 179 additions & 0 deletions
179
RevenueCatUI/Templates/V2/Components/Icon/IconComponentView.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,179 @@ | ||
| // | ||
| // Copyright RevenueCat Inc. All Rights Reserved. | ||
| // | ||
| // Licensed under the MIT License (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // https://opensource.org/licenses/MIT | ||
| // | ||
| // ImageComponentView.swift | ||
| // | ||
| // Created by Josh Holtz on 6/11/24. | ||
|
|
||
| import Foundation | ||
| import RevenueCat | ||
| import SwiftUI | ||
|
|
||
| #if PAYWALL_COMPONENTS | ||
|
|
||
| @available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *) | ||
| struct IconComponentView: View { | ||
|
|
||
| @EnvironmentObject | ||
| private var introOfferEligibilityContext: IntroOfferEligibilityContext | ||
|
|
||
| @EnvironmentObject | ||
| private var packageContext: PackageContext | ||
|
|
||
| @Environment(\.componentViewState) | ||
| private var componentViewState | ||
|
|
||
| @Environment(\.screenCondition) | ||
| private var screenCondition | ||
|
|
||
| @Environment(\.colorScheme) | ||
| private var colorScheme | ||
|
|
||
| let viewModel: IconComponentViewModel | ||
|
|
||
| var body: some View { | ||
| viewModel.styles( | ||
| state: self.componentViewState, | ||
| condition: self.screenCondition, | ||
| isEligibleForIntroOffer: self.introOfferEligibilityContext.isEligible( | ||
| package: self.packageContext.package | ||
| ) | ||
| ) { style in | ||
| RemoteImage( | ||
| url: style.url | ||
| ) { (image, size) in | ||
| self.renderImage(image, size, with: style) | ||
| } | ||
| .padding(style.padding) | ||
| .shape(border: style.iconBackgroundBorder, | ||
| shape: style.iconBackgroundShape, | ||
| shadow: style.iconBackgroundShadow, | ||
| background: style.iconBackgroundStyle, | ||
| uiConfigProvider: self.viewModel.uiConfigProvider) | ||
| .padding(style.padding) | ||
| .size(style.size) | ||
| .clipped() | ||
| } | ||
| } | ||
|
|
||
| private func aspectRatio(style: ImageComponentStyle) -> Double { | ||
| let (width, height) = self.imageSize(style: style) | ||
| return Double(width) / Double(height) | ||
| } | ||
|
|
||
| private func imageSize(style: ImageComponentStyle) -> (width: Int, height: Int) { | ||
| switch self.colorScheme { | ||
| case .light: | ||
| return (style.widthLight, style.heightLight) | ||
| case .dark: | ||
| return (style.widthDark ?? style.widthLight, style.heightDark ?? style.heightLight) | ||
| @unknown default: | ||
| return (style.widthLight, style.heightLight) | ||
| } | ||
| } | ||
|
|
||
| private func renderImage(_ image: Image, _ size: CGSize, with style: IconComponentStyle) -> some View { | ||
| image | ||
| .renderingMode(.template) | ||
| .fitToAspect( | ||
| 1, | ||
| contentMode: .fit, | ||
| containerContentMode: .fit | ||
| ) | ||
| .foregroundColor(style.color) | ||
| .frame(maxWidth: .infinity) | ||
| } | ||
|
|
||
| } | ||
|
|
||
| #if DEBUG | ||
|
|
||
| @available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *) | ||
| struct IconComponentView_Previews: PreviewProvider { | ||
|
|
||
| // Need to wrap in VStack otherwise preview rerenders and images won't show | ||
| static var previews: some View { | ||
|
|
||
| // Default | ||
| VStack { | ||
| IconComponentView( | ||
| // swiftlint:disable:next force_try | ||
| viewModel: try! .init( | ||
| localizationProvider: .init( | ||
| locale: Locale.current, | ||
| localizedStrings: [:] | ||
| ), | ||
| uiConfigProvider: .init(uiConfig: PreviewUIConfig.make()), | ||
| component: .init( | ||
| baseUrl: "https://icons.pawwalls.com/icons", | ||
| iconName: "pizza", | ||
| formats: .init( | ||
| svg: "pizza.svg", | ||
| png: "pizza.png", | ||
| heic: "pizza.heic", | ||
| webp: "pizza.webp" | ||
| ), | ||
| size: .init(width: .fixed(80), height: .fixed(80)), | ||
| padding: .zero, | ||
| margin: .zero, | ||
| color: .init(light: .hex("#ff0000")), | ||
| iconBackground: nil | ||
| ) | ||
| ) | ||
| ) | ||
| } | ||
| .previewRequiredEnvironmentProperties() | ||
| .previewLayout(.fixed(width: 100, height: 100)) | ||
| .previewDisplayName("Default") | ||
|
|
||
| // Default - Background | ||
| VStack { | ||
| IconComponentView( | ||
| // swiftlint:disable:next force_try | ||
| viewModel: try! .init( | ||
| localizationProvider: .init( | ||
| locale: Locale.current, | ||
| localizedStrings: [:] | ||
| ), | ||
| uiConfigProvider: .init(uiConfig: PreviewUIConfig.make()), | ||
| component: .init( | ||
| baseUrl: "https://icons.pawwalls.com/icons", | ||
| iconName: "pizza", | ||
| formats: .init( | ||
| svg: "pizza.svg", | ||
| png: "pizza.png", | ||
| heic: "pizza.heic", | ||
| webp: "pizza.webp" | ||
| ), | ||
| size: .init(width: .fixed(150), height: .fixed(150)), | ||
| padding: .init(top: 20, bottom: 20, leading: 20, trailing: 20), | ||
| margin: .zero, | ||
| color: PaywallComponent.ColorScheme( | ||
| light: .hex("#ff0000") | ||
| ), | ||
| iconBackground: PaywallComponent.IconComponent.IconBackground( | ||
| color: .init(light: .hex("#ffcc00")), | ||
| shape: .circle, | ||
| border: .init(color: .init(light: .hex("#ff0000")), width: 5), | ||
| shadow: .init(color: .init(light: .hex("#33333399")), radius: 10, x: 5, y: 5) | ||
| ) | ||
| ) | ||
| ) | ||
| ) | ||
| } | ||
| .previewRequiredEnvironmentProperties() | ||
| .previewLayout(.fixed(width: 200, height: 200)) | ||
| .previewDisplayName("Default - Background") | ||
|
|
||
| } | ||
| } | ||
|
|
||
| #endif | ||
|
|
||
| #endif |
Oops, something went wrong.